github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: sidebar collapsed hydration, changing list view type causing errors

Browse Source
This commit is contained in:
Dakshesh Jain 2022-12-20 19:37:58 +05:30
parent 7a771a38ac
commit f80f4b8c23
3 changed files with 56 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
apps/app/contexts/theme.context.tsx
View File

@ -44,12 +44,13 @@ type ContextType = {
groupByProperty: NestedKeyOf<IIssue> | null;
filterIssue: "activeIssue" | "backlogIssue" | null;
toggleCollapsed: () => void;
setIssueView: (display: "list" | "kanban") => 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;
@ -72,9 +73,12 @@ export const reducer: ReducerFunctionType = (state, action) => {
...state,
collapsed: !state.collapsed,
};
localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
return newState;
case REHYDRATE_THEME: {
return { ...initialState, ...payload };
let collapsed: any = localStorage.getItem("collapsed");
collapsed = collapsed ? JSON.parse(collapsed) : false;
return { ...initialState, ...payload, collapsed };
}
case SET_ISSUE_VIEW: {
const newState = {
@ -159,23 +163,47 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
});
}, []);
const setIssueView = useCallback(
(display: "list" | "kanban") => {
dispatch({
type: SET_ISSUE_VIEW,
payload: {
issueView: display,
},
});
const setIssueViewToKanban = useCallback(() => {
dispatch({
type: SET_ISSUE_VIEW,
payload: {
issueView: "kanban",
},
});
dispatch({
type: SET_GROUP_BY_PROPERTY,
payload: {
groupByProperty: "state_detail.name",
},
});
if (!activeWorkspace || !activeProject) return;
saveDataToServer(activeWorkspace.slug, activeProject.id, {
...state,
issueView: "kanban",
groupByProperty: "state_detail.name",
});
}, [activeWorkspace, activeProject, state]);
if (!activeWorkspace || !activeProject) return;
saveDataToServer(activeWorkspace.slug, activeProject.id, {
...state,
issueView: display,
});
},
[activeProject, activeWorkspace, state]
);
const setIssueViewToList = useCallback(() => {
dispatch({
type: SET_ISSUE_VIEW,
payload: {
issueView: "list",
},
});
dispatch({
type: SET_GROUP_BY_PROPERTY,
payload: {
groupByProperty: null,
},
});
if (!activeWorkspace || !activeProject) return;
saveDataToServer(activeWorkspace.slug, activeProject.id, {
...state,
issueView: "list",
groupByProperty: null,
});
}, [activeWorkspace, activeProject, state]);
const setGroupByProperty = useCallback(
(property: NestedKeyOf<IIssue> | null) => {
@ -259,7 +287,6 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
collapsed: state.collapsed,
toggleCollapsed,
issueView: state.issueView,
setIssueView,
groupByProperty: state.groupByProperty,
setGroupByProperty,
orderBy: state.orderBy,
@ -268,6 +295,8 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
setFilterIssue,
resetFilterToDefault: resetToDefault,
setNewFilterDefaultView: setNewDefaultView,
setIssueViewToKanban,
setIssueViewToList,
}}
>
<ToastAlert />

6
apps/app/lib/hooks/useIssuesFilter.tsx
View File

@ -10,7 +10,6 @@ import type { IIssue } from "types";
const useIssuesFilter = (projectIssues: IIssue[]) => {
const {
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
@ -19,6 +18,8 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
setFilterIssue,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueViewToKanban,
setIssueViewToList,
} = useTheme();
const { states } = useUser();
@ -90,7 +91,6 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
return {
groupedByIssues,
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
@ -99,6 +99,8 @@ const useIssuesFilter = (projectIssues: IIssue[]) => {
setFilterIssue,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueViewToKanban,
setIssueViewToList,
} as const;
};

13
apps/app/pages/projects/[projectId]/issues/index.tsx
View File

@ -134,7 +134,6 @@ const ProjectIssues: NextPage = () => {
const {
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
groupedByIssues,
@ -144,6 +143,8 @@ const ProjectIssues: NextPage = () => {
filterIssue,
resetFilterToDefault,
setNewFilterDefaultView,
setIssueViewToKanban,
setIssueViewToList,
} = useIssuesFilter(projectIssues?.results.filter((p) => p.parent === null) ?? []);
useEffect(() => {
@ -171,10 +172,7 @@ const ProjectIssues: NextPage = () => {
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
issueView === "list" ? "bg-gray-200" : ""
}`}
onClick={() => {
setIssueView("list");
setGroupByProperty(null);
}}
onClick={() => setIssueViewToList()}
>
<ListBulletIcon className="h-4 w-4" />
</button>
@ -183,10 +181,7 @@ const ProjectIssues: NextPage = () => {
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
issueView === "kanban" ? "bg-gray-200" : ""
}`}
onClick={() => {
setIssueView("kanban");
setGroupByProperty("state_detail.name");
}}
onClick={() => setIssueViewToKanban()}
>
<Squares2X2Icon className="h-4 w-4" />
</button>