From 33a5b10fe355584b8e2f07b78369fab93004b220 Mon Sep 17 00:00:00 2001 From: Sebastian Seedorf Date: Fri, 19 Aug 2022 19:06:36 +0200 Subject: [PATCH] Added internationalization --- components/contexts/GroupProvider.tsx | 42 +++---- components/home/GroupBox/GroupBox.tsx | 4 +- components/home/Home.tsx | 9 +- components/shared/I18n/I18n.tsx | 11 ++ .../visualize/NodeOverview/NodeOverview.tsx | 4 +- next.config.js | 4 + package.json | 1 + pages/_app.tsx | 12 +- res/i18n/de.json | 3 + res/i18n/en.json | 6 + res/i18n/nl.json | 1 + src/i18n.ts | 11 ++ yarn.lock | 118 ++++++++++++++++-- 13 files changed, 187 insertions(+), 39 deletions(-) create mode 100644 components/shared/I18n/I18n.tsx create mode 100644 res/i18n/de.json create mode 100644 res/i18n/en.json create mode 100644 res/i18n/nl.json create mode 100644 src/i18n.ts diff --git a/components/contexts/GroupProvider.tsx b/components/contexts/GroupProvider.tsx index d18b554..7469543 100644 --- a/components/contexts/GroupProvider.tsx +++ b/components/contexts/GroupProvider.tsx @@ -10,7 +10,7 @@ import { SetFactoryArrayBody, UploadDataBody } from '../../src/types/ApiSchemasFrontend' -import { NextRouter, useRouter } from 'next/router' +import { useRouter } from 'next/router' interface Props { children: ReactNodeLike @@ -93,8 +93,8 @@ interface StoredFile { excludedSuggestions: string[] } -export const postFetchJson = async (router: NextRouter, url: string, body: unknown) => { - const res = await fetch(router.basePath + url, { +export const postFetchJson = async (base: string | undefined, url: string, body: unknown) => { + const res = await fetch((base ?? '') + url, { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -105,7 +105,7 @@ export const postFetchJson = async (router: NextRouter, url: string, body: unkno } export const GroupProvider: FC = ({ children, id, initial }) => { - const router = useRouter() + const { basePath, reload, query } = useRouter() const [excludedSuggestions, _setExcludedSuggestions] = useState(initial.ignored) const [basicValues, _setBasicValues] = useState(initial.base) const [groups, setGroups] = useState>(initial.groups) @@ -125,23 +125,23 @@ export const GroupProvider: FC = ({ children, id, initial }) => { const setExcludedSuggestions = useCallback( val => { _setExcludedSuggestions(val) - postFetchJson(router, `/api/${fixedEncodeURIComponent(id)}/factories`, { + postFetchJson(basePath, `/api/${fixedEncodeURIComponent(id)}/factories`, { type: 'ignored', factories: val } as SetFactoryArrayBody).catch(console.error) }, - [id, router] + [id, basePath] ) const setBasicValues = useCallback( val => { _setBasicValues(val) - postFetchJson(router, `/api/${fixedEncodeURIComponent(id)}/factories`, { + postFetchJson(basePath, `/api/${fixedEncodeURIComponent(id)}/factories`, { type: 'base', factories: val } as SetFactoryArrayBody).catch(console.error) }, - [id, router] + [id, basePath] ) const addGroup = useCallback( @@ -154,13 +154,13 @@ export const GroupProvider: FC = ({ children, id, initial }) => { }) ;(async () => { await postFetchJson( - router, + basePath, `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/add`, {} ) if (exports.length) { await postFetchJson( - router, + basePath, `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, { type: 'exports', @@ -170,7 +170,7 @@ export const GroupProvider: FC = ({ children, id, initial }) => { } if (malls.length) { await postFetchJson( - router, + basePath, `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, { type: 'malls', @@ -181,7 +181,7 @@ export const GroupProvider: FC = ({ children, id, initial }) => { })().catch(console.error) return true }, - [groups, id, router] + [groups, id, basePath] ) const removeGroup = useCallback( (name: string) => { @@ -191,12 +191,12 @@ export const GroupProvider: FC = ({ children, id, initial }) => { return { ...g } }) postFetchJson( - router, + basePath, `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/remove`, {} ).catch(console.error) }, - [id, router] + [id, basePath] ) const renameGroup = useCallback( (name: string, newName: string) => { @@ -209,14 +209,14 @@ export const GroupProvider: FC = ({ children, id, initial }) => { return { ...g } }) postFetchJson( - router, + basePath, `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/rename`, { newName } as GroupRenameBody ).catch(console.error) }, - [groups, id, router] + [groups, id, basePath] ) const setFactories = useCallback( @@ -227,7 +227,7 @@ export const GroupProvider: FC = ({ children, id, initial }) => { return { ...g } }) postFetchJson( - router, + basePath, `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, { type, @@ -235,7 +235,7 @@ export const GroupProvider: FC = ({ children, id, initial }) => { } as GroupSetFactoryArrayBody ).catch(console.error) }, - [id, router] + [id, basePath] ) const getInputType = useCallback( (uid: string) => { @@ -263,14 +263,14 @@ export const GroupProvider: FC = ({ children, id, initial }) => { const uncompressed = pako.inflate(compressed, { to: 'string' }) const value: StoredFile = JSON.parse(uncompressed) if (!value.groups || !value.basicValues || !value.excludedSuggestions) return - await postFetchJson(router, `/api/${router.query.id}/upload`, { + await postFetchJson(basePath, `/api/${query.id}/upload`, { groups: value.groups, ignored: value.excludedSuggestions, base: value.basicValues } as UploadDataBody) - router.reload() + reload() }, - [router] + [basePath, query.id, reload] ) const value: GroupContextType = useMemo( diff --git a/components/home/GroupBox/GroupBox.tsx b/components/home/GroupBox/GroupBox.tsx index 2623e80..76007d0 100644 --- a/components/home/GroupBox/GroupBox.tsx +++ b/components/home/GroupBox/GroupBox.tsx @@ -15,7 +15,7 @@ interface Props { } const GroupBoxBase: FC = ({ group }) => { - const router = useRouter() + const { query } = useRouter() const { factories, findFactory } = useFactories() const { doNotSuggest, @@ -88,7 +88,7 @@ const GroupBoxBase: FC = ({ group }) => { 👁 diff --git a/components/home/Home.tsx b/components/home/Home.tsx index 03f96f1..8f964f1 100644 --- a/components/home/Home.tsx +++ b/components/home/Home.tsx @@ -9,9 +9,10 @@ import { Preferences } from './Preferences/Preferences' import { download, streamToArrayBuffer } from '../../src/download' import Link from 'next/link' import { useRouter } from 'next/router' +import { I18n } from '../shared/I18n/I18n' export const Home: FC = () => { - const router = useRouter() + const { query } = useRouter() const { factories } = useFactories() const { groups, addGroup, doNotSuggest, ignoredFactories, setIgnoredFactories, store, load } = useGroups() @@ -32,7 +33,9 @@ export const Home: FC = () => { return (
-

Factorio Microservices

+

+ +