Merge pull request #22 from rafgugi/lang

feat: enable translation
rafgugi · Apr 16, 2024 · 60a45f9 · 60a45f9
2 parents d302cc3 + 0ebe60e
commit 60a45f9
Show file tree

Hide file tree

Showing 16 changed files with 291 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Enable translation (#22)
+- Reformat nickname (#20)
+- Add color to the diagram (#20)
 
 ## [1.0.0] 2023-08-09
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,9 +7,11 @@
     "bootstrap-icons": "^1.10.5",
     "file-saver": "^2.0.5",
     "gojs": "^2.3.6",
+    "i18next": "^23.11.2",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "reactstrap": "^9.1.9",
     "yaml": "^2.3.1"
   },

diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
@@ -1,9 +1,26 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 import * as go from 'gojs';
 
 go.Palette.useDOM(false);
 
+i18n.use(initReactI18next).init({
+  fallbackLng: ['dev'],
+  resources: {
+    dev: {
+      translation: {
+        'header.family': '{{name}} Family',
+        'header.family_general': 'Family Grid'
+      },
+    },
+  },
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
 const trees = [{
   id: 'satyr',
   code: '',

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,5 +1,13 @@
-import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';
-import { useMemo, useState } from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Container,
+  Form,
+  FormGroup,
+  Input,
+  Label,
+} from 'reactstrap';
+import { useEffect, useMemo, useState } from 'react';
 import { parse, stringify } from 'yaml';
 import { saveAs } from 'file-saver';
 import { Person } from '../family.interface';
@@ -17,6 +25,7 @@ import {
   unrichTreeData,
 } from '../family.util';
 import { useCache } from '../useCache';
+import { useTranslation } from 'react-i18next';
 import Footer from './Footer';
 
 interface AppProps {
@@ -36,6 +45,14 @@ function App(props: AppProps) {
   const [modalSpouse, setModalSpouse] = useState(null as Person | null);
   const [treeYaml, setTreeYaml] = useState('');
 
+  const { t, i18n } = useTranslation();
+  const [language, setLanguage] = useCache('language', i18n.language);
+  i18n.on('languageChanged', (lang: string) => setLanguage(lang));
+  useEffect(() => {
+    i18n.changeLanguage(language);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  const languages = i18n.languages ? [...i18n.languages].sort() : [];
+
   const [showModalAddTree, setShowModalAddTree] = useState(false);
   const toggleModalAddTree = () => setShowModalAddTree(!showModalAddTree);
   const openModalAddTree = () => {
@@ -133,6 +150,21 @@ function App(props: AppProps) {
     >
       <Container className="d-print-none" fluid="sm">
         <Form>
+          <FormGroup>
+            <ButtonGroup>
+              {languages.map(lang => (
+                <Button
+                  outline
+                  size="sm"
+                  key={lang}
+                  onClick={() => i18n.changeLanguage(lang)}
+                  active={lang === i18n.language}
+                >
+                  {lang}
+                </Button>
+              ))}
+            </ButtonGroup>
+          </FormGroup>
           <FormGroup switch>
             <Input
               type="switch"
@@ -141,7 +173,7 @@ function App(props: AppProps) {
               onChange={() => setSplitValue(!split)}
             />
             <Label for="split-switch" check>
-              Split Family
+              {t('config.splitFamily')}
             </Label>
           </FormGroup>
           <FormGroup switch>
@@ -152,7 +184,7 @@ function App(props: AppProps) {
               onChange={() => setHideCode(!hidePersonCode)}
             />
             <Label for="hidePersonCode-switch" check>
-              Show Code
+              {t('config.showCode')}
             </Label>
           </FormGroup>
           <FormGroup switch>
@@ -163,7 +195,7 @@ function App(props: AppProps) {
               onChange={() => setHideIg(!hidePersonIg)}
             />
             <Label for="hidePersonIg-switch" check>
-              Show Instagram
+              {t('config.showIg')}
             </Label>
           </FormGroup>
           <FormGroup switch className="mb-3">
@@ -174,25 +206,25 @@ function App(props: AppProps) {
               onChange={() => setEditModeValue(!editMode)}
             />
             <Label for="editMode-switch" check>
-              Edit Mode
+              {t('config.editMode')}
             </Label>
           </FormGroup>
           <FormGroup>
             <Button size="sm" onClick={() => openModalAddTree()}>
-              <i className="bi-person-plus-fill" /> Add tree
+              <i className="bi-person-plus-fill" /> {t('config.addTree')}
             </Button>{' '}
             <Button size="sm" onClick={() => openModalAddChild(trees[0])}>
-              <i className="bi-person-plus-fill" /> Add child
+              <i className="bi-person-plus-fill" /> {t('config.addChild')}
             </Button>{' '}
             <Button size="sm" onClick={() => openModalAddSpouse(trees[0])}>
-              <i className="bi-person-plus-fill" /> Add spouse
+              <i className="bi-person-plus-fill" /> {t('config.addSpouse')}
             </Button>{' '}
             <Button
               size="sm"
               onClick={() => openModalDeletePerson()}
               color="danger"
             >
-              <i className="bi-person-dash-fill" /> Delete person
+              <i className="bi-person-dash-fill" /> {t('config.deletePerson')}
             </Button>
           </FormGroup>
           <FormGroup>
@@ -201,10 +233,10 @@ function App(props: AppProps) {
               onClick={() => openModalEditYaml()}
               color="warning"
             >
-              <i className="bi-filetype-yml" /> Edit tree
+              <i className="bi-filetype-yml" /> {t('config.editTree')}
             </Button>{' '}
             <Button size="sm" tag="label">
-              <i className="bi-upload" /> Import
+              <i className="bi-upload" /> {t('config.import')}
               <Input
                 type="file"
                 className="d-none"
@@ -213,7 +245,7 @@ function App(props: AppProps) {
               />
             </Button>{' '}
             <Button size="sm" onClick={handleSave}>
-              <i className="bi-download" /> Export
+              <i className="bi-download" /> {t('config.export')}
             </Button>
           </FormGroup>
         </Form>

diff --git a/src/components/Family.tsx b/src/components/Family.tsx
@@ -4,6 +4,7 @@ import AppContext from './AppContext';
 import FamilyGrid from './FamilyGrid';
 import FamilyDiagram from './FamilyDiagram';
 import { explodeTrees, idAsNickName } from '../family.util';
+import { useTranslation } from 'react-i18next';
 
 interface FamilyProps {
   trees: Person[];
@@ -15,17 +16,19 @@ export default function Family(props: FamilyProps) {
 }
 
 function SplitFamilies({ trees, ...props }: FamilyProps) {
+  const { t } = useTranslation();
   const people = explodeTrees(trees).filter(
     person => person.marriages.length !== 0
   );
+  const getName = (p: Person) => p.name ?? idAsNickName(p.id);
 
   return (
     <>
       {people.map(tree => (
         <Fragment key={tree.id}>
           <hr className="d-print-none" />
           <h3 className="text-center">
-            {tree.name ?? idAsNickName(tree.id)} Family
+            {t('header.family', { name: getName(tree) })}
           </h3>
           <FamilyDiagram trees={[tree]} depth={2} />
           <FamilyGrid {...props} trees={[tree]} />
@@ -36,10 +39,12 @@ function SplitFamilies({ trees, ...props }: FamilyProps) {
 }
 
 function BigFamily({ trees, ...props }: FamilyProps) {
+  const { t } = useTranslation();
+
   return (
     <Fragment>
       <hr className="d-print-none" />
-      <h3 className="text-center">Family Grid</h3>
+      <h3 className="text-center">{t('header.family_general')}</h3>
       <FamilyDiagram trees={trees} />
       <FamilyGrid {...props} trees={trees} />
     </Fragment>