Added German language

components/contexts/FactoryProvider/index.tsx

@@ -35,20 +35,21 @@ export const FactoryProvider: FC<Props> = ({ children }) => {
   const locale = useLocale()
   const internationalizedFactories = useMemo(() => {
     if (locale !== 'en')
-      factories.map(
-        factory => (factory.name = factoryNames[locale]?.[factory.href] ?? factory.name)
-      )
+      return factories.map(factory => ({
+        ...factory,
+        name: factoryNames[locale]?.[factory.href] ?? factory.name
+      }))
     return factories
   }, [locale])
 
   const findFactory = useMemo(() => {
     const detailsMap = Object.fromEntries(
-      factories.map((detail: EnrichedEntity) => [detail.href, detail])
+      internationalizedFactories.map((detail: EnrichedEntity) => [detail.href, detail])
     )
     return (uid: string): EnrichedEntity | undefined => {
       return detailsMap[uid]
     }
-  }, [])
+  }, [internationalizedFactories])
 
   const value: FactoryContextType = useMemo(
     () => ({

components/home/GroupBox/GroupBox.tsx

@@ -9,12 +9,15 @@ import { fixedEncodeURIComponent, uniquify } from '../../../src/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useFactories } from '../../contexts/FactoryProvider'
+import { i18n, I18n } from '../../shared/I18n/I18n'
+import { useIntl } from 'react-intl'
 
 interface Props {
   group: Group
 }
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
+  const intl = useIntl()
   const { query } = useRouter()
   const { factories, findFactory } = useFactories()
   const {
@@ -99,19 +102,25 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
         onClick={() => (!isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name))}
         style={{ display: 'block' }}
       >
-        {isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
+        {isDeleteConfirm ? i18n(intl, 'page.home.group.delete.confirmation') : 'X'}
       </button>
-      <h4>Exported Factories</h4>
+      <h4>
+        <I18n id={'page.home.group.item.export'} />
+      </h4>
       <FactorySelect
         id={name + '-exports'}
         factories={exports}
         onSetFactories={setExportFactories}
       />
-      <h4>Mall Factories</h4>
+      <h4>
+        <I18n id={'page.home.group.item.mall'} />
+      </h4>
       <FactorySelect id={name + '-malls'} factories={malls} onSetFactories={setMallFactories} />
       {inputs.length ? (
         <>
-          <h4>Input Factories ({inputs.length})</h4>
+          <h4>
+            <I18n id={'page.home.group.item.input'} /> ({inputs.length})
+          </h4>
           <div className={styles.flex}>
             {inputs.map(input => (
               <EntitySpan
@@ -130,7 +139,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       ) : null}
       {intermediates.length ? (
         <>
-          <h4>Intermediate Factories ({intermediates.length})</h4>
+          <h4>
+            <I18n id={'page.home.group.item.intermediate'} /> ({intermediates.length})
+          </h4>
           <div className={styles.flex}>
             {intermediates.map(intermediate => (
               <EntitySpan
@@ -144,7 +155,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       ) : null}
       {suggestionsExport.length ? (
         <>
-          <h4>Suggestions (Export)</h4>
+          <h4>
+            <I18n id={'page.home.group.item.suggestion.export'} />
+          </h4>
           <div className={styles.flex}>
             {suggestionsExport.map(suggestion => (
               <EntitySpan
@@ -164,7 +177,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       ) : null}
       {suggestionMall.length ? (
         <>
-          <h4>Suggestions (Mall)</h4>
+          <h4>
+            <I18n id={'page.home.group.item.suggestion.mall'} />
+          </h4>
           <div className={styles.flex}>
             {suggestionMall.map(suggestion => (
               <EntitySpan

components/home/Home.tsx

@@ -36,6 +36,9 @@ export const Home: FC = () => {
       <h1>
         <I18n id={'page.home.title'} />
       </h1>
+      <p>
+        <I18n id={'page.home.description'} />
+      </p>
       <button
         onClick={() => {
           download('factorio-microservices.bin', store())
@@ -61,7 +64,12 @@ export const Home: FC = () => {
       <Link href={{ pathname: '/visualize', query }}>Visualize</Link>
       <Preferences />
       <fieldset>
-        <legend>Missing export factories</legend>
+        <legend>
+          <I18n id={'page.home.group.missing.export.title'} />
+        </legend>
+        <span>
+          <I18n id={'page.home.group.missing.export.description'} />
+        </span>
         <div className={styles.missingFactories}>
           {missingExport.map(missing => (
             <EntitySpan
@@ -84,7 +92,12 @@ export const Home: FC = () => {
         </div>
       </fieldset>
       <fieldset>
-        <legend>Missing mall factories</legend>
+        <legend>
+          <I18n id={'page.home.group.missing.mall.title'} />
+        </legend>
+        <span>
+          <I18n id={'page.home.group.missing.mall.description'} />
+        </span>
         <div className={styles.missingFactories}>
           {missingMall.map(missing => (
             <EntitySpan

components/home/Preferences/Preferences.tsx

@@ -1,15 +1,25 @@
 import { FC, useState } from 'react'
 import { FactorySelect } from '../FactorySelect/FactorySelect'
 import { useGroups } from '../../contexts/GroupProvider'
+import { i18n, I18n } from '../../shared/I18n/I18n'
+import { useIntl } from 'react-intl'
 
 export const Preferences: FC = () => {
+  const intl = useIntl()
   const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
     useGroups()
-  const [newGroupValue, setNewGroupValue] = useState('New group')
+  const [newGroupValue, setNewGroupValue] = useState(
+    i18n(intl, 'page.home.group.add.default_group_name')
+  )
   return (
     <>
       <fieldset>
-        <legend>Basic Values</legend>
+        <legend>
+          <I18n id={'page.home.pref.basic.title'} />
+        </legend>
+        <span>
+          <I18n id={'page.home.pref.basic.description'} />
+        </span>
         <FactorySelect
           id={'baseFactoriesSelect'}
           factories={baseFactories}
@@ -18,7 +28,12 @@ export const Preferences: FC = () => {
         />
       </fieldset>
       <fieldset>
-        <legend>Ignored Values</legend>
+        <legend>
+          <I18n id={'page.home.pref.ignored.title'} />
+        </legend>
+        <span>
+          <I18n id={'page.home.pref.ignored.description'} />
+        </span>
         <FactorySelect
           id={'ignoredFactoriesSelect'}
           factories={ignoredFactories}
@@ -26,7 +41,9 @@ export const Preferences: FC = () => {
         />
       </fieldset>
       <fieldset>
-        <legend>Add new groups</legend>
+        <legend>
+          <I18n id={'page.home.group.add.title'} />
+        </legend>
         <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)} />
         <button
           disabled={!newGroupValue}
@@ -35,7 +52,7 @@ export const Preferences: FC = () => {
             setNewGroupValue('New group')
           }}
         >
-          Add group &quot;{newGroupValue}&quot;
+          <I18n id={'page.home.group.add.button_text'} values={{ name: newGroupValue }} />
         </button>
       </fieldset>
     </>

components/shared/I18n/I18n.tsx

@@ -1,11 +1,20 @@
-import { FC } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { ComponentProps, FC } from 'react'
+import { FormattedMessage, IntlShape } from 'react-intl'
 import { useMessages } from '../../../src/i18n'
+import { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat'
 
-interface Props {
+interface Props extends ComponentProps<typeof FormattedMessage> {
   id: keyof ReturnType<typeof useMessages>['en']
 }
 
-export const I18n: FC<Props> = ({ id }) => {
-  return <FormattedMessage id={id} />
+export const I18n: FC<Props> = ({ children, ...props }) => {
+  return <FormattedMessage {...props}>{children}</FormattedMessage>
+}
+
+export const i18n = (
+  intl: IntlShape,
+  id: keyof ReturnType<typeof useMessages>['en'],
+  values?: Record<string, PrimitiveType | FormatXMLElementFn<string, string>>
+) => {
+  return intl.formatMessage({ id }, values, { ignoreTag: true })
 }