feat(i18n): remove some usage

checkmoney · May 11, 2020 · d54225d · d54225d
1 parent e8a020d
commit d54225d
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 86 deletions.
diff --git a/src/domain/i18n/index.ts b/src/domain/i18n/index.ts
@@ -4,4 +4,3 @@ export const { i18n, appWithTranslation } = Instance;
 
 export { Namespace } from './Namespace';
 export { pageWithTranslation } from './pageWithTranslation';
-export { useTranslation } from './useTranslation';
diff --git a/src/domain/i18n/useTranslation.ts b/src/domain/i18n/useTranslation.ts
diff --git a/src/features/app/features/now/tips/past-days-budget/PastDaysBudget.tsx b/src/features/app/features/now/tips/past-days-budget/PastDaysBudget.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { useTranslation } from '&front/domain/i18n';
 import { Card } from '&front/ui/components/layout/card';
 import { displayMoney } from '&shared/helpers/displayMoney';
+import { GroupBy } from '&shared/enum/GroupBy';
 import { TipModel } from '&shared/models/mind/TipModel';
 
 import { DismissButton } from '../components/dismiss-button';
@@ -12,19 +12,29 @@ interface Props {
   tip: TipModel<PastDaysBudgetMeta>;
 }
 
-export const PastDaysBudget = ({ tip: { token, meta } }: Props) => {
-  const { t } = useTranslation();
+const titles = {
+  [GroupBy.Month]: 'Прошлый месяц',
+  [GroupBy.Week]: 'Прошлая неделя',
+  [GroupBy.Day]: 'Вчера',
+  [GroupBy.Year]: 'Прошлый год',
+};
+const contents = {
+  [GroupBy.Month]: (amount: string) =>
+    `За прошлый месяц вы потратили ${amount}`,
+  [GroupBy.Week]: (amount: string) =>
+    `За прошлую неделю вы потратили ${amount}`,
+  [GroupBy.Day]: (amount: string) => `Вчера вы потратили ${amount}`,
+  [GroupBy.Year]: (amount: string) => `За прошлй год вы потратили ${amount}`,
+};
 
+export const PastDaysBudget = ({ tip: { token, meta } }: Props) => {
   const amount = displayMoney(meta.currency)(meta.outcome, {
     withPenny: false,
   });
 
   return (
-    <Card
-      title={t(`tips:past-days.title-${meta.group}`)}
-      extra={<DismissButton token={token} />}
-    >
-      {t(`tips:past-days.content-${meta.group}`, { amount })}
+    <Card title={titles[meta.group]} extra={<DismissButton token={token} />}>
+      {contents[meta.group](amount)}
     </Card>
   );
 };
diff --git a/src/features/history/History.tsx b/src/features/history/History.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { useMappedState } from 'redux-react-hook';
 
-import { useTranslation } from '&front/domain/i18n';
 import { getFirstTransactionDate } from '&front/domain/money/selectors/getFirstTransactionDate';
 import { translatedMonthTitle } from '&front/helpers/translatedMonthTitle';
 import { Container } from '&front/ui/components/layout/container';
@@ -18,15 +17,11 @@ import * as styles from './History.css';
 export const History = () => {
   const firstTransactionDate = useMappedState(getFirstTransactionDate);
   const { isClient } = useEnvironment();
-  const { t } = useTranslation();
 
-  const months = useMemo(
-    () => createMonths(t, firstTransactionDate, new Date()),
-    [firstTransactionDate, t],
-  );
-  const defaultMonthTitle = useMemo(() => translatedMonthTitle(t, new Date()), [
-    t,
+  const months = useMemo(() => createMonths(firstTransactionDate, new Date()), [
+    firstTransactionDate,
   ]);
+  const defaultMonthTitle = useMemo(() => translatedMonthTitle(new Date()), []);
 
   const { innerWidth } = useWindowSize();
   const isMobile = innerWidth && innerWidth < 768;

diff --git a/src/features/history/helpers/createMonths.ts b/src/features/history/helpers/createMonths.ts
@@ -3,18 +3,14 @@ import { startOfMonth, addMonths, endOfMonth } from 'date-fns';
 import { translatedMonthTitle } from '&front/helpers/translatedMonthTitle';
 import { wantUTC } from '&front/helpers/wantUTC';
 
-export const createMonths = (
-  t: (key: string) => string,
-  from: Date,
-  to: Date,
-) => {
+export const createMonths = (from: Date, to: Date) => {
   const groups = [];
 
   let now = wantUTC(startOfMonth)(from);
   while (now < to) {
     const next = wantUTC(startOfMonth)(wantUTC(addMonths)(now, 1));
     groups.push({
-      title: translatedMonthTitle(t, now),
+      title: translatedMonthTitle(now),
       from: now,
       to: wantUTC(endOfMonth)(now),
     });

diff --git a/src/features/statistics/Statistics.tsx b/src/features/statistics/Statistics.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { useMappedState } from 'redux-react-hook';
 
-import { useTranslation } from '&front/domain/i18n';
 import { getDefaultCurrency } from '&front/domain/user/selectors/getDefaultCurrency';
 import { Container } from '&front/ui/components/layout/container';
 import { PageHeader } from '&front/ui/components/layout/page-header';
@@ -21,7 +20,6 @@ const maxLength = 5;
 
 export const Statistics = () => {
   const currency = useMappedState(getDefaultCurrency);
-  const { t } = useTranslation();
 
   const renderContent = useCallback(
     (title: string, group: GroupBy.Month | GroupBy.Year) => (
@@ -53,14 +51,11 @@ export const Statistics = () => {
 
   return (
     <Container>
-      <PageHeader
-        title={t('common:nav.stats')}
-        onBack={() => pushRoute('/app')}
-      />
+      <PageHeader title="Статистика" onBack={() => pushRoute('/app')} />
 
       <Tabs>
-        {renderContent(t('stats:monthly'), GroupBy.Month)}
-        {renderContent(t('stats:yearly'), GroupBy.Year)}
+        {renderContent('Месяц', GroupBy.Month)}
+        {renderContent('Год', GroupBy.Year)}
       </Tabs>
     </Container>
   );

diff --git a/src/features/statistics/features/details/generic/features/components/next-prev.tsx b/src/features/statistics/features/details/generic/features/components/next-prev.tsx
@@ -1,33 +1,40 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from '&front/domain/i18n';
 import { Button, ButtonType } from '&front/ui/components/form/button';
 import { GroupBy } from '&shared/enum/GroupBy';
 
 interface Props {
-  group?: GroupBy;
+  group: GroupBy;
   previousPeriodNumber: number;
   setPreviousPeriodNumber: (t: (v: number) => number) => void;
 }
 
+const prevTitles = {
+  [GroupBy.Month]: 'Предыдущий месяц',
+  [GroupBy.Year]: 'Предыдущий год',
+  [GroupBy.Day]: 'Предыдущий день',
+  [GroupBy.Week]: 'Предыдущая неделя',
+};
+
 export const Prev = ({ group, setPreviousPeriodNumber }: Props) => {
   const back = useCallback(() => setPreviousPeriodNumber((v) => v + 1), [
     setPreviousPeriodNumber,
   ]);
 
-  const { t } = useTranslation();
-
-  if (!group) {
-    return null;
-  }
-
   return (
     <Button onClick={back} type={ButtonType.Text}>
-      {t(`stats:details.prev-${group}`)}
+      {prevTitles[group]}
     </Button>
   );
 };
 
+const nextTitles = {
+  [GroupBy.Year]: 'Следующий год',
+  [GroupBy.Month]: 'Следующий месяц',
+  [GroupBy.Day]: 'Следующий день',
+  [GroupBy.Week]: 'Следующая неделя',
+};
+
 export const Next = ({
   group,
   previousPeriodNumber,
@@ -37,15 +44,13 @@ export const Next = ({
     setPreviousPeriodNumber,
   ]);
 
-  const { t } = useTranslation();
-
-  if (!group || previousPeriodNumber <= 0) {
+  if (previousPeriodNumber <= 0) {
     return null;
   }
 
   return (
     <Button onClick={next} type={ButtonType.Text}>
-      {t(`stats:details.next-${group}`)}
+      {nextTitles[group]}
     </Button>
   );
 };
diff --git a/src/features/statistics/features/details/generic/features/period-chooser/PeriodChooser.tsx b/src/features/statistics/features/details/generic/features/period-chooser/PeriodChooser.tsx
@@ -1,7 +1,6 @@
 import { format } from 'date-fns';
 import React from 'react';
 
-import { useTranslation } from '&front/domain/i18n';
 import { translatedMonthTitle } from '&front/helpers/translatedMonthTitle';
 import { Card } from '&front/ui/components/layout/card';
 import { GroupBy } from '&shared/enum/GroupBy';
@@ -16,7 +15,7 @@ interface Props {
   setPreviousPeriodNumber: (t: (v: number) => number) => void;
   from: Date;
   to: Date;
-  group?: GroupBy;
+  group: GroupBy;
   detailType: string;
 }
 
@@ -27,13 +26,8 @@ export const PeriodChooser = ({
   previousPeriodNumber,
   detailType,
 }: Props) => {
-  const { t } = useTranslation();
-
-  const title = !group
-    ? t('stats:details.all-time')
-    : group === GroupBy.Year
-    ? format(from, 'YYYY')
-    : translatedMonthTitle(t, from);
+  const title =
+    group === GroupBy.Year ? format(from, 'YYYY') : translatedMonthTitle(from);
 
   const actionProps = {
     setPreviousPeriodNumber,

diff --git a/src/features/statistics/features/details/sources/Sources.tsx b/src/features/statistics/features/details/sources/Sources.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { useTranslation } from '&front/domain/i18n';
 import { GroupBy } from '&shared/enum/GroupBy';
 
 import { Detail } from '../generic';
@@ -10,12 +9,10 @@ interface Props {
 }
 
 export const Sources = ({ group }: Props) => {
-  const { t } = useTranslation();
-
   return (
     <Detail
       detailType="sources"
-      detailTitle={t('common:nav.sources')}
+      detailTitle="Источники дохода"
       group={group}
       dataPath="earnings"
     />

diff --git a/src/features/statistics/features/dynamics/Dynamics.tsx b/src/features/statistics/features/dynamics/Dynamics.tsx
@@ -8,7 +8,6 @@ import {
   selectGrow,
   selectGrowHasError,
 } from '&front/app/statistics/grow.selectors';
-import { useTranslation } from '&front/domain/i18n';
 import { useMemoMappedState } from '&front/domain/store/useMemoMappedState';
 import { translatedMonthTitle } from '&front/helpers/translatedMonthTitle';
 import { Stat } from '&front/ui/components/chart/stat';
@@ -23,8 +22,14 @@ interface Props {
   group: GroupBy.Month | GroupBy.Year;
 }
 
+const titles = {
+  [GroupBy.Month]: 'По сравнению со средним месяцем',
+  [GroupBy.Year]: 'По сравнению со средним годом',
+  [GroupBy.Day]: 'По сравнению со средним днем',
+  [GroupBy.Week]: 'По сравнению со средней неделей',
+};
+
 export const Dynamics = ({ className, group }: Props) => {
-  const { t } = useTranslation();
   const dispatch = useDispatch();
 
   const grow = useMemoMappedState(selectGrow(group), [group]);
@@ -36,29 +41,25 @@ export const Dynamics = ({ className, group }: Props) => {
 
   const period =
     group === GroupBy.Month
-      ? translatedMonthTitle(t, new Date())
+      ? translatedMonthTitle(new Date())
       : format(new Date(), 'YYYY');
 
   const errorState = error ? Option.of('Error') : Option.of<string>(null);
 
   // TODO: add info about calculation in tooltip
   return (
     <Card title={period} className={className}>
-      <p>{t(`stats:dynamics.compared-${group}`)}</p>
+      <p>{titles[group]}</p>
 
       <Loader
         skeleton
         expectedRows={2}
-        status={{ error: errorState, loading: !Boolean(grow) }}
+        status={{ error: errorState, loading: !grow }}
       >
         <div className={styles.diff}>
+          <Stat title="Доходы" value={grow && grow.earnings} suffix="%" />
           <Stat
-            title={t('history:incomes')}
-            value={grow && grow.earnings}
-            suffix="%"
-          />
-          <Stat
-            title={t('history:outcomes')}
+            title="Расходы"
             value={grow && grow.expenses}
             suffix="%"
             decreaseIsGood

diff --git a/src/features/statistics/features/monthly/Monthly.tsx b/src/features/statistics/features/monthly/Monthly.tsx
@@ -10,7 +10,6 @@ import {
   selectPeriods,
   selectPeriodsHasError,
 } from '&front/app/statistics/periods.selectors';
-import { useTranslation } from '&front/domain/i18n';
 import { getFirstTransactionDate } from '&front/domain/money/selectors/getFirstTransactionDate';
 import { useMemoMappedState } from '&front/domain/store/useMemoMappedState';
 import { translatedMonthTitle } from '&front/helpers/translatedMonthTitle';
@@ -31,7 +30,6 @@ interface Props {
 export const Monthly = ({ className, currency }: Props) => {
   const firstTransactionDate = useMappedState(getFirstTransactionDate);
   const isSmall = useMedia({ maxWidth: 768 });
-  const { t } = useTranslation();
   const dispatch = useDispatch();
 
   const [year, setYear] = useState(getYear(new Date()));
@@ -73,7 +71,7 @@ export const Monthly = ({ className, currency }: Props) => {
           <BarChart
             displayValue={displayMoney(currency)}
             dataSets={stats.get().map(({ period, earnings, expenses }) => ({
-              name: translatedMonthTitle(t, period.start, false),
+              name: translatedMonthTitle(period.start, false),
               data: {
                 income: {
                   label: 'Доходы',

diff --git a/src/helpers/translatedMonthTitle.ts b/src/helpers/translatedMonthTitle.ts
@@ -1,11 +1,8 @@
 import { format } from 'date-fns';
+import ru from 'date-fns/locale/ru';
 
-export const translatedMonthTitle = (
-  t: (key: string) => string,
-  date: Date,
-  withYear = true,
-) => {
-  const month = `${t(`months:${format(date, 'MM')}`)}`;
+export const translatedMonthTitle = (date: Date, withYear = true) => {
+  const month = format(date, 'MMM', { locale: ru });
 
   if (withYear) {
     return `${month} ${format(date, 'YYYY')}`;