Finished translations / bug fixes

2022-08-20 14:47:04 +02:00
parent 664f766cb6
commit 2fd010e003
13 changed files with 162 additions and 66 deletions
--- a/components/home/EntitySpan/EntitySpan.tsx
+++ b/components/home/EntitySpan/EntitySpan.tsx
@@ -2,10 +2,11 @@ import { FC, HTMLProps, memo, useMemo } from 'react'
 import { EnrichedEntity } from '../../../src/types'
 import styles from './EntitySpan.module.css'
 import { RecipeSpan } from '../Recipe/Recipe'
-import { LeftClickIcon } from '../LeftClickIcon/LeftClickIcon'
+import { LeftClickIcon } from '../../icons/LeftClickIcon'
 import cx from 'classnames'
 import { EntityIcon } from '../EntityIcon/EntityIcon'
 import { useFactories } from '../../contexts/FactoryProvider'
+import { I18n } from '../../shared/I18n/I18n'

 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
  value: EnrichedEntity | string
@@ -16,7 +17,7 @@ interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
  className?: string
 }

-const EntitySpanUnmemo: FC<Props> = ({
+const EntitySpanBase: FC<Props> = ({
  className,
  value,
  state,
@@ -50,13 +51,17 @@ const EntitySpanUnmemo: FC<Props> = ({
      <div className={styles.tooltip}>
        {entity.recipe && (
          <>
-            <div className={styles.strong}>Recipe</div>
+            <div className={styles.strong}>
+              <I18n id={'page.home.tooltip.recipe'} />
+            </div>
            <RecipeSpan recipe={entity.recipe} />
          </>
        )}
        {entity.usedBy?.length ? (
          <>
-            <div className={styles.strong}>Used By</div>
+            <div className={styles.strong}>
+              <I18n id={'page.home.tooltip.used_by'} />
+            </div>
            <div className={styles.usedBy}>
              {entity.usedBy.map(used => (
                <EntityIcon value={used} key={used.name} />
@@ -66,7 +71,9 @@ const EntitySpanUnmemo: FC<Props> = ({
        ) : null}
        {(leftClickText || rightClickText) && (
          <>
-            <div className={styles.strong}>Actions</div>
+            <div className={styles.strong}>
+              <I18n id={'page.home.tooltip.actions'} />
+            </div>
            {leftClickText && (
              <div>
                <LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn} />{' '}
@@ -86,4 +93,4 @@ const EntitySpanUnmemo: FC<Props> = ({
  )
 }

-export const EntitySpan = memo(EntitySpanUnmemo)
+export const EntitySpan = memo(EntitySpanBase)
--- a/components/home/GroupBox/GroupBox.tsx
+++ b/components/home/GroupBox/GroupBox.tsx
@@ -11,6 +11,7 @@ import { useRouter } from 'next/router'
 import { useFactories } from '../../contexts/FactoryProvider'
 import { i18n, I18n } from '../../shared/I18n/I18n'
 import { useIntl } from 'react-intl'
+import { GraphIcon } from '../../icons/GraphIcon'

 interface Props {
  group: Group
@@ -94,7 +95,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
          query
        }}
      >
-        👁
+        <a>
+          <GraphIcon />
+        </a>
      </Link>
      <button
        className={styles.quit}
@@ -119,7 +122,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
      {inputs.length ? (
        <>
          <h4>
-            <I18n id={'page.home.group.item.input'} /> ({inputs.length})
+            <I18n id={'page.home.group.item.input'} values={{ amount: inputs.length }} />
          </h4>
          <div className={styles.flex}>
            {inputs.map(input => (
@@ -131,7 +134,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
                  event.preventDefault()
                  setIgnoredFactories([...ignoredFactories, input])
                }}
-                rightClickText={'Exclude this recipe from suggestions'}
+                rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
              />
            ))}
          </div>
@@ -140,7 +143,10 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
      {intermediates.length ? (
        <>
          <h4>
-            <I18n id={'page.home.group.item.intermediate'} /> ({intermediates.length})
+            <I18n
+              id={'page.home.group.item.intermediate'}
+              values={{ amount: intermediates.length }}
+            />
          </h4>
          <div className={styles.flex}>
            {intermediates.map(intermediate => (
@@ -168,8 +174,8 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
                  event.preventDefault()
                  setIgnoredFactories([...ignoredFactories, suggestion.href])
                }}
-                leftClickText={'Add to exported factories'}
-                rightClickText={'Exclude this recipe from suggestions'}
+                leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_export')}
+                rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
              />
            ))}
          </div>
@@ -190,8 +196,8 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
                  event.preventDefault()
                  setIgnoredFactories([...ignoredFactories, suggestion.href])
                }}
-                leftClickText={'Add to mall factories'}
-                rightClickText={'Exclude this recipe from suggestions'}
+                leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_mall')}
+                rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
              />
            ))}
          </div>
--- a/components/home/Home.tsx
+++ b/components/home/Home.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo, useRef, useState } from 'react'
+import { ElementRef, FC, useMemo, useRef } from 'react'
 import { GroupBox } from './GroupBox/GroupBox'
 import styles from './Home.module.css'
 import { EnrichedEntity } from '../../src/types'
@@ -8,15 +8,17 @@ 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'
+import { i18n, I18n } from '../shared/I18n/I18n'
 import { useFactories } from '../contexts/FactoryProvider'
+import { GraphIcon } from '../icons/GraphIcon'
+import { useIntl } from 'react-intl'

 export const Home: FC = () => {
+  const intl = useIntl()
  const { query } = useRouter()
  const { factories } = useFactories()
-  const { groups, addGroup, doNotSuggest, ignoredFactories, setIgnoredFactories, store, load } =
-    useGroups()
-  const [newGroupValue, setNewGroupValue] = useState('New group')
+  const preferencesRef = useRef<ElementRef<typeof Preferences>>(null)
+  const { groups, doNotSuggest, ignoredFactories, setIgnoredFactories, store, load } = useGroups()
  const inputRef = useRef<HTMLInputElement>(null)

  const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
@@ -44,7 +46,7 @@ export const Home: FC = () => {
          download('factorio-microservices.bin', store())
        }}
      >
-        Store
+        <I18n id={'page.home.pref.download'} />
      </button>
      <input
        type={'file'}
@@ -61,8 +63,13 @@ export const Home: FC = () => {
          }
        }}
      />
-      <Link href={{ pathname: '/visualize', query }}>Visualize</Link>
-      <Preferences />
+      <Link href={{ pathname: '/visualize', query }}>
+        <a>
+          <I18n id={'page.home.pref.visualize'} />
+          <GraphIcon />
+        </a>
+      </Link>
+      <Preferences ref={preferencesRef} />
      <fieldset>
        <legend>
          <I18n id={'page.home.group.missing.export.title'} />
@@ -76,17 +83,14 @@ export const Home: FC = () => {
              key={missing.href}
              value={missing}
              onClick={() => {
-                addGroup(newGroupValue !== 'New group' ? newGroupValue : missing.name, [
-                  missing.href
-                ])
-                setNewGroupValue('New group')
+                preferencesRef.current?.addGroup(missing.name, [missing.href])
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
-              leftClickText={'Create a new group with this name and item as exported factory'}
-              rightClickText={'Exclude this recipe from suggestions'}
+              leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_new_export')}
+              rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
            />
          ))}
        </div>
@@ -104,19 +108,14 @@ export const Home: FC = () => {
              key={missing.href}
              value={missing}
              onClick={() => {
-                addGroup(
-                  newGroupValue !== 'New group' ? newGroupValue : missing.name,
-                  [],
-                  [missing.href]
-                )
-                setNewGroupValue('New group')
+                preferencesRef.current?.addGroup(missing.name, undefined, [missing.href])
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
-              leftClickText={'Create a new group with this name and item as mall factory'}
-              rightClickText={'Exclude this recipe from suggestions'}
+              leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_new_mall')}
+              rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
            />
          ))}
        </div>
--- a/components/home/LeftClickIcon/LeftClickIcon.tsx
+++ b/components/home/LeftClickIcon/LeftClickIcon.tsx
@@ -1,30 +0,0 @@
-import { FC } from 'react'
-
-interface Props {
-  className?: string
-  classBody?: string
-  classClick?: string
-}
-
-export const LeftClickIcon: FC<Props> = ({ className, classBody, classClick }) => {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      version='1.1'
-      x='0px'
-      y='0px'
-      viewBox='0 0 100 100'
-      className={className}
-    >
-      <path
-        className={classBody}
-        d='M51.552,8.117v32.554l-3.095,0.009c-9.203,0.027-17.447,0.297-24.509,0.803l-0.291,0.021  c-0.026,1.733-0.036,3.521-0.036,5.378c0,24.854,1.527,45,26.379,45c24.854,0,26.379-20.146,26.379-45  C76.379,22.563,74.903,8.701,51.552,8.117z'
-      />
-      <path
-        className={classClick}
-        id='click'
-        d='M48.448,37.577V8.117C27.971,8.629,24.313,19.354,23.727,38.388C29.914,37.945,38.002,37.607,48.448,37.577z'
-      />
-    </svg>
-  )
-}
--- a/components/home/Preferences/Preferences.tsx
+++ b/components/home/Preferences/Preferences.tsx
@@ -1,16 +1,28 @@
-import { FC, useState } from 'react'
+import { forwardRef, ForwardRefRenderFunction, useImperativeHandle, 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 = () => {
+interface Handle {
+  addGroup(preferredName: string, exported?: string[], mall?: string[]): boolean
+}
+
+const PreferencesBase: ForwardRefRenderFunction<Handle> = (_, forwardedRef) => {
  const intl = useIntl()
+  const DEFAULT_NAME = i18n(intl, 'page.home.group.add.default_group_name')
+  useImperativeHandle(forwardedRef, () => ({
+    addGroup(preferredName: string, exported?: string[], mall?: string[]) {
+      const name = newGroupValue !== DEFAULT_NAME ? newGroupValue : preferredName
+      const result = addGroup(name, exported, mall)
+      result && setNewGroupValue(DEFAULT_NAME)
+      return result
+    }
+  }))
+
  const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
    useGroups()
-  const [newGroupValue, setNewGroupValue] = useState(
-    i18n(intl, 'page.home.group.add.default_group_name')
-  )
+  const [newGroupValue, setNewGroupValue] = useState(DEFAULT_NAME)
  return (
    <>
      <fieldset>
@@ -49,7 +61,7 @@ export const Preferences: FC = () => {
          disabled={!newGroupValue}
          onClick={() => {
            addGroup(newGroupValue)
-            setNewGroupValue('New group')
+            setNewGroupValue(DEFAULT_NAME)
          }}
        >
          <I18n id={'page.home.group.add.button_text'} values={{ name: newGroupValue }} />
@@ -58,3 +70,5 @@ export const Preferences: FC = () => {
    </>
  )
 }
+
+export const Preferences = forwardRef(PreferencesBase)