Added internationalization

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>