From 9035b1fe8fb6cbf9360ebdde16bcd5802db98fd5 Mon Sep 17 00:00:00 2001 From: Anton Date: Fri, 12 Apr 2024 19:38:39 +0300 Subject: [PATCH] chore: remove projects from LS --- .../GoalCreateForm/GoalCreateForm.tsx | 43 ++++++++----------- src/components/GoalPage/GoalPage.tsx | 13 ------ src/components/GoalParentComboBox.tsx | 16 +++---- .../GoalParentDropdown/GoalParentDropdown.tsx | 19 ++++---- src/components/Page/Page.tsx | 10 ----- src/components/ProjectPage/ProjectPage.tsx | 19 -------- .../ProjectSettingsPage.tsx | 36 +--------------- src/hooks/useProjectResource.ts | 4 +- 8 files changed, 36 insertions(+), 124 deletions(-) diff --git a/src/components/GoalCreateForm/GoalCreateForm.tsx b/src/components/GoalCreateForm/GoalCreateForm.tsx index 431a289e2..c81dbf3f7 100644 --- 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 = ({ 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(goalCreateFormActionCache || 3); @@ -50,6 +50,15 @@ const GoalCreateForm: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ 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 index 8002d03cb..02e629cf3 100644 --- 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 index e0334fd19..f35b9e230 100644 --- 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 { 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 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 index d482eeddf..7ffd810a2 100644 --- 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( - () => (data && data?.length > 0 ? data : recentProjects), - [data, recentProjects], + const suggestions = useMemo( + () => (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 index 666038c11..d8d3bff7a 100644 --- 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 = ({ 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 index 62dc94e3d..f7789cbe3 100644 --- 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) => { setPreview(goal._shortId, goal); diff --git a/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx b/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx index 5c3daa26e..d98864b9b 100644 --- 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