feat: custom preset in sidebar

taskany-inc · Mar 27, 2024 · ffcc7fa · ffcc7fa
1 parent 2ddcdcb
commit ffcc7fa
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/PageNavigation/PageNavigation.i18n/en.json b/src/components/PageNavigation/PageNavigation.i18n/en.json
@@ -5,5 +5,6 @@
     "Goals": "Goals",
     "Projects": "Projects",
     "Starred": "Starred",
-    "Watching": "Watching"
+    "Watching": "Watching",
+    "Preset": "Preset"
 }
diff --git a/src/components/PageNavigation/PageNavigation.i18n/ru.json b/src/components/PageNavigation/PageNavigation.i18n/ru.json
@@ -5,5 +5,6 @@
     "Goals": "Цели",
     "Projects": "Проекты",
     "Starred": "Избранное",
-    "Watching": "Подписки"
+    "Watching": "Подписки",
+    "Preset": "Пресеты"
 }
diff --git a/src/components/PageNavigation/PageNavigation.tsx b/src/components/PageNavigation/PageNavigation.tsx
@@ -1,5 +1,6 @@
 import { FC, useMemo } from 'react';
 import { IconBellOutline } from '@taskany/icons';
+import { nullable } from '@taskany/bricks';
 import { useRouter } from 'next/router';
 
 import {
@@ -14,6 +15,7 @@ import {
 } from '../NavigationSidebar/NavigationSidebar';
 import { NavigationSidebarActionButton } from '../NavigationSidebarActionButton/NavigationSidebarActionButton';
 import { routes } from '../../hooks/router';
+import { refreshInterval } from '../../utils/config';
 import { trpc } from '../../utils/trpcClient';
 import { header, headerMenuExplore, headerMenuGoals } from '../../utils/domObjects';
 
@@ -29,9 +31,19 @@ export const PageNavigation: FC<AppNavigationProps> = ({ logo }) => {
 
     const { data: projects = [] } = trpc.project.getUserProjects.useQuery();
 
-    const [goalsRoutes, projectsRoutes] = useMemo(
-        () => [
-            [
+    const { data: presets = [] } = trpc.filter.getUserFilters.useQuery(undefined, {
+        keepPreviousData: true,
+        staleTime: refreshInterval,
+    });
+
+    const { goalsRoutes, presetRoutes, projectsRoutes, isPresetActive } = useMemo(() => {
+        const presetRoutes = presets.map((preset) => ({
+            title: preset.title,
+            href: routes.goals(preset.id),
+        }));
+
+        return {
+            goalsRoutes: [
                 {
                     title: tr('My goals'),
                     href: routes.index(),
@@ -51,7 +63,8 @@ export const PageNavigation: FC<AppNavigationProps> = ({ logo }) => {
                     attrs: headerMenuExplore.attr,
                 },
             ],
-            [
+            presetRoutes,
+            projectsRoutes: [
                 ...projects.map((p) => ({
                     title: p.title,
                     href: routes.project(p.id),
@@ -61,9 +74,9 @@ export const PageNavigation: FC<AppNavigationProps> = ({ logo }) => {
                     href: routes.exploreProjects(),
                 },
             ],
-        ],
-        [projects],
-    );
+            isPresetActive: presetRoutes.some((item) => item.href === nextRouter.asPath),
+        };
+    }, [projects, presets, nextRouter]);
 
     return (
         <NavigationSidebar {...header.attr}>
@@ -77,12 +90,22 @@ export const PageNavigation: FC<AppNavigationProps> = ({ logo }) => {
                 <Navigation>
                     <NavigationSection title={tr('Goals')}>
                         {goalsRoutes.map(({ title, href }) => (
-                            <NavigationItem key={href} selected={activeRoute === href} href={href}>
+                            <NavigationItem key={href} selected={!isPresetActive && activeRoute === href} href={href}>
                                 {title}
                             </NavigationItem>
                         ))}
                     </NavigationSection>
 
+                    {nullable(presetRoutes, () => (
+                        <NavigationSection title={tr('Preset')}>
+                            {presetRoutes.map(({ title, href }) => (
+                                <NavigationItem key={href} selected={nextRouter.asPath === href} href={href}>
+                                    {title}
+                                </NavigationItem>
+                            ))}
+                        </NavigationSection>
+                    ))}
+
                     <NavigationSection title={tr('Projects')}>
                         {projectsRoutes.map(({ title, href }) => (
                             <NavigationItem key={href} selected={activeRoute === href} href={href}>

diff --git a/src/components/PresetDropdown.tsx b/src/components/PresetDropdown.tsx
diff --git a/src/hooks/router.ts b/src/hooks/router.ts
@@ -10,7 +10,7 @@ export const routes = {
     projectSettings: (id: string) => `/projects/${id}/settings`,
     projectTeam: (id: string) => `/projects/${id}/team`,
 
-    goals: () => '/goals',
+    goals: (filter?: string) => `/goals${filter ? `?filter=${filter}` : ''}`,
     goalsStarred: () => '/goals/starred',
     goalsWatching: () => '/goals/watching',
     goal: (shortId: string) => `/goals/${shortId}`,

diff --git a/src/utils/declareSsrProps.ts b/src/utils/declareSsrProps.ts
@@ -51,6 +51,7 @@ export function declareSsrProps<T = ExternalPageProps>(
 
         await ssrHelpers.appConfig.get.fetch();
         await ssrHelpers.project.getUserProjects.fetch();
+        await ssrHelpers.filter.getUserFilters.fetch();
 
         const ssrTime = Date.now();
 

diff --git a/src/utils/filters.ts b/src/utils/filters.ts
@@ -48,7 +48,6 @@ export const filtersPanelSsrInit = async ({ query, ssrHelpers, req }: SSRProps)
             include: queryState.tag,
         }),
         ssrHelpers.state.all.fetch(),
-        ssrHelpers.filter.getUserFilters.fetch(),
     ]);
 
     return {

diff --git a/trpc/router/filter.ts b/trpc/router/filter.ts
@@ -68,7 +68,6 @@ export const filter = router({
                             },
                         },
                     },
-                    { mode: 'Global' },
                 ],
             },
             include: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,7 +68,6 @@ export const filter = router({ @@
                                 },
                             },
                         },
-                        { mode: 'Global' },
                     ],
                 },
                 include: {
@@ Expand Down @@