Merge branch 'create-common-components' of https://github.com/daritel…

…ska-platforma/frontend into create-common-components

next.config.js

@@ -7,4 +7,8 @@ module.exports = {
   publicRuntimeConfig: {
     API_URL: process.env.API_URL,
   },
+  i18n: {
+    locales: ['en', 'bg'],
+    defaultLocale: 'en',
+  },
 }

package.json

@@ -16,23 +16,25 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
+    "i18next": "^19.8.4",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
-    "next": "^10.0.3",
+    "next": "^10.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "sass": "^1.30.0"
+    "react-i18next": "^11.8.5",
+    "sass": "^1.32.4"
   },
   "devDependencies": {
-    "@types/node": "^14.14.14",
+    "@types/node": "^14.14.21",
     "@types/react": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.10.0",
-    "@typescript-eslint/parser": "^4.10.0",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-react": "^7.21.5",
-    "husky": "^4.3.6",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1",
     "stylelint": "^13.8.0",

public/locales/bg/about.json

@@ -0,0 +1,3 @@
+{
+  "ABOUT":"Относно"
+}

public/locales/bg/common.json

@@ -0,0 +1,4 @@
+{
+  "ONE": "Едно",
+  "TWO": "Две"
+}

public/locales/en/about.json

@@ -0,0 +1,3 @@
+{
+  "ABOUT":"About"
+}

public/locales/en/common.json

@@ -0,0 +1,4 @@
+{
+  "ONE": "One",
+  "TWO": "Two"
+}

src/components/about/AboutPage.tsx

@@ -1,10 +1,13 @@
 import Layout from 'components/layout/Layout'
+import { useTranslation } from 'react-i18next'
 
 import styles from './about.module.scss'
 
 export default function AboutPage() {
+  const { t } = useTranslation()
+
   return (
-    <Layout title="About">
+    <Layout title={t('about:ABOUT')}>
       <div className={styles.page}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod feugiat fringilla.
         Mauris sed elit facilisis, consequat nisi quis, sagittis diam. Morbi tincidunt sollicitudin

src/components/layout/Nav.tsx

@@ -1,17 +1,20 @@
 import { Box, ButtonGroup } from '@material-ui/core'
 import { routes } from 'common/routes'
 import LinkButton from 'components/shared/LinkButton'
+import { useTranslation } from 'react-i18next'
 
 export default function Nav() {
+  const { t } = useTranslation()
+
   return (
     <Box textAlign="center">
       <ButtonGroup
         disableRipple
         variant="text"
         color="primary"
         aria-label="text primary button group">
-        <LinkButton href={routes.index}>Index</LinkButton>
-        <LinkButton href={routes.about}>About</LinkButton>
+        <LinkButton href={routes.index}>{t('ONE')}</LinkButton>
+        <LinkButton href={routes.about}>{t('TWO')}</LinkButton>
         <LinkButton href={routes.login}>Login</LinkButton>
         <LinkButton href={routes.register}>Register</LinkButton>
       </ButtonGroup>

src/i18n.ts

@@ -0,0 +1,63 @@
+import i18next from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import { NextRouter } from 'next/router'
+
+interface Translation {
+  [key: string]: string
+}
+interface Translations {
+  [namespace: string]: Translation
+}
+interface I18nResources {
+  translations: Translations
+  namespaces: string[]
+}
+
+export const i18nextInit = async (router: NextRouter, i18nResources: I18nResources) => {
+  if (!i18nResources || !router.locale) {
+    return
+  }
+
+  const { translations, namespaces } = i18nResources
+
+  if (!i18next.isInitialized) {
+    i18next.use(initReactI18next).init({
+      lng: router.locale,
+
+      supportedLngs: router.locales,
+
+      fallbackLng: router.defaultLocale,
+
+      ns: namespaces,
+
+      react: {
+        useSuspense: false,
+      },
+    })
+  }
+
+  i18next.setDefaultNamespace(namespaces[0])
+
+  if (i18next.language !== router.locale) {
+    i18next.changeLanguage(router.locale)
+  }
+
+  for (const ns of namespaces) {
+    if (!i18next.hasResourceBundle(router.locale, ns)) {
+      i18next.addResourceBundle(router.locale, ns, translations[ns])
+    }
+  }
+}
+
+export async function getTranslations(locale: string | undefined, namespaces: string[]) {
+  const translations: Translations = {}
+
+  for (const ns of namespaces) {
+    const { default: data = {} }: { default: Translation } = await import(
+      `../public/locales/${locale}/${ns}.json`
+    )
+    translations[ns] = data
+  }
+
+  return { translations, namespaces }
+}

src/pages/_app.tsx

@@ -3,11 +3,16 @@ import Head from 'next/head'
 import { AppProps } from 'next/app'
 import { ThemeProvider } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import { useRouter } from 'next/router'
+import { i18nextInit } from '../i18n'
 
 import theme from 'common/theme'
 
 export default function CustomApp(props: AppProps) {
   const { Component, pageProps } = props
+  const nextRouter = useRouter()
+
+  i18nextInit(nextRouter, pageProps.i18nResources)
 
   React.useEffect(() => {
     // Remove the server-side injected CSS.

src/pages/about.tsx

@@ -1,3 +1,11 @@
 import AboutPage from 'components/about/AboutPage'
+import { GetStaticProps } from 'next'
+import { getTranslations } from '../i18n'
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => ({
+  props: {
+    i18nResources: await getTranslations(locale, ['common', 'about']),
+  },
+})
 
 export default AboutPage

src/pages/index.tsx

@@ -1,3 +1,11 @@
 import IndexPage from 'components/IndexPage'
+import { GetStaticProps } from 'next'
+import { getTranslations } from '../i18n'
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => ({
+  props: {
+    i18nResources: await getTranslations(locale, ['common']),
+  },
+})
 
 export default IndexPage