chore: remove projects from LS

taskany-inc · Apr 17, 2024 · 9035b1f · 9035b1f
1 parent f84893c
commit 9035b1f
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 124 deletions.
diff --git a/src/components/GoalCreateForm/GoalCreateForm.tsx b/src/components/GoalCreateForm/GoalCreateForm.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { IconUpSmallSolid, IconDownSmallSolid } from '@taskany/icons';
 import { Button, Text } from '@taskany/bricks/harmony';
 import { KeyCode, useKeyboard } from '@taskany/bricks';
+import { useRouter as useNextRouter } from 'next/router';
 
 import { useRouter } from '../../hooks/router';
 import { usePageContext } from '../../hooks/usePageContext';
@@ -33,14 +34,13 @@ interface GoalCreateFormProps {
     personal?: boolean;
 }
 
-const preconditionErrorCode = 412;
-
 const GoalCreateForm: React.FC<GoalCreateFormProps> = ({ title, onGoalCreate, personal }) => {
     const router = useRouter();
+    const {
+        asPath,
+        query: { id },
+    } = useNextRouter();
     const { user } = usePageContext();
-    const [lastProjectCache, setLastProjectCache] = useLocalStorage('lastProjectCache');
-    const [currentProjectCache] = useLocalStorage('currentProjectCache');
-    const [recentProjectsCache, setRecentProjectsCache] = useLocalStorage('recentProjectsCache', {});
     const [goalCreateFormActionCache, setGoalCreateFormActionCache] = useLocalStorage('goalCreateFormAction');
     const [busy, setBusy] = useState(false);
     const [createGoalType, setСreateGoalType] = useState<number>(goalCreateFormActionCache || 3);
@@ -50,6 +50,15 @@ const GoalCreateForm: React.FC<GoalCreateFormProps> = ({ title, onGoalCreate, pe
     const defaultPriority = useMemo(() => priorities?.filter((priority) => priority.default)[0], [priorities]);
     const [isOpen, setIsOpen] = useState(false);
 
+    const { data: project } = trpc.project.getById.useQuery(
+        {
+            id: id as string,
+        },
+        {
+            enabled: Boolean(asPath.includes('/projects/') && id),
+        },
+    );
+
     const createOptions = [
         {
             id: '1',
@@ -93,17 +102,7 @@ const GoalCreateForm: React.FC<GoalCreateFormProps> = ({ title, onGoalCreate, pe
                           .join(''),
                   }
                 : undefined,
-        ).catch((error: any) => {
-            if (error.data.httpStatus === preconditionErrorCode) {
-                if (form.parent) {
-                    const nextRecentProjectsCache = { ...recentProjectsCache };
-
-                    delete nextRecentProjectsCache[form.parent.id];
-
-                    setRecentProjectsCache(nextRecentProjectsCache);
-                }
-            }
-        });
+        );
 
         setBusy(false);
 
@@ -114,17 +113,9 @@ const GoalCreateForm: React.FC<GoalCreateFormProps> = ({ title, onGoalCreate, pe
         utils.project.getAll.invalidate();
         utils.goal.getBatch.invalidate();
         utils.project.getUserProjectsWithGoals.invalidate();
+        utils.project.getUserProjects.invalidate();
 
         if (form.parent) {
-            const newRecentProjectsCache = { ...recentProjectsCache };
-            newRecentProjectsCache[form.parent.id] = {
-                rate: Date.now(),
-                cache: form.parent,
-            };
-
-            setRecentProjectsCache(newRecentProjectsCache);
-            setLastProjectCache(form.parent);
-
             utils.project.getDeepInfo.invalidate({ id: form.parent.id });
         }
 
@@ -160,7 +151,7 @@ const GoalCreateForm: React.FC<GoalCreateFormProps> = ({ title, onGoalCreate, pe
             busy={busy}
             validitySchema={goalCommonSchema}
             owner={{ id: user?.activityId, user } as ActivityByIdReturnType}
-            parent={currentProjectCache || lastProjectCache || undefined}
+            parent={project ?? undefined}
             personal={personal}
             priority={defaultPriority ?? undefined}
             onSubmit={createGoal}

diff --git a/src/components/GoalPage/GoalPage.tsx b/src/components/GoalPage/GoalPage.tsx
@@ -9,8 +9,6 @@ import { Page } from '../Page/Page';
 import { PageActions } from '../PageActions/PageActions';
 import { PageSep } from '../PageSep/PageSep';
 import { IssueKey } from '../IssueKey/IssueKey';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
-import { useWillUnmount } from '../../hooks/useWillUnmount';
 import { WatchButton } from '../WatchButton/WatchButton';
 import { useGoalResource } from '../../hooks/useGoalResource';
 import { useRouter } from '../../hooks/router';
@@ -39,17 +37,6 @@ export const GoalPage = ({ user, ssrTime, params: { id } }: ExternalPageProps<{
 
     useFMPMetric(!!goal);
 
-    const { project } = goal || {};
-
-    const [, setCurrentProjectCache] = useLocalStorage('currentProjectCache', null);
-    useEffect(() => {
-        project && !project.personal && setCurrentProjectCache(project);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useWillUnmount(() => {
-        setCurrentProjectCache(null);
-    });
-
     const { onGoalStateChange, onGoalWatchingToggle, onGoalStarToggle, invalidate } = useGoalResource(
         { id: goal?.id },
         { invalidate: { getById: id } },

diff --git a/src/components/GoalParentComboBox.tsx b/src/components/GoalParentComboBox.tsx
@@ -2,7 +2,6 @@ import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'r
 import { ComboBox, ListView, ListViewItem, nullable } from '@taskany/bricks';
 import { Button, FormControl, FormControlError, FormControlInput, MenuItem } from '@taskany/bricks/harmony';
 
-import { useLocalStorage } from '../hooks/useLocalStorage';
 import { trpc } from '../utils/trpcClient';
 import { projectsCombobox, comboboxInput, combobox, comboboxErrorDot } from '../utils/domObjects';
 
@@ -38,7 +37,10 @@ export const GoalParentComboBox = React.forwardRef<HTMLDivElement, GoalParentCom
     ) => {
         const [completionVisible, setCompletionVisibility] = useState(false);
         const [inputState, setInputState] = useState(value?.title || query);
-        const [recentProjectsCache] = useLocalStorage('recentProjectsCache', {});
+
+        const { data: userProjects = [] } = trpc.project.getUserProjects.useQuery(undefined, {
+            keepPreviousData: true,
+        });
 
         useEffect(() => {
             setInputState(value?.title || query);
@@ -55,12 +57,10 @@ export const GoalParentComboBox = React.forwardRef<HTMLDivElement, GoalParentCom
             },
         );
 
-        const recentProjects = Object.values(recentProjectsCache)
-            .sort((a, b) => b.rate - a.rate)
-            .slice(0, 10) // top 10
-            .map((p) => p.cache);
-
-        const items = useMemo(() => (data && data?.length > 0 ? data : recentProjects), [data, recentProjects]);
+        const items = useMemo(
+            () => (data && data?.length > 0 ? data : userProjects.slice(0, 10)),
+            [data, userProjects],
+        );
 
         const onClickOutside = useCallback((cb: () => void) => {
             cb();

diff --git a/src/components/GoalParentDropdown/GoalParentDropdown.tsx b/src/components/GoalParentDropdown/GoalParentDropdown.tsx
@@ -3,7 +3,6 @@ import { useState, useEffect, useMemo, ComponentProps, useCallback } from 'react
 import { nullable } from '@taskany/bricks';
 import { IconAddOutline } from '@taskany/icons';
 
-import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { trpc } from '../../utils/trpcClient';
 import { Dropdown, DropdownTrigger, DropdownPanel, DropdownGuardedProps } from '../Dropdown/Dropdown';
 import { ModalEvent, dispatchModalEvent } from '../../utils/dispatchModal';
@@ -40,7 +39,10 @@ export const GoalParentDropdown = ({
     ...props
 }: GoalParentDropdownProps) => {
     const [inputState, setInputState] = useState(query);
-    const [recentProjectsCache] = useLocalStorage('recentProjectsCache', {});
+
+    const { data: userProjects = [] } = trpc.project.getUserProjects.useQuery(undefined, {
+        keepPreviousData: true,
+    });
 
     useEffect(() => {
         setInputState(query);
@@ -57,14 +59,9 @@ export const GoalParentDropdown = ({
         },
     );
 
-    const recentProjects = Object.values(recentProjectsCache)
-        .sort((a, b) => b.rate - a.rate)
-        .slice(0, 10) // top 10
-        .map((p) => p.cache);
-
-    const suggestions = useMemo<typeof recentProjects | typeof data>(
-        () => (data && data?.length > 0 ? data : recentProjects),
-        [data, recentProjects],
+    const suggestions = useMemo<GoalParentValue[]>(
+        () => (data && data?.length > 0 ? data : userProjects.slice(0, 10)),
+        [data, userProjects],
     );
 
     const values = useMemo(() => {
@@ -84,7 +81,7 @@ export const GoalParentDropdown = ({
             return suggestions;
         }
 
-        return suggestions?.filter((suggest) => !valuesMap[suggest.id]);
+        return suggestions.filter((suggestion) => !valuesMap[suggestion.id]);
     }, [mode, suggestions, valuesMap]);
 
     const handleCreateProject = useCallback(() => {

diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
@@ -18,7 +18,6 @@ import { ModalContext } from '../ModalOnEvent';
 import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
 import { PageNavigation } from '../PageNavigation/PageNavigation';
 import { pageContent } from '../../utils/domObjects';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
 
 import s from './Page.module.css';
 
@@ -63,15 +62,6 @@ export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', c
 
     const router = useRouter();
 
-    const [_, setCurrentProject] = useLocalStorage('currentProjectCache');
-    useEffect(() => {
-        const { asPath } = router;
-
-        if (!asPath.includes('/projects/')) {
-            setCurrentProject(null);
-        }
-    }, [router, setCurrentProject]);
-
     useHotkeys();
 
     const { resolvedTheme } = useTheme();

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -9,8 +9,6 @@ import { refreshInterval } from '../../utils/config';
 import { routes } from '../../hooks/router';
 import { ExternalPageProps } from '../../utils/declareSsrProps';
 import { useUrlFilterParams } from '../../hooks/useUrlFilterParams';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
-import { useWillUnmount } from '../../hooks/useWillUnmount';
 import { trpc } from '../../utils/trpcClient';
 import { useFiltersPreset } from '../../hooks/useFiltersPreset';
 import { ProjectListItemConnected } from '../ProjectListItemConnected';
@@ -26,8 +24,6 @@ import s from './ProjectPage.module.css';
 export const projectsSize = 20;
 
 export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallback }: ExternalPageProps) => {
-    const [, setCurrentProjectCache] = useLocalStorage('currentProjectCache', null);
-
     const utils = trpc.useContext();
 
     const { preset } = useFiltersPreset({ defaultPresetFallback });
@@ -74,21 +70,6 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
         };
     }, [on, utils.project.getDeepInfo, utils.project.getById]);
 
-    useEffect(() => {
-        if (!project || project.personal) return;
-
-        setCurrentProjectCache({
-            id: project.id,
-            title: project.title,
-            description: project.description ?? undefined,
-            flowId: project.flowId,
-        });
-    }, [project, setCurrentProjectCache]);
-
-    useWillUnmount(() => {
-        setCurrentProjectCache(null);
-    });
-
     const handleItemEnter = useCallback(
         (goal: NonNullable<GoalByIdReturnType>) => {
             setPreview(goal._shortId, goal);

diff --git a/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx b/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -33,7 +33,6 @@ import { dispatchModalEvent, ModalEvent } from '../../utils/dispatchModal';
 import { Page } from '../Page/Page';
 import { useProjectResource } from '../../hooks/useProjectResource';
 import { errorsProvider } from '../../utils/forms';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { UserComboBox } from '../UserComboBox';
 import { trpc } from '../../utils/trpcClient';
 import { ProjectUpdate, projectUpdateSchema } from '../../schema/project';
@@ -74,10 +73,6 @@ const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
 
 export const ProjectSettingsPage = ({ user, ssrTime, params: { id } }: ExternalPageProps) => {
     const router = useRouter();
-    const [lastProjectCache, setLastProjectCache] = useLocalStorage('lastProjectCache');
-    const [currentProjectCache, setCurrentProjectCache] = useLocalStorage('currentProjectCache');
-    const [recentProjectsCache, setRecentProjectsCache] = useLocalStorage('recentProjectsCache', {});
-
     const project = trpc.project.getById.useQuery({ id });
 
     const { updateProject, deleteProject, transferOwnership } = useProjectResource(id);
@@ -133,35 +128,6 @@ export const ProjectSettingsPage = ({ user, ssrTime, params: { id } }: ExternalP
         dispatchModalEvent(ModalEvent.ProjectTransferModal)();
     }, []);
 
-    const onProjectDelete = useCallback(() => {
-        if (!project.data) return;
-
-        const newRecentProjectsCache = { ...recentProjectsCache };
-        if (recentProjectsCache[project.data.id]) {
-            delete newRecentProjectsCache[project.data.id];
-            setRecentProjectsCache(newRecentProjectsCache);
-        }
-
-        if (currentProjectCache?.id === project.data.id) {
-            setCurrentProjectCache(null);
-        }
-
-        if (lastProjectCache?.id === project.data.id) {
-            setLastProjectCache(null);
-        }
-
-        router.exploreProjects();
-    }, [
-        router,
-        project.data,
-        recentProjectsCache,
-        currentProjectCache,
-        lastProjectCache,
-        setRecentProjectsCache,
-        setCurrentProjectCache,
-        setLastProjectCache,
-    ]);
-
     const handleDeleteProjectBtnClick = useCallback(() => {
         if (project.data?.children.length) {
             dispatchModalEvent(ModalEvent.ProjectCannotDeleteModal)();
@@ -423,7 +389,7 @@ export const ProjectSettingsPage = ({ user, ssrTime, params: { id } }: ExternalP
                                 <Button
                                     view="warning"
                                     disabled={keyConfirmation !== project.data.id}
-                                    onClick={deleteProject(onProjectDelete)}
+                                    onClick={deleteProject()}
                                     text={tr('Yes, delete it')}
                                     {...projectSettingsConfirmDeleteProjectButton.attr}
                                 />

diff --git a/src/hooks/useProjectResource.ts b/src/hooks/useProjectResource.ts
@@ -53,12 +53,12 @@ export const useProjectResource = (id: string) => {
     );
 
     const deleteProject = useCallback(
-        (cb: Callback) => async () => {
+        (cb?: Callback) => async () => {
             const promise = deleteMutation.mutateAsync({ id });
 
             const [res] = await notifyPromise(promise, 'projectDelete');
 
-            res && cb();
+            res && cb?.();
         },
         [id, deleteMutation],
     );