feat(PageTitlePreset): added component for page title with applied pr…

…eset
taskany-inc · Jun 28, 2023 · ebaab23 · ebaab23
1 parent 87b6ca0
commit ebaab23
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 66 deletions.
diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
@@ -16,11 +16,11 @@ import { CommonHeader } from '../CommonHeader';
 import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
 import { GoalsGroup } from '../GoalsGroup';
 import { GoalsListContainer } from '../GoalListItem';
-import { PageTitle } from '../PageTitle';
 import { Nullish } from '../../types/void';
 import { trpc } from '../../utils/trpcClient';
 import { FilterById, GoalByIdReturnType, ProjectByIdReturnType } from '../../../trpc/inferredTypes';
 import { ProjectItemStandalone } from '../ProjectListItem';
+import { PageTitlePreset } from '../PageTitlePreset/PageTitlePreset';
 
 import { tr } from './DashboardPage.i18n';
 
@@ -154,30 +154,20 @@ export const DashboardPage = ({ user, ssrTime }: ExternalPageProps) => {
         [router],
     );
 
-    const defaultTitle = <PageTitle title={tr('Dashboard')} />;
-    const presetInfo =
-        user.activityId !== currentPreset?.activityId
-            ? `${tr('created by')} ${currentPreset?.activity?.user?.name}`
-            : undefined;
-    const presetTitle = <PageTitle title={tr('Dashboard')} subtitle={currentPreset?.title} info={presetInfo} />;
-
-    const onShadowPresetTitleClick = useCallback(() => {
-        if (shadowPreset) setPreset(shadowPreset.id);
-    }, [setPreset, shadowPreset]);
-    const shadowPresetInfo =
-        user.activityId !== shadowPreset?.activityId
-            ? `${tr('created by')} ${shadowPreset?.activity?.user?.name}`
-            : undefined;
-    const shadowPresetTitle = (
-        <PageTitle
+    const title = (
+        <PageTitlePreset
+            activityId={user.activityId}
+            currentPresetActivityId={currentPreset?.activityId}
+            currentPresetActivityUserName={currentPreset?.activity.user?.name}
+            currentPresetTitle={currentPreset?.title}
+            shadowPresetActivityId={shadowPreset?.activityId}
+            shadowPresetActivityUserName={shadowPreset?.activity.user?.name}
+            shadowPresetId={shadowPreset?.id}
+            shadowPresetTitle={shadowPreset?.title}
             title={tr('Dashboard')}
-            subtitle={shadowPreset?.title}
-            info={shadowPresetInfo}
-            onClick={onShadowPresetTitleClick}
+            setPreset={setPreset}
         />
     );
-    // eslint-disable-next-line no-nested-ternary
-    const title = currentPreset ? presetTitle : shadowPreset ? shadowPresetTitle : defaultTitle;
 
     const description =
         currentPreset && currentPreset.description

diff --git a/src/components/GoalsPage/GoalsPage.tsx b/src/components/GoalsPage/GoalsPage.tsx
@@ -16,9 +16,9 @@ import { Page, PageContent } from '../Page';
 import { CommonHeader } from '../CommonHeader';
 import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
 import { GoalListItem, GoalsListContainer } from '../GoalListItem';
-import { PageTitle } from '../PageTitle';
 import { LoadMoreButton } from '../LoadMoreButton/LoadMoreButton';
 import { Nullish } from '../../types/void';
+import { PageTitlePreset } from '../PageTitlePreset/PageTitlePreset';
 
 import { tr } from './GoalsPage.i18n';
 
@@ -149,30 +149,20 @@ export const GoalsPage = ({ user, ssrTime }: ExternalPageProps) => {
         [router],
     );
 
-    const defaultTitle = <PageTitle title={tr('Goals')} />;
-    const presetInfo =
-        user.activityId !== currentPreset?.activityId
-            ? `${tr('created by')} ${currentPreset?.activity?.user?.name}`
-            : undefined;
-    const presetTitle = <PageTitle title={tr('Goals')} subtitle={currentPreset?.title} info={presetInfo} />;
-
-    const onShadowPresetTitleClick = useCallback(() => {
-        if (shadowPreset) setPreset(shadowPreset.id);
-    }, [setPreset, shadowPreset]);
-    const shadowPresetInfo =
-        user.activityId !== shadowPreset?.activityId
-            ? `${tr('created by')} ${shadowPreset?.activity?.user?.name}`
-            : undefined;
-    const shadowPresetTitle = (
-        <PageTitle
+    const title = (
+        <PageTitlePreset
+            activityId={user.activityId}
+            currentPresetActivityId={currentPreset?.activityId}
+            currentPresetActivityUserName={currentPreset?.activity.user?.name}
+            currentPresetTitle={currentPreset?.title}
+            shadowPresetActivityId={shadowPreset?.activityId}
+            shadowPresetActivityUserName={shadowPreset?.activity.user?.name}
+            shadowPresetId={shadowPreset?.id}
+            shadowPresetTitle={shadowPreset?.title}
             title={tr('Goals')}
-            subtitle={shadowPreset?.title}
-            info={shadowPresetInfo}
-            onClick={onShadowPresetTitleClick}
+            setPreset={setPreset}
         />
     );
-    // eslint-disable-next-line no-nested-ternary
-    const title = currentPreset ? presetTitle : shadowPreset ? shadowPresetTitle : defaultTitle;
 
     const description =
         currentPreset && currentPreset.description

diff --git a/src/components/PageTitlePreset/PageTitlePreset.i18n/en.json b/src/components/PageTitlePreset/PageTitlePreset.i18n/en.json
@@ -0,0 +1,3 @@
+{
+    "created by": "created by"
+}
diff --git a/src/components/PageTitlePreset/PageTitlePreset.i18n/index.ts b/src/components/PageTitlePreset/PageTitlePreset.i18n/index.ts
@@ -0,0 +1,17 @@
+/* eslint-disable */
+// Do not edit, use generator to update
+import { i18n, fmt, I18nLangSet } from 'easy-typed-intl';
+import getLang from '../../../utils/getLang';
+
+import ru from './ru.json';
+import en from './en.json';
+
+export type I18nKey = keyof typeof ru & keyof typeof en;
+type I18nLang = 'ru' | 'en';
+
+const keyset: I18nLangSet<I18nKey> = {};
+
+keyset['ru'] = ru;
+keyset['en'] = en;
+
+export const tr = i18n<I18nLang, I18nKey>(keyset, fmt, getLang);
diff --git a/src/components/PageTitlePreset/PageTitlePreset.i18n/ru.json b/src/components/PageTitlePreset/PageTitlePreset.i18n/ru.json
@@ -0,0 +1,3 @@
+{
+    "created by": "автор"
+}
diff --git a/src/components/PageTitlePreset/PageTitlePreset.tsx b/src/components/PageTitlePreset/PageTitlePreset.tsx
@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+
+import { PageTitle } from '../PageTitle';
+
+import { tr } from './PageTitlePreset.i18n';
+
+interface PageTitlePresetProps {
+    activityId: string;
+    currentPresetActivityId?: string;
+    currentPresetActivityUserName?: string | null;
+    currentPresetTitle?: string;
+    shadowPresetActivityId?: string;
+    shadowPresetActivityUserName?: string | null;
+    shadowPresetId?: string;
+    shadowPresetTitle?: string;
+    title?: string;
+    setPreset: (id: string) => void;
+}
+
+export const PageTitlePreset: React.FC<PageTitlePresetProps> = ({
+    activityId,
+    currentPresetActivityId,
+    currentPresetActivityUserName,
+    currentPresetTitle,
+    shadowPresetActivityId,
+    shadowPresetActivityUserName,
+    shadowPresetId,
+    shadowPresetTitle,
+    title,
+    setPreset,
+}) => {
+    const titleDefault = <PageTitle title={title} />;
+    const presetInfo =
+        activityId !== currentPresetActivityId ? `${tr('created by')} ${currentPresetActivityUserName}` : undefined;
+    const titlePreset = <PageTitle title={title} subtitle={currentPresetTitle} info={presetInfo} />;
+
+    const shadowPresetInfo =
+        activityId !== shadowPresetActivityId ? `${tr('created by')} ${shadowPresetActivityUserName}` : undefined;
+
+    const onShadowPresetTitleClick = useCallback(() => {
+        if (shadowPresetId) setPreset(shadowPresetId);
+    }, [setPreset, shadowPresetId]);
+    const titleShadow = (
+        <PageTitle
+            title={title}
+            subtitle={shadowPresetTitle}
+            info={shadowPresetInfo}
+            onClick={onShadowPresetTitleClick}
+        />
+    );
+    // eslint-disable-next-line no-nested-ternary
+    return currentPresetTitle ? titlePreset : shadowPresetTitle ? titleShadow : titleDefault;
+};
diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -14,12 +14,12 @@ import { useFilterResource } from '../../hooks/useFilterResource';
 import { useWillUnmount } from '../../hooks/useWillUnmount';
 import { ProjectPageLayout } from '../ProjectPageLayout/ProjectPageLayout';
 import { Page, PageContent } from '../Page';
-import { PageTitle } from '../PageTitle';
 import { createFilterKeys } from '../../utils/hotkeys';
 import { Nullish } from '../../types/void';
 import { trpc } from '../../utils/trpcClient';
 import { FilterById, GoalByIdReturnType } from '../../../trpc/inferredTypes';
 import { ProjectListItemConnected } from '../ProjectListItemConnected';
+import { PageTitlePreset } from '../PageTitlePreset/PageTitlePreset';
 
 import { tr } from './ProjectPage.i18n';
 
@@ -155,30 +155,20 @@ export const ProjectPage = ({ user, ssrTime, params: { id } }: ExternalPageProps
         })
         .join('');
 
-    const defaultTitle = <PageTitle title={project.data?.title} />;
-    const presetInfo =
-        user.activityId !== currentPreset?.activityId
-            ? `${tr('created by')} ${currentPreset?.activity?.user?.name}`
-            : undefined;
-    const presetTitle = <PageTitle title={project.data?.title} subtitle={currentPreset?.title} info={presetInfo} />;
-
-    const onShadowPresetTitleClick = useCallback(() => {
-        if (shadowPreset) setPreset(shadowPreset.id);
-    }, [setPreset, shadowPreset]);
-    const shadowPresetInfo =
-        user.activityId !== shadowPreset?.activityId
-            ? `${tr('created by')} ${shadowPreset?.activity?.user?.name}`
-            : undefined;
-    const shadowPresetTitle = (
-        <PageTitle
+    const title = (
+        <PageTitlePreset
+            activityId={user.activityId}
+            currentPresetActivityId={currentPreset?.activityId}
+            currentPresetActivityUserName={currentPreset?.activity.user?.name}
+            currentPresetTitle={currentPreset?.title}
+            shadowPresetActivityId={shadowPreset?.activityId}
+            shadowPresetActivityUserName={shadowPreset?.activity.user?.name}
+            shadowPresetId={shadowPreset?.id}
+            shadowPresetTitle={shadowPreset?.title}
             title={project.data?.title}
-            subtitle={shadowPreset?.title}
-            info={shadowPresetInfo}
-            onClick={onShadowPresetTitleClick}
+            setPreset={setPreset}
         />
     );
-    // eslint-disable-next-line no-nested-ternary
-    const title = currentPreset ? presetTitle : shadowPreset ? shadowPresetTitle : defaultTitle;
     const description =
         currentPreset && currentPreset.description ? currentPreset.description : project.data?.description;