feat(i18n): translate stats details page

front/pages/internal/categories.tsx

@@ -8,12 +8,13 @@ import { GroupBy } from '@shared/enum/GroupBy'
 import { createRangeForGroup } from '@front/helpers/createRangeForGroup'
 import { getFirstTransactionDate } from '@front/domain/money/selectors/getFirstTransactionDate'
 import { Categories } from '@front/features/statistics/features/details/categories'
+import { pageWithTranslation, Namespace } from '@front/domain/i18n'
 
 interface Query {
   group?: GroupBy
 }
 
-export default class CateogiesPage extends React.Component<Query> {
+class CateogiesPage extends React.Component<Query> {
   public static isSecure = true
 
   public static async getInitialProps({
@@ -45,3 +46,7 @@ export default class CateogiesPage extends React.Component<Query> {
     return <Categories group={group} />
   }
 }
+
+export default pageWithTranslation([Namespace.Stats, Namespace.Months])(
+  CateogiesPage,
+)

front/pages/internal/sources.tsx

@@ -8,12 +8,13 @@ import { createRangeForGroup } from '@front/helpers/createRangeForGroup'
 import { getFirstTransactionDate } from '@front/domain/money/selectors/getFirstTransactionDate'
 import { Sources } from '@front/features/statistics/features/details/sources'
 import { fetchStatsSources } from '@front/domain/money/actions/fetchStatsSources'
+import { pageWithTranslation, Namespace } from '@front/domain/i18n'
 
 interface Query {
   group?: GroupBy
 }
 
-export default class SourcesPage extends React.Component<Query> {
+class SourcesPage extends React.Component<Query> {
   public static isSecure = true
 
   public static async getInitialProps({
@@ -45,3 +46,7 @@ export default class SourcesPage extends React.Component<Query> {
     return <Sources group={group} />
   }
 }
+
+export default pageWithTranslation([Namespace.Stats, Namespace.Months])(
+  SourcesPage,
+)

front/src/domain/i18n/pageWithTranslation.tsx

@@ -27,7 +27,7 @@ export const pageWithTranslation = (namespaces: Namespace | Namespace[]) => (
     public render() {
       return (
         <I18nProvider namespaces={namespacesRequired}>
-          <Page />
+          <Page {...this.props} />
         </I18nProvider>
       )
     }

front/src/features/statistics/features/details/categories/Categories.tsx

@@ -1,6 +1,7 @@
 import { GroupBy } from '@shared/enum/GroupBy'
 import { getStatsCategories } from '@front/domain/money/selectors/getStatsCategories'
 import { fetchStatsCategories } from '@front/domain/money/actions/fetchStatsCategories'
+import { useTranslation } from '@front/domain/i18n'
 
 import { Detail } from '../generic'
 
@@ -9,9 +10,12 @@ interface Props {
 }
 
 export const Categories = ({ group }: Props) => {
+  const { t } = useTranslation()
+
   return (
     <Detail
       detailType="categories"
+      detailTitle={t('common:nav.categories')}
       fetchData={fetchStatsCategories}
       getData={getStatsCategories}
       toAmount={({ outcome }) => outcome}

front/src/features/statistics/features/details/generic/Detail.tsx

@@ -4,7 +4,7 @@ import { Option } from 'tsoption'
 import useMedia from 'use-media'
 import { useMappedState } from 'redux-react-hook'
 import { useState, useMemo } from 'react'
-import { sortBy, capitalize } from 'lodash'
+import { sortBy } from 'lodash'
 
 import { GroupBy } from '@shared/enum/GroupBy'
 import { Container } from '@front/ui/components/layout/container'
@@ -22,7 +22,6 @@ import { Api } from '@front/domain/api'
 import { PeriodChooser } from './features/period-chooser'
 import { useDateRange } from './helpers/useDateRange'
 import * as styles from './Detail.css'
-import { GroupChooser } from './features/group-chooser'
 
 interface Data {
   name: string
@@ -32,6 +31,7 @@ interface Data {
 interface Props<T> {
   group?: GroupBy
   detailType: string
+  detailTitle: string
   fetchData: (
     from: Date,
     to: Date,
@@ -53,6 +53,7 @@ interface Props<T> {
 export const Detail = <T extends object = any>({
   group,
   detailType,
+  detailTitle,
   fetchData,
   getData,
   toAmount,
@@ -79,24 +80,18 @@ export const Detail = <T extends object = any>({
 
   return (
     <Container>
-      <PageHeader
-        title={capitalize(detailType)}
-        onBack={() => pushRoute('/app/stats')}
-      />
+      <PageHeader title={detailTitle} onBack={() => pushRoute('/app/stats')} />
 
       <section className={styles.categories}>
         <aside className={styles.aside}>
-          <GroupChooser group={group} detailType={detailType} />
-          {group && (
-            <PeriodChooser
-              setPreviousPeriodNumber={setPreviousPeriodNumber}
-              previousPeriodNumber={previousPeriodNumber}
-              detailType={detailType}
-              from={from}
-              to={to}
-              group={group}
-            />
-          )}
+          <PeriodChooser
+            setPreviousPeriodNumber={setPreviousPeriodNumber}
+            previousPeriodNumber={previousPeriodNumber}
+            detailType={detailType}
+            from={from}
+            to={to}
+            group={group}
+          />
         </aside>
 
         <div className={styles.chart}>

front/src/features/statistics/features/details/generic/features/components/next-prev.tsx

@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+import { GroupBy } from '@shared/enum/GroupBy'
+import { Button, ButtonType } from '@front/ui/components/form/button'
+import { useTranslation } from '@front/domain/i18n'
+
+interface Props {
+  group?: GroupBy
+  previousPeriodNumber: number
+  setPreviousPeriodNumber: (t: (v: number) => number) => void
+}
+
+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}`)}
+    </Button>
+  )
+}
+
+export const Next = ({
+  group,
+  previousPeriodNumber,
+  setPreviousPeriodNumber,
+}: Props) => {
+  const next = useCallback(() => setPreviousPeriodNumber(v => v - 1), [
+    setPreviousPeriodNumber,
+  ])
+
+  const { t } = useTranslation()
+
+  if (!group || previousPeriodNumber <= 0) {
+    return null
+  }
+
+  return (
+    <Button onClick={next} type={ButtonType.Text}>
+      {t(`stats:details.next-${group}`)}
+    </Button>
+  )
+}

front/src/features/statistics/features/details/generic/features/components/show-month.tsx

@@ -0,0 +1,23 @@
+import { Button, ButtonType } from '@front/ui/components/form/button'
+import { pushRoute } from '@front/features/routing'
+import { GroupBy } from '@shared/enum/GroupBy'
+import { useTranslation } from '@front/domain/i18n'
+
+interface Props {
+  group?: GroupBy
+  detailType: string
+}
+
+export const ShowMonth = ({ group, detailType }: Props) => {
+  const showMonth = !group || group !== GroupBy.Month
+  const { t } = useTranslation()
+
+  return showMonth ? (
+    <Button
+      onClick={() => pushRoute(`/app/stats/${detailType}/month`)}
+      type={ButtonType.Secondary}
+    >
+      {t('stats:details.show-month')}
+    </Button>
+  ) : null
+}

front/src/features/statistics/features/details/generic/features/components/show-whole.tsx

@@ -0,0 +1,23 @@
+import { Button, ButtonType } from '@front/ui/components/form/button'
+import { pushRoute } from '@front/features/routing'
+import { GroupBy } from '@shared/enum/GroupBy'
+import { useTranslation } from '@front/domain/i18n'
+
+interface Props {
+  group?: GroupBy
+  detailType: string
+}
+
+export const ShowWhole = ({ group, detailType }: Props) => {
+  const showWhole = !!group
+  const { t } = useTranslation()
+
+  return showWhole ? (
+    <Button
+      onClick={() => pushRoute(`/app/stats/${detailType}`)}
+      type={ButtonType.Secondary}
+    >
+      {t('stats:details.show-whole')}
+    </Button>
+  ) : null
+}

front/src/features/statistics/features/details/generic/features/components/show-year.tsx

@@ -0,0 +1,23 @@
+import { Button, ButtonType } from '@front/ui/components/form/button'
+import { pushRoute } from '@front/features/routing'
+import { GroupBy } from '@shared/enum/GroupBy'
+import { useTranslation } from '@front/domain/i18n'
+
+interface Props {
+  group?: GroupBy
+  detailType: string
+}
+
+export const ShowYear = ({ group, detailType }: Props) => {
+  const showYear = !group || group !== GroupBy.Year
+  const { t } = useTranslation()
+
+  return showYear ? (
+    <Button
+      onClick={() => pushRoute(`/app/stats/${detailType}/year`)}
+      type={ButtonType.Secondary}
+    >
+      {t('stats:details.show-year')}
+    </Button>
+  ) : null
+}

front/src/features/statistics/features/details/generic/features/period-chooser/PeriodChooser.css

@@ -0,0 +1,5 @@
+.card {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: 16px;
+}