From ebaab23fb95abe755d889fe42964b094ff3dd201 Mon Sep 17 00:00:00 2001 From: troff8 Date: Wed, 28 Jun 2023 15:11:25 +0400 Subject: [PATCH] feat(PageTitlePreset): added component for page title with applied preset --- .../DashboardPage/DashboardPage.tsx | 34 +++++------- src/components/GoalsPage/GoalsPage.tsx | 34 +++++------- .../PageTitlePreset.i18n/en.json | 3 ++ .../PageTitlePreset.i18n/index.ts | 17 ++++++ .../PageTitlePreset.i18n/ru.json | 3 ++ .../PageTitlePreset/PageTitlePreset.tsx | 53 +++++++++++++++++++ src/components/ProjectPage/ProjectPage.tsx | 34 +++++------- 7 files changed, 112 insertions(+), 66 deletions(-) create mode 100644 src/components/PageTitlePreset/PageTitlePreset.i18n/en.json create mode 100644 src/components/PageTitlePreset/PageTitlePreset.i18n/index.ts create mode 100644 src/components/PageTitlePreset/PageTitlePreset.i18n/ru.json create mode 100644 src/components/PageTitlePreset/PageTitlePreset.tsx diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx index e6d7543e7..7ec01a4f0 100644 --- 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 = ; - const presetInfo = - user.activityId !== currentPreset?.activityId - ? `${tr('created by')} ${currentPreset?.activity?.user?.name}` - : undefined; - const presetTitle = ; - - 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 = ( - ); - // 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 index d4224f12a..d5e226633 100644 --- 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 = ; - const presetInfo = - user.activityId !== currentPreset?.activityId - ? `${tr('created by')} ${currentPreset?.activity?.user?.name}` - : undefined; - const presetTitle = ; - - 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 = ( - ); - // 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 new file mode 100644 index 000000000..2fdc0e936 --- /dev/null +++ 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 new file mode 100644 index 000000000..5c148475b --- /dev/null +++ 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 = {}; + +keyset['ru'] = ru; +keyset['en'] = en; + +export const tr = i18n(keyset, fmt, getLang); diff --git a/src/components/PageTitlePreset/PageTitlePreset.i18n/ru.json b/src/components/PageTitlePreset/PageTitlePreset.i18n/ru.json new file mode 100644 index 000000000..fa34ef0b9 --- /dev/null +++ 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 new file mode 100644 index 000000000..0da9657fb --- /dev/null +++ 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 = ({ + activityId, + currentPresetActivityId, + currentPresetActivityUserName, + currentPresetTitle, + shadowPresetActivityId, + shadowPresetActivityUserName, + shadowPresetId, + shadowPresetTitle, + title, + setPreset, +}) => { + const titleDefault = ; + const presetInfo = + activityId !== currentPresetActivityId ? `${tr('created by')} ${currentPresetActivityUserName}` : undefined; + const titlePreset = ; + + const shadowPresetInfo = + activityId !== shadowPresetActivityId ? `${tr('created by')} ${shadowPresetActivityUserName}` : undefined; + + const onShadowPresetTitleClick = useCallback(() => { + if (shadowPresetId) setPreset(shadowPresetId); + }, [setPreset, shadowPresetId]); + const titleShadow = ( + + ); + // 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 index b43f5cd7b..562faddec 100644 --- 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 = ; - const presetInfo = - user.activityId !== currentPreset?.activityId - ? `${tr('created by')} ${currentPreset?.activity?.user?.name}` - : undefined; - const presetTitle = ; - - 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 = ( - ); - // eslint-disable-next-line no-nested-ternary - const title = currentPreset ? presetTitle : shadowPreset ? shadowPresetTitle : defaultTitle; const description = currentPreset && currentPreset.description ? currentPreset.description : project.data?.description;