thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: issues list flicker (#659)

Browse Source 
* fix: issues list flicker

* fix: useeffect dependencies
This commit is contained in:
Aaryan Khandelwal 2023-03-31 18:29:24 +05:30 committed by GitHub
parent 448d8c63f3
commit fae1534887
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/app/components/core/issues-view.tsx
View File

@ -29,22 +29,16 @@ import {
RectangleStackIcon, RectangleStackIcon,
TrashIcon, TrashIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { ExclamationIcon, getStateGroupIcon, TransferIcon } from "components/icons"; import { ExclamationIcon, TransferIcon } from "components/icons";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
// types // types
import { import { IIssue, IIssueFilterOptions, UserAuth } from "types";
CycleIssueResponse,
IIssue,
IIssueFilterOptions,
ModuleIssueResponse,
UserAuth,
} from "types";
// fetch-keys // fetch-keys
import { import {
CYCLE_ISSUES, CYCLE_DETAILS,
CYCLE_ISSUES_WITH_PARAMS, CYCLE_ISSUES_WITH_PARAMS,
MODULE_ISSUES, MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS, MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS, PROJECT_ISSUES_LIST_WITH_PARAMS,
STATE_LIST, STATE_LIST,
@ -266,8 +260,14 @@ export const IssuesView: React.FC<Props> = ({
sort_order: draggedItem.sort_order, sort_order: draggedItem.sort_order,
}) })
.then(() => { .then(() => {
if (cycleId) mutate(CYCLE_ISSUES(cycleId as string)); if (cycleId) {
if (moduleId) mutate(MODULE_ISSUES(moduleId as string)); mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
mutate(CYCLE_DETAILS(cycleId as string));
}
if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
}
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
}); });
} }
@ -322,13 +322,9 @@ export const IssuesView: React.FC<Props> = ({
const removeIssueFromCycle = useCallback( const removeIssueFromCycle = useCallback(
(bridgeId: string) => { (bridgeId: string) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId || !cycleId) return;
mutate<CycleIssueResponse[]>( mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
CYCLE_ISSUES(cycleId as string),
(prevData) => prevData?.filter((p) => p.id !== bridgeId),
false
);
issuesService issuesService
.removeIssueFromCycle( .removeIssueFromCycle(
@ -344,18 +340,14 @@ export const IssuesView: React.FC<Props> = ({
console.log(e); console.log(e);
}); });
}, },
[workspaceSlug, projectId, cycleId] [workspaceSlug, projectId, cycleId, params]
); );
const removeIssueFromModule = useCallback( const removeIssueFromModule = useCallback(
(bridgeId: string) => { (bridgeId: string) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId || !moduleId) return;
mutate<ModuleIssueResponse[]>( mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
MODULE_ISSUES(moduleId as string),
(prevData) => prevData?.filter((p) => p.id !== bridgeId),
false
);
modulesService modulesService
.removeIssueFromModule( .removeIssueFromModule(
@ -371,7 +363,7 @@ export const IssuesView: React.FC<Props> = ({
console.log(e); console.log(e);
}); });
}, },
[workspaceSlug, projectId, moduleId] [workspaceSlug, projectId, moduleId, params]
); );
const handleTrashBox = useCallback( const handleTrashBox = useCallback(

4
apps/app/hooks/use-issues-view.tsx
View File

@ -118,14 +118,14 @@ const useIssuesView = () => {
[key: string]: IIssue[]; [key: string]: IIssue[];
} }
| undefined = useMemo(() => { | undefined = useMemo(() => {
const issuesToGroup = cycleIssues ?? moduleIssues ?? projectIssues; const issuesToGroup = cycleId ? cycleIssues : moduleId ? moduleIssues : projectIssues;
if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup }; if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
if (groupByProperty === "state") if (groupByProperty === "state")
return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined; return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined;
return issuesToGroup; return issuesToGroup;
}, [projectIssues, cycleIssues, moduleIssues, groupByProperty]); }, [projectIssues, cycleIssues, moduleIssues, groupByProperty, cycleId, moduleId]);
const isEmpty = const isEmpty =
Object.values(groupedByIssues ?? {}).every((group) => group.length === 0) || Object.values(groupedByIssues ?? {}).every((group) => group.length === 0) ||