Added internationalization

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<Props> = ({ children, id, initial }) => {
-  const router = useRouter()
+  const { basePath, reload, query } = useRouter()
   const [excludedSuggestions, _setExcludedSuggestions] = useState<string[]>(initial.ignored)
   const [basicValues, _setBasicValues] = useState<string[]>(initial.base)
   const [groups, setGroups] = useState<Dict<Group>>(initial.groups)
@@ -125,23 +125,23 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
   const setExcludedSuggestions = useCallback<typeof _setExcludedSuggestions>(
     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<typeof _setBasicValues>(
     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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ children, id, initial }) => {
         return { ...g }
       })
       postFetchJson(
-        router,
+        basePath,
         `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
         {
           type,
@@ -235,7 +235,7 @@ export const GroupProvider: FC<Props> = ({ 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<Props> = ({ 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(

components/home/GroupBox/GroupBox.tsx

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
-  const router = useRouter()
+  const { query } = useRouter()
   const { factories, findFactory } = useFactories()
   const {
     doNotSuggest,
@@ -88,7 +88,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       <Link
         href={{
           pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`,
-          query: router.query
+          query
         }}
       >
         👁

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 (
     <main>
-      <h1>Factorio Microservices</h1>
+      <h1>
+        <I18n id={'page.home.title'} />
+      </h1>
       <button
         onClick={() => {
           download('factorio-microservices.bin', store())
@@ -55,7 +58,7 @@ export const Home: FC = () => {
           }
         }}
       />
-      <Link href={{ pathname: '/visualize', query: router.query }}>Visualize</Link>
+      <Link href={{ pathname: '/visualize', query }}>Visualize</Link>
       <Preferences />
       <fieldset>
         <legend>Missing export factories</legend>

components/shared/I18n/I18n.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useMessages } from '../../../src/i18n'
+
+interface Props {
+  id: keyof ReturnType<typeof useMessages>['en']
+}
+
+export const I18n: FC<Props> = ({ id }) => {
+  return <FormattedMessage id={id} />
+}

components/visualize/NodeOverview/NodeOverview.tsx

@@ -17,7 +17,7 @@ interface Props extends HTMLProps<HTMLDivElement> {
 }
 
 export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
-  const router = useRouter()
+  const { query } = useRouter()
   return (
     <div {...props} className={cx(className, styles.root)}>
       <h3>
@@ -25,7 +25,7 @@ export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
           <Link
             href={{
               pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
-              query: router.query
+              query
             }}
           >
             👁