From 759fba0781b864b515598ee3b4e29fb0915cbae0 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Fri, 25 Jun 2021 16:42:47 -0500 Subject: [PATCH 01/10] Add next-i18next Example --- next-i18next.config.js | 9 + next.config.js | 3 + package.json | 7 +- public/static/locales/en/about.json | 3 + public/static/locales/en/common.json | 5 + public/static/locales/es/about.json | 3 + public/static/locales/es/common.json | 5 + public/static/locales/nl/about.json | 3 + public/static/locales/nl/common.json | 5 + public/static/locales/no/about.json | 3 + public/static/locales/no/common.json | 5 + src/components/pages/about-page/AboutPage.tsx | 19 +- src/components/pages/index-page/IndexPage.tsx | 19 +- src/components/shared/CurrentDate.tsx | 21 ++ src/components/shared/Header.tsx | 30 +++ src/components/shared/LocalePicker.tsx | 20 ++ .../shared/main-layout/MainLayout.tsx | 12 +- src/css/main.css | 15 +- src/pages/_app.tsx | 16 +- src/pages/_document.tsx | 10 +- src/pages/about/index.tsx | 9 +- src/pages/index.tsx | 9 +- yarn.lock | 210 +++++++++++++++++- 23 files changed, 391 insertions(+), 50 deletions(-) create mode 100644 next-i18next.config.js create mode 100644 public/static/locales/en/about.json create mode 100644 public/static/locales/en/common.json create mode 100644 public/static/locales/es/about.json create mode 100644 public/static/locales/es/common.json create mode 100644 public/static/locales/nl/about.json create mode 100644 public/static/locales/nl/common.json create mode 100644 public/static/locales/no/about.json create mode 100644 public/static/locales/no/common.json create mode 100644 src/components/shared/CurrentDate.tsx create mode 100644 src/components/shared/Header.tsx create mode 100644 src/components/shared/LocalePicker.tsx diff --git a/next-i18next.config.js b/next-i18next.config.js new file mode 100644 index 0000000..55c454f --- /dev/null +++ b/next-i18next.config.js @@ -0,0 +1,9 @@ +const path = require('path'); + +module.exports = { + i18n: { + locales: ['en', 'nl', 'no', 'es'], + defaultLocale: 'en', + localePath: path.resolve('./public/static/locales'), + }, +}; diff --git a/next.config.js b/next.config.js index 14c2f1b..99529b7 100644 --- a/next.config.js +++ b/next.config.js @@ -2,6 +2,7 @@ const path = require('path'); const withPlugins = require('next-compose-plugins'); const withBundleAnalyzer = require('@next/bundle-analyzer'); const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin'); +const { i18n } = require('./next-i18next.config'); // https://medium.com/ne-digital/how-to-reduce-next-js-bundle-size-68f7ac70c375 // https://medium.com/ne-digital/build-frontend-performance-monitor-dashboard-using-pagespeed-insights-e807a2caa6cf @@ -15,6 +16,8 @@ module.exports = withPlugins( { reactStrictMode: true, + i18n, + eslint: { dirs: ['src'], }, diff --git a/package.json b/package.json index d20c479..b2ab34b 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,17 @@ "dependencies": { "axios": "0.21.1", "clsx": "1.1.1", + "luxon": "1.27.0", "next": "11.0.1", + "next-i18next": "8.5.1", "react": "17.0.2", - "react-dom": "17.0.2" + "react-dom": "17.0.2", + "semantic-ui-css": "2.4.1", + "semantic-ui-react": "2.0.3" }, "devDependencies": { "@next/bundle-analyzer": "10.2.3", + "@types/luxon": "1.27.0", "@types/react": "17.0.11", "duplicate-package-checker-webpack-plugin": "3.0.0", "eslint": "7.29.0", diff --git a/public/static/locales/en/about.json b/public/static/locales/en/about.json new file mode 100644 index 0000000..c9a49a2 --- /dev/null +++ b/public/static/locales/en/about.json @@ -0,0 +1,3 @@ +{ + "aboutMessage": "This is a demo application to show internationalization in Next.js." +} diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json new file mode 100644 index 0000000..d3ab86a --- /dev/null +++ b/public/static/locales/en/common.json @@ -0,0 +1,5 @@ +{ + "welcomeMessage": "Hi, welcome!", + "home": "Welcome", + "about": "About us" +} diff --git a/public/static/locales/es/about.json b/public/static/locales/es/about.json new file mode 100644 index 0000000..bb60d03 --- /dev/null +++ b/public/static/locales/es/about.json @@ -0,0 +1,3 @@ +{ + "aboutMessage": "Esta es una aplicación para demostrar la internacionalización en Next.js." +} diff --git a/public/static/locales/es/common.json b/public/static/locales/es/common.json new file mode 100644 index 0000000..754992f --- /dev/null +++ b/public/static/locales/es/common.json @@ -0,0 +1,5 @@ +{ + "welcomeMessage": "¡Hola, bienvenidos!", + "home": "Bienvenidos", + "about": "Sobre nosotros" +} diff --git a/public/static/locales/nl/about.json b/public/static/locales/nl/about.json new file mode 100644 index 0000000..0bb7ff7 --- /dev/null +++ b/public/static/locales/nl/about.json @@ -0,0 +1,3 @@ +{ + "aboutMessage": "Dit is een demo-toepassing om vertalingen in Next.js te tonen." +} diff --git a/public/static/locales/nl/common.json b/public/static/locales/nl/common.json new file mode 100644 index 0000000..436e767 --- /dev/null +++ b/public/static/locales/nl/common.json @@ -0,0 +1,5 @@ +{ + "welcomeMessage": "Hoi, welkom!", + "home": "Welkom", + "about": "Over ons" +} diff --git a/public/static/locales/no/about.json b/public/static/locales/no/about.json new file mode 100644 index 0000000..c215416 --- /dev/null +++ b/public/static/locales/no/about.json @@ -0,0 +1,3 @@ +{ + "aboutMessage": "Dette er en demo applikasjon for å demonstrere internasjonalisering i Next.js." +} diff --git a/public/static/locales/no/common.json b/public/static/locales/no/common.json new file mode 100644 index 0000000..fbcc767 --- /dev/null +++ b/public/static/locales/no/common.json @@ -0,0 +1,5 @@ +{ + "welcomeMessage": "Hei, velkommen!", + "home": "Velkommen", + "about": "Om oss" +} diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx index dc81af1..b4bbd18 100644 --- a/src/components/pages/about-page/AboutPage.tsx +++ b/src/components/pages/about-page/AboutPage.tsx @@ -1,19 +1,16 @@ import React from 'react'; -import Link from 'next/link'; -import { Routes } from '../../../constants/Routes'; +import { useTranslation } from 'next-i18next'; +import { Header } from 'semantic-ui-react'; interface IProps {} export const AboutPage: React.FC = (props) => { + const { t } = useTranslation('common'); + return ( -
-

About

-

This is the about page

-

- - Go home - -

-
+ <> +
{t('common:about')}
+
{t('aboutMessage')}
+ ); }; diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 8e25beb..5e24764 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -1,23 +1,16 @@ import React from 'react'; -import Link from 'next/link'; -import { Routes } from '../../../constants/Routes'; +import { useTranslation } from 'next-i18next'; +import { Header } from 'semantic-ui-react'; interface IProps {} export const IndexPage: React.FC = (props) => { + const { t } = useTranslation('common'); + return (
-

- Hello Next.js{' '} - - 👋 - -

-

- - About - -

+
{t('home')}
+
{t('welcomeMessage')}
); }; diff --git a/src/components/shared/CurrentDate.tsx b/src/components/shared/CurrentDate.tsx new file mode 100644 index 0000000..916e409 --- /dev/null +++ b/src/components/shared/CurrentDate.tsx @@ -0,0 +1,21 @@ +import { Segment, Label } from 'semantic-ui-react'; +import { DateTime } from 'luxon'; +import { useRouter } from 'next/router'; + +export const CurrentDate = ({}) => { + const router = useRouter(); + + const dateTime = DateTime.local() + .setLocale(router.locale!) + .setZone('utc') + .toLocaleString({ + ...DateTime.DATETIME_HUGE, + timeZoneName: 'short', + }); + + return ( + + + ); +}; diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx new file mode 100644 index 0000000..6d6c875 --- /dev/null +++ b/src/components/shared/Header.tsx @@ -0,0 +1,30 @@ +import { Menu, Icon } from 'semantic-ui-react'; +import { LocalePicker } from './LocalePicker'; +import { useRouter } from 'next/router'; +import Link from 'next/link'; +import { useTranslation } from 'next-i18next'; +import { Routes } from '../../constants/Routes'; + +export const Header = () => { + const { pathname } = useRouter(); + const { t } = useTranslation('common'); + + const buttons = [ + { path: Routes.Index, text: 'home', icon: 'home' }, + { path: Routes.About, text: 'about', icon: 'question' }, + ]; + + return ( + + {buttons.map((button) => ( + + + + {t(button.text)} + + + ))} + + + ); +}; diff --git a/src/components/shared/LocalePicker.tsx b/src/components/shared/LocalePicker.tsx new file mode 100644 index 0000000..99c5dcd --- /dev/null +++ b/src/components/shared/LocalePicker.tsx @@ -0,0 +1,20 @@ +import { Menu, Flag, FlagNameValues } from 'semantic-ui-react'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; + +export const LocalePicker = () => { + const router = useRouter(); + + return ( + + {router.locales!.map((locale) => ( + + + + {` ${locale.toUpperCase()}`} + + + ))} + + ); +}; diff --git a/src/components/shared/main-layout/MainLayout.tsx b/src/components/shared/main-layout/MainLayout.tsx index 7dea095..c798547 100644 --- a/src/components/shared/main-layout/MainLayout.tsx +++ b/src/components/shared/main-layout/MainLayout.tsx @@ -1,12 +1,15 @@ import React from 'react'; import Head from 'next/head'; import { MainNavigation } from '../main-navigation/MainNavigation'; +import { useTranslation } from 'next-i18next'; interface IProps { title?: string; } export const MainLayout: React.FC = (props) => { + const { t } = useTranslation('common'); + return (
@@ -14,14 +17,15 @@ export const MainLayout: React.FC = (props) => { -
+ {/*
-
+
*/} {props.children} -
+ {/*
+ {t('description')}
I'm here to stay (Footer) -
+
*/}
); }; diff --git a/src/css/main.css b/src/css/main.css index ea4cb77..e2e6d0f 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,3 +1,16 @@ +html, body { - font-family: Lobster; + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, + Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ad00433..3a1e0e3 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,8 +1,13 @@ +import 'semantic-ui-css/semantic.min.css'; import '../css/main.css'; import React from 'react'; import { AppProps } from 'next/app'; import Head from 'next/head'; +import { appWithTranslation } from 'next-i18next'; +import { Container, Segment } from 'semantic-ui-react'; +import { CurrentDate } from '../components/shared/CurrentDate'; +import { Header } from '../components/shared/Header'; const NextApp: React.FC = (props) => { return ( @@ -12,10 +17,17 @@ const NextApp: React.FC = (props) => { {/* Use minimum-scale=1 to enable GPU rasterization */} - +
+ +
+ + + + + ); }; // ts-prune-ignore-next -export default NextApp; +export default appWithTranslation(NextApp); diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index e7682a8..5de2e4c 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,20 +1,12 @@ import React from 'react'; -import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; class NextDocument extends Document { - static async getInitialProps(ctx: DocumentContext): Promise { - const initialProps = await Document.getInitialProps(ctx); - - return initialProps; - } - render(): JSX.Element { return ( - -
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index da242f8..f04ca47 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { MainLayout } from '../../components/shared/main-layout/MainLayout'; -import { NextPage } from 'next'; +import { GetServerSideProps, NextPage } from 'next'; import { AboutPage } from '../../components/pages/about-page/AboutPage'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; interface IProps {} @@ -13,5 +14,11 @@ const AboutRoute: NextPage = (props) => { ); }; +export const getServerSideProps: GetServerSideProps = async (context) => ({ + props: { + ...(await serverSideTranslations(context.locale!, ['about', 'common'])), + }, +}); + // ts-prune-ignore-next export default AboutRoute; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2b483f4..3ae74c8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { MainLayout } from '../components/shared/main-layout/MainLayout'; import { IndexPage } from '../components/pages/index-page/IndexPage'; -import { NextPage } from 'next'; +import { GetServerSideProps, NextPage } from 'next'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; interface IProps {} @@ -13,5 +14,11 @@ const IndexRoute: NextPage = (props) => { ); }; +export const getServerSideProps: GetServerSideProps = async (context) => ({ + props: { + ...(await serverSideTranslations(context.locale!, ['about', 'common'])), + }, +}); + // ts-prune-ignore-next export default IndexRoute; diff --git a/yarn.lock b/yarn.lock index e28b2cb..528ecbd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -59,6 +59,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.13.17", "@babel/runtime@^7.14.5": + version "7.14.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d" + integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/types@7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c" @@ -83,6 +90,21 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fluentui/react-component-event-listener@~0.51.6": + version "0.51.7" + resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.7.tgz#158adb970d8bc982c91c57fd1322a0036042d86e" + integrity sha512-NjVm+crN0T9A7vITL8alZeHnuV8zi2gos0nezU/2YOxaUAB9E4zKiPxt/6k5U50rJs/gj8Nu45iXxnjO41HbZg== + dependencies: + "@babel/runtime" "^7.10.4" + +"@fluentui/react-component-ref@~0.51.6": + version "0.51.7" + resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.7.tgz#bfb0312e926c213bed35e53ee5105a68732eea99" + integrity sha512-CX27jVJYaFoBCWpuWAizQZ2se137ku1dmDyn8sw+ySNJa+kkQf7LnMydiPW5K7cRdUSqUJW3eS4EjKRvVAx8xA== + dependencies: + "@babel/runtime" "^7.10.4" + react-is "^16.6.3" + "@hapi/accept@5.0.2": version "5.0.2" resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523" @@ -173,16 +195,49 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23" integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA== +"@popperjs/core@^2.6.0": + version "2.9.2" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353" + integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q== + "@rushstack/eslint-patch@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50" integrity sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA== +"@semantic-ui-react/event-stack@^3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz#14fac9796695aa3967962d94ea9733a85325f9c4" + integrity sha512-Yd0Qf7lPCIjzJ9bZYfurlNu2RDXT6KKSyubHfYK3WjRauhxCsq6Fk2LMRI9DEvShoEU+AsLSv3NGkqXAcVp0zg== + dependencies: + exenv "^1.2.2" + prop-types "^15.6.2" + +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + +"@types/i18next-fs-backend@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/i18next-fs-backend/-/i18next-fs-backend-1.0.0.tgz#3fb0374f4d376375b7cc1d3729bca663d104fa64" + integrity sha512-PotQ0NE17NavxXCsdyq9qIKZQOB7+A5O/2nDdvfbfm6/IgvvC1YUO6hxK3nIHASu+QGjO1QV5J8PJw4OL12LMQ== + dependencies: + i18next "^19.7.0" + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/luxon@1.27.0": + version "1.27.0" + resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.27.0.tgz#1e3b5a7f8ca6944349c43498b4442b742c71ab0b" + integrity sha512-rr2lNXsErnA/ARtgFn46NtQjUa66cuwZYeo/2K7oqqxhJErhXgHBPyNKCo+pfOC3L7HFwtao8ebViiU9h4iAxA== + "@types/minimatch@^3.0.3": version "3.0.4" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21" @@ -203,7 +258,7 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== -"@types/react@17.0.11": +"@types/react@*", "@types/react@17.0.11": version "17.0.11" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451" integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA== @@ -791,7 +846,7 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" -clsx@1.1.1: +clsx@1.1.1, clsx@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== @@ -872,6 +927,11 @@ core-js-pure@^3.0.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.8.0.tgz#4cdd2eca37d49cda206b66e26204818dba77884a" integrity sha512-fRjhg3NeouotRoIV0L1FdchA6CK7ZD+lyINyMoz19SyV+ROpC4noS1xItWHFtwZdlqfMfVPJEyEGdfri2bD1pA== +core-js@^3: + version "3.15.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.1.tgz#6c08ab88abdf56545045ccf5fd81f47f407e7f1a" + integrity sha512-h8VbZYnc9pDzueiS2610IULDkpFFPunHwIpl8yRwFahAEEdSpHlTy3h3z3rKq5h11CaUdBEeRViu9AYvbxiMeg== + core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -1541,6 +1601,11 @@ execa@^4.0.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" @@ -1872,11 +1937,25 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.8" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== +html-parse-stringify@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2" + integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg== + dependencies: + void-elements "3.1.0" + http-errors@1.7.3: version "1.7.3" resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06" @@ -1939,6 +2018,25 @@ husky@4.3.0: slash "^3.0.0" which-pm-runs "^1.0.0" +i18next-fs-backend@^1.0.7: + version "1.1.1" + resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-1.1.1.tgz#1d8028926803f63784ffa0f2b1478fb369f92735" + integrity sha512-RFkfy10hNxJqc7MVAp5iAZq0Tum6msBCNebEe3OelOBvrROvzHUPaR8Qe10RQrOGokTm0W4vJGEJzruFkEt+hQ== + +i18next@^19.7.0: + version "19.9.2" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.2.tgz#ea5a124416e3c5ab85fddca2c8e3c3669a8da397" + integrity sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg== + dependencies: + "@babel/runtime" "^7.12.0" + +i18next@^20.1.0: + version "20.3.2" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.3.2.tgz#5195e76b9e0848a1c198001bf6c7fc72995a55f1" + integrity sha512-e8CML2R9Ng2sSQOM80wb/PrM2j8mDm84o/T4Amzn9ArVyNX5/ENWxxAXkRpZdTQNDaxKImF93Wep4mAoozFrKw== + dependencies: + "@babel/runtime" "^7.12.0" + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -2223,6 +2321,11 @@ jest-worker@27.0.0-next.5: merge-stream "^2.0.0" supports-color "^8.0.0" +jquery@x.*: + version "3.6.0" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" + integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -2281,6 +2384,11 @@ junk@^1.0.1: resolved "https://registry.yarnpkg.com/junk/-/junk-1.0.3.tgz#87be63488649cbdca6f53ab39bec9ccd2347f592" integrity sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI= +keyboard-key@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.1.0.tgz#6f2e8e37fa11475bb1f1d65d5174f1b35653f5b7" + integrity sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ== + language-subtag-registry@~0.3.2: version "0.3.21" resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a" @@ -2340,6 +2448,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash-es@^4.17.15: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" @@ -2365,12 +2478,12 @@ lodash@^4.17.13: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== -lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.4: +lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -2384,6 +2497,11 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" +luxon@1.27.0: + version "1.27.0" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.27.0.tgz#ae10c69113d85dab8f15f5e8390d0cbeddf4f00f" + integrity sha512-VKsFsPggTA0DvnxtJdiExAucKdAnwbCCNlMM5ENvHlxubqWd0xhZcdb4XgZ7QFNhaRhilXCFxHuoObP5BNA4PA== + make-dir@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" @@ -2533,6 +2651,20 @@ next-compose-plugins@2.2.1: resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab" integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg== +next-i18next@8.5.1: + version "8.5.1" + resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-8.5.1.tgz#9ec3baf31aeb27be0a878283e135c6e9557b3130" + integrity sha512-ETr6yOw69PPvbUCH2RoujgRzreTzcbSS4YrTusP5878ovBSmoah/mZ4+iUVVRU4ToeaSBZiIIJA6MtAJWGFBTw== + dependencies: + "@babel/runtime" "^7.13.17" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/i18next-fs-backend" "^1.0.0" + core-js "^3" + hoist-non-react-statics "^3.2.0" + i18next "^20.1.0" + i18next-fs-backend "^1.0.7" + react-i18next "^11.8.13" + next@11.0.1: version "11.0.1" resolved "https://registry.yarnpkg.com/next/-/next-11.0.1.tgz#b8e3914d153aaf7143cb98c09bcd3c8230eeb17a" @@ -3072,7 +3204,7 @@ promise@^7.0.1: dependencies: asap "~2.0.3" -prop-types@15.7.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -3179,16 +3311,37 @@ react-dom@17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" -react-is@17.0.2: +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + +react-i18next@^11.8.13: + version "11.11.0" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.0.tgz#2f7c6cb4f81f94d1728a02d60e4bb5216709f942" + integrity sha512-p1jHmoyJgDFQmyubUEjrx6kCsr1izW/C8i9pOiJy+9lJqLYwNA8sElVplm0VAnop3kH68edT0/g3wB3UvAcRCQ== + dependencies: + "@babel/runtime" "^7.14.5" + html-parse-stringify "^3.0.1" + +react-is@17.0.2, "react-is@^16.8.6 || ^17.0.0": version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-is@^16.8.1: +react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-popper@^2.2.4: + version "2.2.5" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96" + integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw== + dependencies: + react-fast-compare "^3.0.1" + warning "^4.0.2" + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -3396,6 +3549,32 @@ secure-compare@3.0.1: resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3" integrity sha1-8aAymzCLIh+uN7mXTz1XjQypmeM= +semantic-ui-css@2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz#f5aea39fafb787cbd905ec724272a3f9cba9004a" + integrity sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg== + dependencies: + jquery x.* + +semantic-ui-react@2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-2.0.3.tgz#39091e24078e28129ff9b1beb7dbfc84ca85544b" + integrity sha512-a0hGN6XXw64sRSKwWqMCKSI/AGLohxNeWuErS39eswvBbUnLjBij8ZoEdiqDiz/PuWpwYIRjgmQVrut+7h3b2g== + dependencies: + "@babel/runtime" "^7.10.5" + "@fluentui/react-component-event-listener" "~0.51.6" + "@fluentui/react-component-ref" "~0.51.6" + "@popperjs/core" "^2.6.0" + "@semantic-ui-react/event-stack" "^3.1.2" + clsx "^1.1.1" + keyboard-key "^1.1.0" + lodash "^4.17.19" + lodash-es "^4.17.15" + prop-types "^15.7.2" + react-is "^16.8.6 || ^17.0.0" + react-popper "^2.2.4" + shallowequal "^1.1.0" + semver-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" @@ -3453,6 +3632,11 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -4021,6 +4205,18 @@ vm-browserify@1.1.2, vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +void-elements@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09" + integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk= + +warning@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.1.1.tgz#e99630550fca07df9f90a06056987baa40a689c7" From 1bceef63df6ee1f0a67fddf3e2fc770566ac781c Mon Sep 17 00:00:00 2001 From: robertsavian Date: Fri, 25 Jun 2021 16:53:09 -0500 Subject: [PATCH 02/10] fix about text --- src/components/pages/about-page/AboutPage.tsx | 4 ++-- src/components/pages/index-page/IndexPage.tsx | 2 +- src/components/shared/Header.tsx | 2 +- src/components/shared/main-layout/MainLayout.tsx | 12 ------------ 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx index b4bbd18..aea709a 100644 --- a/src/components/pages/about-page/AboutPage.tsx +++ b/src/components/pages/about-page/AboutPage.tsx @@ -5,12 +5,12 @@ import { Header } from 'semantic-ui-react'; interface IProps {} export const AboutPage: React.FC = (props) => { - const { t } = useTranslation('common'); + const { t } = useTranslation(); return ( <>
{t('common:about')}
-
{t('aboutMessage')}
+
{t('about:aboutMessage')}
); }; diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 5e24764..938da38 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -5,7 +5,7 @@ import { Header } from 'semantic-ui-react'; interface IProps {} export const IndexPage: React.FC = (props) => { - const { t } = useTranslation('common'); + const { t } = useTranslation(); return (
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx index 6d6c875..68da5c4 100644 --- a/src/components/shared/Header.tsx +++ b/src/components/shared/Header.tsx @@ -7,7 +7,7 @@ import { Routes } from '../../constants/Routes'; export const Header = () => { const { pathname } = useRouter(); - const { t } = useTranslation('common'); + const { t } = useTranslation(); const buttons = [ { path: Routes.Index, text: 'home', icon: 'home' }, diff --git a/src/components/shared/main-layout/MainLayout.tsx b/src/components/shared/main-layout/MainLayout.tsx index c798547..09d21f0 100644 --- a/src/components/shared/main-layout/MainLayout.tsx +++ b/src/components/shared/main-layout/MainLayout.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Head from 'next/head'; -import { MainNavigation } from '../main-navigation/MainNavigation'; -import { useTranslation } from 'next-i18next'; interface IProps { title?: string; } export const MainLayout: React.FC = (props) => { - const { t } = useTranslation('common'); - return (
@@ -17,15 +13,7 @@ export const MainLayout: React.FC = (props) => { - {/*
- -
*/} {props.children} - {/*
- {t('description')} -
- I'm here to stay (Footer) -
*/}
); }; From e19c78ef4ace96687e05cc586628cc6182725476 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Fri, 25 Jun 2021 17:01:49 -0500 Subject: [PATCH 03/10] create index.json --- public/static/locales/en/common.json | 1 - public/static/locales/en/index.json | 3 +++ public/static/locales/es/common.json | 1 - public/static/locales/es/index.json | 3 +++ public/static/locales/nl/common.json | 1 - public/static/locales/nl/index.json | 3 +++ public/static/locales/no/common.json | 1 - public/static/locales/no/index.json | 3 +++ src/components/pages/index-page/IndexPage.tsx | 4 ++-- src/components/shared/Header.tsx | 4 ++-- src/pages/index.tsx | 2 +- 11 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 public/static/locales/en/index.json create mode 100644 public/static/locales/es/index.json create mode 100644 public/static/locales/nl/index.json create mode 100644 public/static/locales/no/index.json diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json index d3ab86a..8876645 100644 --- a/public/static/locales/en/common.json +++ b/public/static/locales/en/common.json @@ -1,5 +1,4 @@ { - "welcomeMessage": "Hi, welcome!", "home": "Welcome", "about": "About us" } diff --git a/public/static/locales/en/index.json b/public/static/locales/en/index.json new file mode 100644 index 0000000..85bd41b --- /dev/null +++ b/public/static/locales/en/index.json @@ -0,0 +1,3 @@ +{ + "welcomeMessage": "Hi, welcome!" +} diff --git a/public/static/locales/es/common.json b/public/static/locales/es/common.json index 754992f..05501b8 100644 --- a/public/static/locales/es/common.json +++ b/public/static/locales/es/common.json @@ -1,5 +1,4 @@ { - "welcomeMessage": "¡Hola, bienvenidos!", "home": "Bienvenidos", "about": "Sobre nosotros" } diff --git a/public/static/locales/es/index.json b/public/static/locales/es/index.json new file mode 100644 index 0000000..5e03fed --- /dev/null +++ b/public/static/locales/es/index.json @@ -0,0 +1,3 @@ +{ + "welcomeMessage": "¡Hola, bienvenidos!" +} diff --git a/public/static/locales/nl/common.json b/public/static/locales/nl/common.json index 436e767..b6d78e5 100644 --- a/public/static/locales/nl/common.json +++ b/public/static/locales/nl/common.json @@ -1,5 +1,4 @@ { - "welcomeMessage": "Hoi, welkom!", "home": "Welkom", "about": "Over ons" } diff --git a/public/static/locales/nl/index.json b/public/static/locales/nl/index.json new file mode 100644 index 0000000..a659a09 --- /dev/null +++ b/public/static/locales/nl/index.json @@ -0,0 +1,3 @@ +{ + "welcomeMessage": "Hoi, welkom!" +} diff --git a/public/static/locales/no/common.json b/public/static/locales/no/common.json index fbcc767..1c21af6 100644 --- a/public/static/locales/no/common.json +++ b/public/static/locales/no/common.json @@ -1,5 +1,4 @@ { - "welcomeMessage": "Hei, velkommen!", "home": "Velkommen", "about": "Om oss" } diff --git a/public/static/locales/no/index.json b/public/static/locales/no/index.json new file mode 100644 index 0000000..42099fc --- /dev/null +++ b/public/static/locales/no/index.json @@ -0,0 +1,3 @@ +{ + "welcomeMessage": "Hei, velkommen!" +} diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 938da38..f27e6c0 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -9,8 +9,8 @@ export const IndexPage: React.FC = (props) => { return (
-
{t('home')}
-
{t('welcomeMessage')}
+
{t('common:home')}
+
{t('index:welcomeMessage')}
); }; diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx index 68da5c4..6f9d96b 100644 --- a/src/components/shared/Header.tsx +++ b/src/components/shared/Header.tsx @@ -10,8 +10,8 @@ export const Header = () => { const { t } = useTranslation(); const buttons = [ - { path: Routes.Index, text: 'home', icon: 'home' }, - { path: Routes.About, text: 'about', icon: 'question' }, + { path: Routes.Index, text: 'common:home', icon: 'home' }, + { path: Routes.About, text: 'common:about', icon: 'question' }, ]; return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3ae74c8..7fbaabf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,7 +16,7 @@ const IndexRoute: NextPage = (props) => { export const getServerSideProps: GetServerSideProps = async (context) => ({ props: { - ...(await serverSideTranslations(context.locale!, ['about', 'common'])), + ...(await serverSideTranslations(context.locale!, ['index', 'common'])), }, }); From bd580decb194273d0ea90a73e3591858ff185e6a Mon Sep 17 00:00:00 2001 From: robertsavian Date: Fri, 25 Jun 2021 21:11:48 -0500 Subject: [PATCH 04/10] remove unused files --- src/components/pages/film-page/FilmPage.tsx | 20 -------- .../film-page/list-detail/ListDetail.tsx | 15 ------ src/components/pages/films-page/FilmsPage.tsx | 27 ----------- src/components/pages/films-page/list/List.tsx | 19 -------- .../films-page/list/list-item/ListItem.tsx | 18 ------- .../main-navigation/MainNavigation.module.css | 9 ---- .../shared/main-navigation/MainNavigation.tsx | 34 -------------- src/constants/Routes.ts | 6 +-- src/domains/films/films.constants.ts | 16 ------- src/domains/films/films.services.ts | 16 ------- src/pages/api/users/index.ts | 19 -------- src/pages/films/[id].tsx | 47 ------------------- src/pages/films/index.tsx | 31 ------------ 13 files changed, 1 insertion(+), 276 deletions(-) delete mode 100644 src/components/pages/film-page/FilmPage.tsx delete mode 100644 src/components/pages/film-page/list-detail/ListDetail.tsx delete mode 100644 src/components/pages/films-page/FilmsPage.tsx delete mode 100644 src/components/pages/films-page/list/List.tsx delete mode 100644 src/components/pages/films-page/list/list-item/ListItem.tsx delete mode 100644 src/components/shared/main-navigation/MainNavigation.module.css delete mode 100644 src/components/shared/main-navigation/MainNavigation.tsx delete mode 100644 src/domains/films/films.constants.ts delete mode 100644 src/domains/films/films.services.ts delete mode 100644 src/pages/api/users/index.ts delete mode 100644 src/pages/films/[id].tsx delete mode 100644 src/pages/films/index.tsx diff --git a/src/components/pages/film-page/FilmPage.tsx b/src/components/pages/film-page/FilmPage.tsx deleted file mode 100644 index e74af5e..0000000 --- a/src/components/pages/film-page/FilmPage.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { IFilm } from '../../../domains/films/films.constants'; -import { ListDetail } from './list-detail/ListDetail'; - -interface IProps { - film?: IFilm; - errors?: string; -} - -export const FilmPage: React.FC = (props) => { - if (props.errors) { - return ( -

- Error: {props.errors} -

- ); - } - - return <>{props.film && }; -}; diff --git a/src/components/pages/film-page/list-detail/ListDetail.tsx b/src/components/pages/film-page/list-detail/ListDetail.tsx deleted file mode 100644 index a4784fb..0000000 --- a/src/components/pages/film-page/list-detail/ListDetail.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { IFilm } from '../../../../domains/films/films.constants'; - -interface IProps { - film: IFilm; -} - -export const ListDetail: React.FC = (props) => { - return ( -
-

Title {props.film.title}

-

ID: {props.film.episode_id}

-
- ); -}; diff --git a/src/components/pages/films-page/FilmsPage.tsx b/src/components/pages/films-page/FilmsPage.tsx deleted file mode 100644 index 089aae9..0000000 --- a/src/components/pages/films-page/FilmsPage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { IFilm } from '../../../domains/films/films.constants'; -import { List } from './list/List'; -import { Routes } from '../../../constants/Routes'; - -interface IProps { - films: IFilm[]; -} - -export const FilmPages: React.FC = (props) => { - return ( -
-

Films List

-

- Example fetching data from inside getStaticProps(). -

-

You are currently on: /films

- -

- - Go home - -

-
- ); -}; diff --git a/src/components/pages/films-page/list/List.tsx b/src/components/pages/films-page/list/List.tsx deleted file mode 100644 index 5132c34..0000000 --- a/src/components/pages/films-page/list/List.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { ListItem } from './list-item/ListItem'; -import { IFilm } from '../../../../domains/films/films.constants'; - -interface IProps { - films: IFilm[]; -} - -export const List: React.FC = (props) => { - return ( -
    - {props.films.map((film) => ( -
  • - -
    • - ))} -
- ); -}; diff --git a/src/components/pages/films-page/list/list-item/ListItem.tsx b/src/components/pages/films-page/list/list-item/ListItem.tsx deleted file mode 100644 index 8f08df7..0000000 --- a/src/components/pages/films-page/list/list-item/ListItem.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { IFilm } from '../../../../../domains/films/films.constants'; -import { Routes, RoutesDynamicKey } from '../../../../../constants/Routes'; - -interface IProps { - film: IFilm; -} - -export const ListItem: React.FC = (props) => { - return ( - - - {props.film.episode_id}: {props.film.title} - - - ); -}; diff --git a/src/components/shared/main-navigation/MainNavigation.module.css b/src/components/shared/main-navigation/MainNavigation.module.css deleted file mode 100644 index 993cf52..0000000 --- a/src/components/shared/main-navigation/MainNavigation.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.crumbs { - /*list-style-type: none;*/ - /*padding-left: 0;*/ -} - -.crumb li { - display: inline-block; - padding: 0 10px; -} diff --git a/src/components/shared/main-navigation/MainNavigation.tsx b/src/components/shared/main-navigation/MainNavigation.tsx deleted file mode 100644 index 254547b..0000000 --- a/src/components/shared/main-navigation/MainNavigation.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { Routes } from '../../../constants/Routes'; -import styles from './MainNavigation.module.css'; -import environment from 'environment'; - -interface IProps {} - -export const MainNavigation: React.FC = (props) => { - return ( - - ); -}; diff --git a/src/constants/Routes.ts b/src/constants/Routes.ts index 208ac69..cc5d57e 100644 --- a/src/constants/Routes.ts +++ b/src/constants/Routes.ts @@ -1,10 +1,6 @@ -export enum RoutesDynamicKey { - FilmId = '[film_id]', -} +export enum RoutesDynamicKey {} export enum Routes { Index = '/', About = '/about', - Films = '/films', - Films_FilmId = '/films/[film_id]', } diff --git a/src/domains/films/films.constants.ts b/src/domains/films/films.constants.ts deleted file mode 100644 index 5ecb2e7..0000000 --- a/src/domains/films/films.constants.ts +++ /dev/null @@ -1,16 +0,0 @@ -export interface IFilm { - characters: string[]; - created: string; - director: string; - edited: string; - episode_id: string; - opening_crawl: string; - planets: string[]; - producer: string; - release_date: string; - species: string[]; - starships: string[]; - title: string; - url: string; - vehicles: string[]; -} diff --git a/src/domains/films/films.services.ts b/src/domains/films/films.services.ts deleted file mode 100644 index dec7adb..0000000 --- a/src/domains/films/films.services.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { IFilm } from './films.constants'; -import axios from 'axios'; -import environment from 'environment'; - -export const getFilms = async (): Promise => { - const response = await axios.get(environment.api.films); - - return response.data.results; -}; - -export const getFilm = async (id: string): Promise => { - const url = environment.api.film.replace(':filmId', id); - const response = await axios.get(url); - - return response.data; -}; diff --git a/src/pages/api/users/index.ts b/src/pages/api/users/index.ts deleted file mode 100644 index ed55792..0000000 --- a/src/pages/api/users/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NextApiRequest, NextApiResponse } from 'next'; - -interface IResponseData { - users: unknown[]; -} - -/** - * ts-prune-ignore-next - */ -export default (req: NextApiRequest, res: NextApiResponse): void => { - const sampleUserData = [ - { id: '101', name: 'Alice' }, - { id: '102', name: 'Bob' }, - { id: '103', name: 'Caroline' }, - { id: '104', name: 'Dave' }, - ]; - - res.status(200).json({ users: sampleUserData }); -}; diff --git a/src/pages/films/[id].tsx b/src/pages/films/[id].tsx deleted file mode 100644 index cce41bc..0000000 --- a/src/pages/films/[id].tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { GetStaticProps, GetStaticPaths, NextPage } from 'next'; -import { MainLayout } from '../../components/shared/main-layout/MainLayout'; -import { IFilm } from '../../domains/films/films.constants'; -import { getFilm, getFilms } from '../../domains/films/films.services'; -import { FilmPage } from '../../components/pages/film-page/FilmPage'; - -interface IProps { - film?: IFilm; - errors?: string; -} - -const FilmRoute: NextPage = (props) => { - return ( - - - - ); -}; - -/** - * ts-prune-ignore-next - */ -export const getStaticPaths: GetStaticPaths = async () => { - const films = await getFilms(); - const paths = films.map((film) => ({ - params: { id: film.episode_id.toString() }, - })); - - return { paths, fallback: false }; -}; - -/** - * ts-prune-ignore-next - */ -export const getStaticProps: GetStaticProps = async (props) => { - try { - const film = await getFilm(props.params?.id as string); - - return { props: { film } }; - } catch (err) { - return { props: { errors: err.message } }; - } -}; - -// ts-prune-ignore-next -export default FilmRoute; diff --git a/src/pages/films/index.tsx b/src/pages/films/index.tsx deleted file mode 100644 index 241b2fd..0000000 --- a/src/pages/films/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { GetStaticProps, NextPage } from 'next'; -import { MainLayout } from '../../components/shared/main-layout/MainLayout'; -import { IFilm } from '../../domains/films/films.constants'; -import { getFilms } from '../../domains/films/films.services'; -import { FilmPages } from '../../components/pages/films-page/FilmsPage'; - -interface IProps { - films: IFilm[]; -} - -const FilmsRoute: NextPage = (props) => { - return ( - - - - ); -}; - -/** - * ts-prune-ignore-next - */ -export const getStaticProps: GetStaticProps = async () => { - // TODO: how to handle errors - const films: IFilm[] = await getFilms(); - - return { props: { films } }; -}; - -// ts-prune-ignore-next -export default FilmsRoute; From aef3c4c874672875934bde9447e0e5bb4e8a5fed Mon Sep 17 00:00:00 2001 From: robertsavian Date: Fri, 25 Jun 2021 21:38:48 -0500 Subject: [PATCH 05/10] typescript i18n --- package.json | 1 + public/static/locales/en/common.json | 3 ++- public/static/locales/es/common.json | 3 ++- public/static/locales/nl/common.json | 3 ++- public/static/locales/no/common.json | 3 ++- src/components/pages/about-page/AboutPage.tsx | 2 +- src/components/pages/index-page/IndexPage.tsx | 2 +- src/components/shared/Header.tsx | 10 ++++++---- src/pages/_app.tsx | 9 ++++++++- src/pages/about/index.tsx | 4 ++-- src/pages/index.tsx | 4 ++-- src/types/react-i18next.d.ts | 18 ++++++++++++++++++ src/utils/i18n.utils.ts | 6 ++++++ yarn.lock | 2 +- 14 files changed, 54 insertions(+), 16 deletions(-) create mode 100644 src/types/react-i18next.d.ts create mode 100644 src/utils/i18n.utils.ts diff --git a/package.json b/package.json index b2ab34b..7e664f9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "next-i18next": "8.5.1", "react": "17.0.2", "react-dom": "17.0.2", + "react-i18next": "11.11.0", "semantic-ui-css": "2.4.1", "semantic-ui-react": "2.0.3" }, diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json index 8876645..24e2c98 100644 --- a/public/static/locales/en/common.json +++ b/public/static/locales/en/common.json @@ -1,4 +1,5 @@ { "home": "Welcome", - "about": "About us" + "about": "About us", + "copyright": "copyright {{year}}" } diff --git a/public/static/locales/es/common.json b/public/static/locales/es/common.json index 05501b8..d77f666 100644 --- a/public/static/locales/es/common.json +++ b/public/static/locales/es/common.json @@ -1,4 +1,5 @@ { "home": "Bienvenidos", - "about": "Sobre nosotros" + "about": "Sobre nosotros", + "copyright": "derechos de autor {{year}}" } diff --git a/public/static/locales/nl/common.json b/public/static/locales/nl/common.json index b6d78e5..1e5e31f 100644 --- a/public/static/locales/nl/common.json +++ b/public/static/locales/nl/common.json @@ -1,4 +1,5 @@ { "home": "Welkom", - "about": "Over ons" + "about": "Over ons", + "copyright": "auteursrechten {{year}}" } diff --git a/public/static/locales/no/common.json b/public/static/locales/no/common.json index 1c21af6..41261eb 100644 --- a/public/static/locales/no/common.json +++ b/public/static/locales/no/common.json @@ -1,4 +1,5 @@ { "home": "Velkommen", - "about": "Om oss" + "about": "Om oss", + "copyright": "opphavsrett {{year}}" } diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx index aea709a..400cab9 100644 --- a/src/components/pages/about-page/AboutPage.tsx +++ b/src/components/pages/about-page/AboutPage.tsx @@ -5,7 +5,7 @@ import { Header } from 'semantic-ui-react'; interface IProps {} export const AboutPage: React.FC = (props) => { - const { t } = useTranslation(); + const { t } = useTranslation(['common', 'about']); return ( <> diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index f27e6c0..4dc0ffb 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -5,7 +5,7 @@ import { Header } from 'semantic-ui-react'; interface IProps {} export const IndexPage: React.FC = (props) => { - const { t } = useTranslation(); + const { t } = useTranslation(['common', 'index']); return (
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx index 6f9d96b..b6a14f2 100644 --- a/src/components/shared/Header.tsx +++ b/src/components/shared/Header.tsx @@ -4,12 +4,14 @@ import { useRouter } from 'next/router'; import Link from 'next/link'; import { useTranslation } from 'next-i18next'; import { Routes } from '../../constants/Routes'; +import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic'; +import { AppI18nNamespaces, TFunction } from 'react-i18next'; export const Header = () => { const { pathname } = useRouter(); - const { t } = useTranslation(); + const { t } = useTranslation(['common']); - const buttons = [ + const buttons: { path: Routes; text: string; icon: SemanticICONS }[] = [ { path: Routes.Index, text: 'common:home', icon: 'home' }, { path: Routes.About, text: 'common:about', icon: 'question' }, ]; @@ -19,8 +21,8 @@ export const Header = () => { {buttons.map((button) => ( - - {t(button.text)} + + {t(button.text as any)} ))} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 3a1e0e3..d303b40 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,12 +4,14 @@ import '../css/main.css'; import React from 'react'; import { AppProps } from 'next/app'; import Head from 'next/head'; -import { appWithTranslation } from 'next-i18next'; +import { appWithTranslation, useTranslation } from 'next-i18next'; import { Container, Segment } from 'semantic-ui-react'; import { CurrentDate } from '../components/shared/CurrentDate'; import { Header } from '../components/shared/Header'; const NextApp: React.FC = (props) => { + const { t } = useTranslation(['common']); + return ( @@ -24,6 +26,11 @@ const NextApp: React.FC = (props) => { +
+
+ {t('common:copyright', { year: 2021 })} +
+ http://www.lingoes.net/en/translator/langcode.htm ); diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index f04ca47..0dc9940 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { MainLayout } from '../../components/shared/main-layout/MainLayout'; import { GetServerSideProps, NextPage } from 'next'; import { AboutPage } from '../../components/pages/about-page/AboutPage'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { typedServerSideTranslations } from '../../utils/i18n.utils'; interface IProps {} @@ -16,7 +16,7 @@ const AboutRoute: NextPage = (props) => { export const getServerSideProps: GetServerSideProps = async (context) => ({ props: { - ...(await serverSideTranslations(context.locale!, ['about', 'common'])), + ...(await typedServerSideTranslations(context.locale!, ['about', 'common'])), }, }); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7fbaabf..661a408 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { MainLayout } from '../components/shared/main-layout/MainLayout'; import { IndexPage } from '../components/pages/index-page/IndexPage'; import { GetServerSideProps, NextPage } from 'next'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { typedServerSideTranslations } from '../utils/i18n.utils'; interface IProps {} @@ -16,7 +16,7 @@ const IndexRoute: NextPage = (props) => { export const getServerSideProps: GetServerSideProps = async (context) => ({ props: { - ...(await serverSideTranslations(context.locale!, ['index', 'common'])), + ...(await typedServerSideTranslations(context.locale!, ['index', 'common'])), }, }); diff --git a/src/types/react-i18next.d.ts b/src/types/react-i18next.d.ts new file mode 100644 index 0000000..169426d --- /dev/null +++ b/src/types/react-i18next.d.ts @@ -0,0 +1,18 @@ +import 'react-i18next'; +import common from '../../public/static/locales/en/common.json'; +import index from '../../public/static/locales/en/index.json'; +import about from '../../public/static/locales/en/about.json'; + +declare module 'react-i18next' { + interface CustomTypeOptions { + defaultNS: 'common'; + resources: { + common: typeof common; + index: typeof index; + about: typeof about; + }; + } + + export type AppI18nNamespaces = keyof CustomTypeOptions['resources'] & string; +} + diff --git a/src/utils/i18n.utils.ts b/src/utils/i18n.utils.ts new file mode 100644 index 0000000..bc07a21 --- /dev/null +++ b/src/utils/i18n.utils.ts @@ -0,0 +1,6 @@ +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { AppI18nNamespaces } from 'react-i18next'; + +export const typedServerSideTranslations = (locale: string, keys: AppI18nNamespaces[]) => { + return serverSideTranslations(locale as string, keys); +}; diff --git a/yarn.lock b/yarn.lock index 528ecbd..4dc8299 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3316,7 +3316,7 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== -react-i18next@^11.8.13: +react-i18next@11.11.0, react-i18next@^11.8.13: version "11.11.0" resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.0.tgz#2f7c6cb4f81f94d1728a02d60e4bb5216709f942" integrity sha512-p1jHmoyJgDFQmyubUEjrx6kCsr1izW/C8i9pOiJy+9lJqLYwNA8sElVplm0VAnop3kH68edT0/g3wB3UvAcRCQ== From 5685d04a11864b39a3c1ff5251c8a98f7324ab54 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Fri, 25 Jun 2021 21:43:11 -0500 Subject: [PATCH 06/10] remove package --- package.json | 1 - yarn.lock | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 7e664f9..b2ab34b 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "next-i18next": "8.5.1", "react": "17.0.2", "react-dom": "17.0.2", - "react-i18next": "11.11.0", "semantic-ui-css": "2.4.1", "semantic-ui-react": "2.0.3" }, diff --git a/yarn.lock b/yarn.lock index 4dc8299..528ecbd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3316,7 +3316,7 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== -react-i18next@11.11.0, react-i18next@^11.8.13: +react-i18next@^11.8.13: version "11.11.0" resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.0.tgz#2f7c6cb4f81f94d1728a02d60e4bb5216709f942" integrity sha512-p1jHmoyJgDFQmyubUEjrx6kCsr1izW/C8i9pOiJy+9lJqLYwNA8sElVplm0VAnop3kH68edT0/g3wB3UvAcRCQ== From 54462426f7590572dc955a25d5fea2657bff8faf Mon Sep 17 00:00:00 2001 From: robertsavian Date: Mon, 28 Jun 2021 15:32:22 -0500 Subject: [PATCH 07/10] plural --- public/static/locales/en/index.json | 8 +++++++- src/components/pages/index-page/IndexPage.tsx | 6 +++++- src/components/shared/Header.tsx | 1 - 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/public/static/locales/en/index.json b/public/static/locales/en/index.json index 85bd41b..834e12d 100644 --- a/public/static/locales/en/index.json +++ b/public/static/locales/en/index.json @@ -1,3 +1,9 @@ { - "welcomeMessage": "Hi, welcome!" + "welcomeMessage": "Hi, welcome!", + "nested": { + "one": "One It is", + "two": "Two There We Go" + }, + "cartItems": "{{ count }} item in cart", + "cartItems_plural": "{{ count }} items in cart" } diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 4dc0ffb..808d8f4 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -10,7 +10,11 @@ export const IndexPage: React.FC = (props) => { return (
{t('common:home')}
-
{t('index:welcomeMessage')}
+

{t('index:welcomeMessage')}

+

{t('index:cartItems', { count: 1 })}

+

{t('index:cartItems', { count: 3 })}

+

{t('index:nested.one')}

+

{t('index:nested.two')}

); }; diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx index b6a14f2..446f4cd 100644 --- a/src/components/shared/Header.tsx +++ b/src/components/shared/Header.tsx @@ -5,7 +5,6 @@ import Link from 'next/link'; import { useTranslation } from 'next-i18next'; import { Routes } from '../../constants/Routes'; import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic'; -import { AppI18nNamespaces, TFunction } from 'react-i18next'; export const Header = () => { const { pathname } = useRouter(); From 2fe349a7f63268e1ed59e3e6f6dc907813abc841 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Mon, 28 Jun 2021 15:47:29 -0500 Subject: [PATCH 08/10] Rename namespaces --- next-i18next.config.js | 1 + .../locales/en/{about.json => AboutPage.json} | 0 .../locales/en/{common.json => CommonText.json} | 0 .../locales/en/{index.json => IndexPage.json} | 0 .../locales/es/{about.json => AboutPage.json} | 0 .../locales/es/{common.json => CommonText.json} | 0 .../locales/es/{index.json => IndexPage.json} | 0 .../locales/nl/{about.json => AboutPage.json} | 0 .../locales/nl/{common.json => CommonText.json} | 0 .../locales/nl/{index.json => IndexPage.json} | 0 .../locales/no/{about.json => AboutPage.json} | 0 .../locales/no/{common.json => CommonText.json} | 0 .../locales/no/{index.json => IndexPage.json} | 0 src/components/pages/about-page/AboutPage.tsx | 6 +++--- src/components/pages/index-page/IndexPage.tsx | 14 +++++++------- src/components/shared/Header.tsx | 6 +++--- src/pages/_app.tsx | 4 ++-- src/pages/about/index.tsx | 2 +- src/pages/index.tsx | 2 +- src/types/react-i18next.d.ts | 14 +++++++------- 20 files changed, 25 insertions(+), 24 deletions(-) rename public/static/locales/en/{about.json => AboutPage.json} (100%) rename public/static/locales/en/{common.json => CommonText.json} (100%) rename public/static/locales/en/{index.json => IndexPage.json} (100%) rename public/static/locales/es/{about.json => AboutPage.json} (100%) rename public/static/locales/es/{common.json => CommonText.json} (100%) rename public/static/locales/es/{index.json => IndexPage.json} (100%) rename public/static/locales/nl/{about.json => AboutPage.json} (100%) rename public/static/locales/nl/{common.json => CommonText.json} (100%) rename public/static/locales/nl/{index.json => IndexPage.json} (100%) rename public/static/locales/no/{about.json => AboutPage.json} (100%) rename public/static/locales/no/{common.json => CommonText.json} (100%) rename public/static/locales/no/{index.json => IndexPage.json} (100%) diff --git a/next-i18next.config.js b/next-i18next.config.js index 55c454f..0daf708 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -4,6 +4,7 @@ module.exports = { i18n: { locales: ['en', 'nl', 'no', 'es'], defaultLocale: 'en', + defaultNS: 'CommonText', localePath: path.resolve('./public/static/locales'), }, }; diff --git a/public/static/locales/en/about.json b/public/static/locales/en/AboutPage.json similarity index 100% rename from public/static/locales/en/about.json rename to public/static/locales/en/AboutPage.json diff --git a/public/static/locales/en/common.json b/public/static/locales/en/CommonText.json similarity index 100% rename from public/static/locales/en/common.json rename to public/static/locales/en/CommonText.json diff --git a/public/static/locales/en/index.json b/public/static/locales/en/IndexPage.json similarity index 100% rename from public/static/locales/en/index.json rename to public/static/locales/en/IndexPage.json diff --git a/public/static/locales/es/about.json b/public/static/locales/es/AboutPage.json similarity index 100% rename from public/static/locales/es/about.json rename to public/static/locales/es/AboutPage.json diff --git a/public/static/locales/es/common.json b/public/static/locales/es/CommonText.json similarity index 100% rename from public/static/locales/es/common.json rename to public/static/locales/es/CommonText.json diff --git a/public/static/locales/es/index.json b/public/static/locales/es/IndexPage.json similarity index 100% rename from public/static/locales/es/index.json rename to public/static/locales/es/IndexPage.json diff --git a/public/static/locales/nl/about.json b/public/static/locales/nl/AboutPage.json similarity index 100% rename from public/static/locales/nl/about.json rename to public/static/locales/nl/AboutPage.json diff --git a/public/static/locales/nl/common.json b/public/static/locales/nl/CommonText.json similarity index 100% rename from public/static/locales/nl/common.json rename to public/static/locales/nl/CommonText.json diff --git a/public/static/locales/nl/index.json b/public/static/locales/nl/IndexPage.json similarity index 100% rename from public/static/locales/nl/index.json rename to public/static/locales/nl/IndexPage.json diff --git a/public/static/locales/no/about.json b/public/static/locales/no/AboutPage.json similarity index 100% rename from public/static/locales/no/about.json rename to public/static/locales/no/AboutPage.json diff --git a/public/static/locales/no/common.json b/public/static/locales/no/CommonText.json similarity index 100% rename from public/static/locales/no/common.json rename to public/static/locales/no/CommonText.json diff --git a/public/static/locales/no/index.json b/public/static/locales/no/IndexPage.json similarity index 100% rename from public/static/locales/no/index.json rename to public/static/locales/no/IndexPage.json diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx index 400cab9..05d4e74 100644 --- a/src/components/pages/about-page/AboutPage.tsx +++ b/src/components/pages/about-page/AboutPage.tsx @@ -5,12 +5,12 @@ import { Header } from 'semantic-ui-react'; interface IProps {} export const AboutPage: React.FC = (props) => { - const { t } = useTranslation(['common', 'about']); + const { t } = useTranslation(['CommonText', 'AboutPage']); return ( <> -
{t('common:about')}
-
{t('about:aboutMessage')}
+
{t('CommonText:about')}
+
{t('AboutPage:aboutMessage')}
); }; diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 808d8f4..2b12660 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -5,16 +5,16 @@ import { Header } from 'semantic-ui-react'; interface IProps {} export const IndexPage: React.FC = (props) => { - const { t } = useTranslation(['common', 'index']); + const { t } = useTranslation(['CommonText', 'IndexPage']); return (
-
{t('common:home')}
-

{t('index:welcomeMessage')}

-

{t('index:cartItems', { count: 1 })}

-

{t('index:cartItems', { count: 3 })}

-

{t('index:nested.one')}

-

{t('index:nested.two')}

+
{t('CommonText:home')}
+

{t('IndexPage:welcomeMessage')}

+

{t('IndexPage:cartItems', { count: 1 })}

+

{t('IndexPage:cartItems', { count: 3 })}

+

{t('IndexPage:nested.one')}

+

{t('IndexPage:nested.two')}

); }; diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx index 446f4cd..08bb193 100644 --- a/src/components/shared/Header.tsx +++ b/src/components/shared/Header.tsx @@ -8,11 +8,11 @@ import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic'; export const Header = () => { const { pathname } = useRouter(); - const { t } = useTranslation(['common']); + const { t } = useTranslation(['CommonText']); const buttons: { path: Routes; text: string; icon: SemanticICONS }[] = [ - { path: Routes.Index, text: 'common:home', icon: 'home' }, - { path: Routes.About, text: 'common:about', icon: 'question' }, + { path: Routes.Index, text: 'CommonText:home', icon: 'home' }, + { path: Routes.About, text: 'CommonText:about', icon: 'question' }, ]; return ( diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d303b40..a48ae66 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,7 +10,7 @@ import { CurrentDate } from '../components/shared/CurrentDate'; import { Header } from '../components/shared/Header'; const NextApp: React.FC = (props) => { - const { t } = useTranslation(['common']); + const { t } = useTranslation(['CommonText']); return ( @@ -28,7 +28,7 @@ const NextApp: React.FC = (props) => {
- {t('common:copyright', { year: 2021 })} + {t('CommonText:copyright', { year: 2021 })}
http://www.lingoes.net/en/translator/langcode.htm diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index 0dc9940..217e1d2 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -16,7 +16,7 @@ const AboutRoute: NextPage = (props) => { export const getServerSideProps: GetServerSideProps = async (context) => ({ props: { - ...(await typedServerSideTranslations(context.locale!, ['about', 'common'])), + ...(await typedServerSideTranslations(context.locale!, ['AboutPage', 'CommonText'])), }, }); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 661a408..617a17b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,7 +16,7 @@ const IndexRoute: NextPage = (props) => { export const getServerSideProps: GetServerSideProps = async (context) => ({ props: { - ...(await typedServerSideTranslations(context.locale!, ['index', 'common'])), + ...(await typedServerSideTranslations(context.locale!, ['IndexPage', 'CommonText'])), }, }); diff --git a/src/types/react-i18next.d.ts b/src/types/react-i18next.d.ts index 169426d..07046bf 100644 --- a/src/types/react-i18next.d.ts +++ b/src/types/react-i18next.d.ts @@ -1,15 +1,15 @@ import 'react-i18next'; -import common from '../../public/static/locales/en/common.json'; -import index from '../../public/static/locales/en/index.json'; -import about from '../../public/static/locales/en/about.json'; +import CommonText from '../../public/static/locales/en/CommonText.json'; +import IndexPage from '../../public/static/locales/en/IndexPage.json'; +import AboutPage from '../../public/static/locales/en/AboutPage.json'; declare module 'react-i18next' { interface CustomTypeOptions { - defaultNS: 'common'; + defaultNS: 'CommonText'; resources: { - common: typeof common; - index: typeof index; - about: typeof about; + CommonText: typeof CommonText; + IndexPage: typeof IndexPage; + AboutPage: typeof AboutPage; }; } From bb69caade216a28238b0543adc1eccb81396dfe8 Mon Sep 17 00:00:00 2001 From: robertsavian Date: Tue, 29 Jun 2021 07:45:14 -0500 Subject: [PATCH 09/10] Currency --- src/components/shared/Currency.tsx | 17 ++++++++++ src/components/shared/CurrentDate.tsx | 21 +++++++++++- src/components/shared/Header.tsx | 5 ++- src/components/shared/LocalePicker.tsx | 5 ++- src/pages/_app.tsx | 2 ++ src/utils/number.utils.ts | 45 ++++++++++++++++++++++++++ 6 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 src/components/shared/Currency.tsx create mode 100644 src/utils/number.utils.ts diff --git a/src/components/shared/Currency.tsx b/src/components/shared/Currency.tsx new file mode 100644 index 0000000..58a7ed2 --- /dev/null +++ b/src/components/shared/Currency.tsx @@ -0,0 +1,17 @@ +import { Segment, Label } from 'semantic-ui-react'; +import React from 'react'; +import { formatCurrency } from '../../utils/number.utils'; + +interface IProps {} + +export const Currency: React.FC = (props) => { + return ( + + + ); +}; + +// Examples: $12.50; 12,50 € + +// Examples: $12.50 CAD; 12,50 € EUR diff --git a/src/components/shared/CurrentDate.tsx b/src/components/shared/CurrentDate.tsx index 916e409..606b67d 100644 --- a/src/components/shared/CurrentDate.tsx +++ b/src/components/shared/CurrentDate.tsx @@ -1,8 +1,11 @@ import { Segment, Label } from 'semantic-ui-react'; import { DateTime } from 'luxon'; import { useRouter } from 'next/router'; +import React from 'react'; -export const CurrentDate = ({}) => { +interface IProps {} + +export const CurrentDate: React.FC = (props) => { const router = useRouter(); const dateTime = DateTime.local() @@ -19,3 +22,19 @@ export const CurrentDate = ({}) => { ); }; + +// Thursday, October 15, 2015 +// October 15, 2015 +// Oct 15, 2015 + +/* +https://www.shopify.com/partners/blog/liquid-date-format +{{ article.published_at | date: format: 'default' }} +<-- Tue, Apr 30, 2019, 6:55 am -0400 --> + +{{ article.published_at | date: format: 'short' }} +<-- 30 Apr 06:55 --> + +{{ article.published_at | date: format: 'long' }} +<-- April 30, 2019 06:55 --> +*/ diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx index 08bb193..672dc51 100644 --- a/src/components/shared/Header.tsx +++ b/src/components/shared/Header.tsx @@ -5,8 +5,11 @@ import Link from 'next/link'; import { useTranslation } from 'next-i18next'; import { Routes } from '../../constants/Routes'; import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic'; +import React from 'react'; -export const Header = () => { +interface IProps {} + +export const Header: React.FC = (props) => { const { pathname } = useRouter(); const { t } = useTranslation(['CommonText']); diff --git a/src/components/shared/LocalePicker.tsx b/src/components/shared/LocalePicker.tsx index 99c5dcd..ac4a222 100644 --- a/src/components/shared/LocalePicker.tsx +++ b/src/components/shared/LocalePicker.tsx @@ -1,8 +1,11 @@ import { Menu, Flag, FlagNameValues } from 'semantic-ui-react'; import Link from 'next/link'; import { useRouter } from 'next/router'; +import React from 'react'; -export const LocalePicker = () => { +interface IProps {} + +export const LocalePicker: React.FC = (props) => { const router = useRouter(); return ( diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a48ae66..5152754 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -8,6 +8,7 @@ import { appWithTranslation, useTranslation } from 'next-i18next'; import { Container, Segment } from 'semantic-ui-react'; import { CurrentDate } from '../components/shared/CurrentDate'; import { Header } from '../components/shared/Header'; +import { Currency } from '../components/shared/Currency'; const NextApp: React.FC = (props) => { const { t } = useTranslation(['CommonText']); @@ -23,6 +24,7 @@ const NextApp: React.FC = (props) => {
+ diff --git a/src/utils/number.utils.ts b/src/utils/number.utils.ts new file mode 100644 index 0000000..472e361 --- /dev/null +++ b/src/utils/number.utils.ts @@ -0,0 +1,45 @@ +enum CurrencyStyle { + Long, + Short, + Humanize, + Time, + Raw, +} + +export const formatNumber = () => { + return 0; +}; + +export const formatCurrency = (value: number) => { + const number = 123456.789; + + console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); + console.log( + new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumSignificantDigits: 2 }).format(number) + ); + // expected output: "123.456,79 €" + + // the Japanese yen doesn't use a minor unit + console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)); + // expected output: "￥123,457" + + // limit to three significant digits + console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)); + // expected output: "1,23,000" + return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number); +}; + +export const formatPercentage = () => { + return 0; +}; + +enum DateStyle { + Long, + Short, + Humanize, + Time, + Raw, +} +export const formatDate = (date: string, style: DateStyle): string => { + return '0'; +}; From 8557b8275cbd76e2472654d66c89cbda722fc39f Mon Sep 17 00:00:00 2001 From: robertsavian Date: Tue, 29 Jun 2021 08:30:53 -0500 Subject: [PATCH 10/10] Currency --- src/pages/_app.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5152754..4c2492e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -8,7 +8,6 @@ import { appWithTranslation, useTranslation } from 'next-i18next'; import { Container, Segment } from 'semantic-ui-react'; import { CurrentDate } from '../components/shared/CurrentDate'; import { Header } from '../components/shared/Header'; -import { Currency } from '../components/shared/Currency'; const NextApp: React.FC = (props) => { const { t } = useTranslation(['CommonText']); @@ -24,7 +23,7 @@ const NextApp: React.FC = (props) => {
- + {/**/}