Refactoring Phase 1 (#199)
* style: added cta at the bottom of sidebar, added missing icons as well, showing dynamic workspace member count on workspace dropdown * refractor: running parallel request, made create/edit label function to async function * fix: sidebar dropdown content going below kanban items outside click detection in need help dropdown * refractor: making parallel api calls fix: create state input comes at bottom, create state input gets on focus automatically, form is getting submitted on enter click * refactoring file structure and signin page * style: changed text and added spinner for signing in loading * refractor: removed unused type * fix: my issue cta in profile page sending to 404 page * fix: added new s3 bucket url in next.config.js file increased image modal height * packaging UI components * eslint config * eslint fixes * refactoring changes * build fixes * minor fixes * adding todo comments for reference * refactor: cleared unused imports and re ordered imports * refactor: removed unused imports * fix: added workspace argument to useissues hook * refactor: removed api-routes file, unnecessary constants * refactor: created helpers folder, removed unnecessary constants * refactor: new context for issue view * refactoring issues page * build fixes * refactoring * refactor: create issue modal * refactor: module ui * fix: sub-issues mutation * fix: create more option in create issue modal * description form debounce issue * refactor: global component for assignees list * fix: link module interface * fix: priority icons and sub-issues count added * fix: cycle mutation in issue details page * fix: remove issue from cycle mutation * fix: create issue modal in home page * fix: removed unnecessary props * fix: updated create issue form status * fix: settings auth breaking * refactor: issue details page Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: venkatesh-soulpage <venkatesh.marreboyina@soulpageit.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
This commit is contained in:
parent
9134b0c543
commit
9075f9441c
322 changed files with 14149 additions and 21378 deletions
|
|
@ -1,158 +1,71 @@
|
|||
import React, { createContext, useCallback, useReducer, useEffect } from "react";
|
||||
import { createContext, useCallback, useReducer, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// constants
|
||||
import {
|
||||
TOGGLE_SIDEBAR,
|
||||
REHYDRATE_THEME,
|
||||
SET_ISSUE_VIEW,
|
||||
SET_GROUP_BY_PROPERTY,
|
||||
SET_ORDER_BY_PROPERTY,
|
||||
SET_FILTER_ISSUES,
|
||||
RESET_TO_DEFAULT,
|
||||
} from "constants/theme.context.constants";
|
||||
// components
|
||||
import ToastAlert from "components/toast-alert";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// constants
|
||||
import { USER_PROJECT_VIEW } from "constants/fetch-keys";
|
||||
// services
|
||||
import projectService from "lib/services/project.service";
|
||||
import projectService from "services/project.service";
|
||||
// fetch-keys
|
||||
import { USER_PROJECT_VIEW } from "constants/fetch-keys";
|
||||
// constants
|
||||
|
||||
export const themeContext = createContext<ContextType>({} as ContextType);
|
||||
|
||||
// types
|
||||
import type { IIssue, NestedKeyOf, ProjectViewTheme as Theme } from "types";
|
||||
import { useRouter } from "next/router";
|
||||
type ThemeProps = {
|
||||
collapsed: boolean;
|
||||
};
|
||||
|
||||
type ReducerActionType = {
|
||||
type:
|
||||
| typeof TOGGLE_SIDEBAR
|
||||
| typeof REHYDRATE_THEME
|
||||
| typeof SET_ISSUE_VIEW
|
||||
| typeof SET_ORDER_BY_PROPERTY
|
||||
| typeof SET_FILTER_ISSUES
|
||||
| typeof SET_GROUP_BY_PROPERTY
|
||||
| typeof RESET_TO_DEFAULT;
|
||||
payload?: Partial<Theme>;
|
||||
type: "TOGGLE_SIDEBAR" | "REHYDRATE_THEME";
|
||||
payload?: Partial<ThemeProps>;
|
||||
};
|
||||
|
||||
type ContextType = {
|
||||
collapsed: boolean;
|
||||
orderBy: NestedKeyOf<IIssue> | null;
|
||||
issueView: "list" | "kanban" | null;
|
||||
groupByProperty: NestedKeyOf<IIssue> | null;
|
||||
filterIssue: "activeIssue" | "backlogIssue" | null;
|
||||
toggleCollapsed: () => void;
|
||||
setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
|
||||
setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
|
||||
setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
|
||||
resetFilterToDefault: () => void;
|
||||
setNewFilterDefaultView: () => void;
|
||||
setIssueViewToKanban: () => void;
|
||||
setIssueViewToList: () => void;
|
||||
};
|
||||
|
||||
type StateType = Theme;
|
||||
type StateType = {
|
||||
collapsed: boolean;
|
||||
};
|
||||
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
|
||||
|
||||
export const initialState: StateType = {
|
||||
collapsed: false,
|
||||
issueView: "list",
|
||||
groupByProperty: null,
|
||||
orderBy: null,
|
||||
filterIssue: null,
|
||||
};
|
||||
|
||||
export const reducer: ReducerFunctionType = (state, action) => {
|
||||
const { type, payload } = action;
|
||||
|
||||
switch (type) {
|
||||
case TOGGLE_SIDEBAR:
|
||||
case "TOGGLE_SIDEBAR":
|
||||
const newState = {
|
||||
...state,
|
||||
collapsed: !state.collapsed,
|
||||
};
|
||||
localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
|
||||
return newState;
|
||||
case REHYDRATE_THEME: {
|
||||
|
||||
case "REHYDRATE_THEME": {
|
||||
let collapsed: any = localStorage.getItem("collapsed");
|
||||
collapsed = collapsed ? JSON.parse(collapsed) : false;
|
||||
return { ...initialState, ...payload, collapsed };
|
||||
}
|
||||
case SET_ISSUE_VIEW: {
|
||||
const newState = {
|
||||
...state,
|
||||
issueView: payload?.issueView || "list",
|
||||
};
|
||||
return {
|
||||
...state,
|
||||
...newState,
|
||||
};
|
||||
}
|
||||
case SET_GROUP_BY_PROPERTY: {
|
||||
const newState = {
|
||||
...state,
|
||||
groupByProperty: payload?.groupByProperty || null,
|
||||
};
|
||||
return {
|
||||
...state,
|
||||
...newState,
|
||||
};
|
||||
}
|
||||
case SET_ORDER_BY_PROPERTY: {
|
||||
const newState = {
|
||||
...state,
|
||||
orderBy: payload?.orderBy || null,
|
||||
};
|
||||
return {
|
||||
...state,
|
||||
...newState,
|
||||
};
|
||||
}
|
||||
case SET_FILTER_ISSUES: {
|
||||
const newState = {
|
||||
...state,
|
||||
filterIssue: payload?.filterIssue || null,
|
||||
};
|
||||
return {
|
||||
...state,
|
||||
...newState,
|
||||
};
|
||||
}
|
||||
case RESET_TO_DEFAULT: {
|
||||
return {
|
||||
...initialState,
|
||||
...payload,
|
||||
};
|
||||
}
|
||||
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
|
||||
await projectService.setProjectView(workspaceSlug, projectID, {
|
||||
view_props: state,
|
||||
});
|
||||
};
|
||||
|
||||
const setNewDefault = async (workspaceSlug: string, projectID: string, state: any) => {
|
||||
await projectService.setProjectView(workspaceSlug, projectID, {
|
||||
view_props: state,
|
||||
default_props: state,
|
||||
});
|
||||
};
|
||||
|
||||
export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
|
||||
const { data: myViewProps } = useSWR(
|
||||
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
|
||||
|
|
@ -161,122 +74,13 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
|
|||
|
||||
const toggleCollapsed = useCallback(() => {
|
||||
dispatch({
|
||||
type: TOGGLE_SIDEBAR,
|
||||
type: "TOGGLE_SIDEBAR",
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setIssueViewToKanban = useCallback(() => {
|
||||
dispatch({
|
||||
type: SET_ISSUE_VIEW,
|
||||
payload: {
|
||||
issueView: "kanban",
|
||||
},
|
||||
});
|
||||
dispatch({
|
||||
type: SET_GROUP_BY_PROPERTY,
|
||||
payload: {
|
||||
groupByProperty: "state_detail.name",
|
||||
},
|
||||
});
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
saveDataToServer(workspaceSlug as string, projectId as string, {
|
||||
...state,
|
||||
issueView: "kanban",
|
||||
groupByProperty: "state_detail.name",
|
||||
});
|
||||
}, [workspaceSlug, projectId, state]);
|
||||
|
||||
const setIssueViewToList = useCallback(() => {
|
||||
dispatch({
|
||||
type: SET_ISSUE_VIEW,
|
||||
payload: {
|
||||
issueView: "list",
|
||||
},
|
||||
});
|
||||
dispatch({
|
||||
type: SET_GROUP_BY_PROPERTY,
|
||||
payload: {
|
||||
groupByProperty: null,
|
||||
},
|
||||
});
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
saveDataToServer(workspaceSlug as string, projectId as string, {
|
||||
...state,
|
||||
issueView: "list",
|
||||
groupByProperty: null,
|
||||
});
|
||||
}, [workspaceSlug, projectId, state]);
|
||||
|
||||
const setGroupByProperty = useCallback(
|
||||
(property: NestedKeyOf<IIssue> | null) => {
|
||||
dispatch({
|
||||
type: SET_GROUP_BY_PROPERTY,
|
||||
payload: {
|
||||
groupByProperty: property,
|
||||
},
|
||||
});
|
||||
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
saveDataToServer(workspaceSlug as string, projectId as string, {
|
||||
...state,
|
||||
groupByProperty: property,
|
||||
});
|
||||
},
|
||||
[projectId, workspaceSlug, state]
|
||||
);
|
||||
|
||||
const setOrderBy = useCallback(
|
||||
(property: NestedKeyOf<IIssue> | null) => {
|
||||
dispatch({
|
||||
type: SET_ORDER_BY_PROPERTY,
|
||||
payload: {
|
||||
orderBy: property,
|
||||
},
|
||||
});
|
||||
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
saveDataToServer(workspaceSlug as string, projectId as string, state);
|
||||
},
|
||||
[projectId, workspaceSlug, state]
|
||||
);
|
||||
|
||||
const setFilterIssue = useCallback(
|
||||
(property: "activeIssue" | "backlogIssue" | null) => {
|
||||
dispatch({
|
||||
type: SET_FILTER_ISSUES,
|
||||
payload: {
|
||||
filterIssue: property,
|
||||
},
|
||||
});
|
||||
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
saveDataToServer(workspaceSlug as string, projectId as string, {
|
||||
...state,
|
||||
filterIssue: property,
|
||||
});
|
||||
},
|
||||
[projectId, workspaceSlug, state]
|
||||
);
|
||||
|
||||
const setNewDefaultView = useCallback(() => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
setNewDefault(workspaceSlug as string, projectId as string, state).then(() => {
|
||||
mutateMyViewProps();
|
||||
});
|
||||
}, [projectId, workspaceSlug, state, mutateMyViewProps]);
|
||||
|
||||
const resetToDefault = useCallback(() => {
|
||||
dispatch({
|
||||
type: RESET_TO_DEFAULT,
|
||||
payload: myViewProps?.default_props,
|
||||
});
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
|
||||
}, [projectId, workspaceSlug, myViewProps]);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({
|
||||
type: REHYDRATE_THEME,
|
||||
type: "REHYDRATE_THEME",
|
||||
payload: myViewProps?.view_props,
|
||||
});
|
||||
}, [myViewProps]);
|
||||
|
|
@ -286,17 +90,6 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
|
|||
value={{
|
||||
collapsed: state.collapsed,
|
||||
toggleCollapsed,
|
||||
issueView: state.issueView,
|
||||
groupByProperty: state.groupByProperty,
|
||||
setGroupByProperty,
|
||||
orderBy: state.orderBy,
|
||||
setOrderBy,
|
||||
filterIssue: state.filterIssue,
|
||||
setFilterIssue,
|
||||
resetFilterToDefault: resetToDefault,
|
||||
setNewFilterDefaultView: setNewDefaultView,
|
||||
setIssueViewToKanban,
|
||||
setIssueViewToList,
|
||||
}}
|
||||
>
|
||||
<ToastAlert />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue