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/contexts/GroupProvider.tsx
+++ b/components/contexts/GroupProvider.tsx
@@ -33,7 +33,7 @@ interface GroupContextType {
  setBaseFactories(factories: string[]): void

  groups: Dict<Group>
-  addGroup(name: string, exported?: string[], malls?: string[]): void
+  addGroup(name: string, exported?: string[], malls?: string[]): boolean
  removeGroup(name: string): void
  renameGroup(name: string, newName: string): void

@@ -60,7 +60,7 @@ const defaultValues: GroupContextType = {

  groups: {},
  addGroup() {
-    return
+    return false
  },
  removeGroup() {
    return
@@ -174,7 +174,7 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
            `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
            {
              type: 'malls',
-              factories: exports
+              factories: malls
            } as GroupSetFactoryArrayBody
          )
        }
--- 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/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)
--- a/components/icons/GraphIcon.tsx
+++ b/components/icons/GraphIcon.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react'
+import styles from './Icon.module.css'
+import cx from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GraphIcon: FC<Props> = ({ className }) => {
+  return (
+    <svg
+      version='1.1'
+      viewBox='0 0 50 50'
+      xmlSpace='preserve'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+      className={cx(styles.icon, className)}
+    >
+      <g id='Layer_1'>
+        <path d='M13,37H8V26h16v11h-5v12h12V37h-5V26h16v11h-5v12h12V37h-5V24H26V13h7V1H17v12h7v11H6v13H1v12h12V37z M29,47h-8v-8h8V47z M47,47h-8v-8h8V47z M19,3h12v8H19V3z M11,47H3v-8h8V47z' />
+      </g>
+    </svg>
+  )
+}
--- a/components/icons/Icon.module.css
+++ b/components/icons/Icon.module.css
@@ -0,0 +1,11 @@
+.icon {
+    height: 1em;
+    padding-inline: 0.5ch;
+    transform: translateY(0.1em);
+}
+
+@media (prefers-color-scheme: dark) {
+    .icon {
+        filter: invert(100%);
+    }
+}
--- a/components/home/LeftClickIcon/LeftClickIcon.tsx
+++ b/components/home/LeftClickIcon/LeftClickIcon.tsx
@@ -1,4 +1,6 @@
 import { FC } from 'react'
+import styles from './Icon.module.css'
+import cx from 'classnames'

 interface Props {
  className?: string
@@ -14,7 +16,7 @@ export const LeftClickIcon: FC<Props> = ({ className, classBody, classClick }) =
      x='0px'
      y='0px'
      viewBox='0 0 100 100'
-      className={className}
+      className={cx(styles.icon, className)}
    >
      <path
        className={classBody}
--- a/components/visualize/NodeOverview/NodeOverview.tsx
+++ b/components/visualize/NodeOverview/NodeOverview.tsx
@@ -7,6 +7,8 @@ import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
 import { GraphNode } from '../../../src/graph-untangle/types'
 import { fixedEncodeURIComponent } from '../../../src/utils'
 import { useRouter } from 'next/router'
+import { GraphIcon } from '../../icons/GraphIcon'
+import { I18n } from '../../shared/I18n/I18n'

 export type OverviewGraphNode = GraphNode<{
  icons: (EnrichedEntity | string)[]
@@ -28,7 +30,7 @@ export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
              query
            }}
          >
-            👁
+            <GraphIcon />
          </Link>
        </span>
        {node.name}
@@ -40,7 +42,9 @@ export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
          ))}
        </div>
      ) : null}
-      <h4>Inputs</h4>
+      <h4>
+        <I18n id={'page.visualize.imports'} />
+      </h4>
      <div className={styles.small}>
        {node.inputs.map(input => (
          <EntityIcon key={input} value={input} />
@@ -48,7 +52,9 @@ export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
      </div>
      {node.outputs.length ? (
        <>
-          <h4>Outputs</h4>
+          <h4>
+            <I18n id={'page.visualize.exports'} />
+          </h4>
          <div className={styles.small}>
            {node.outputs.map(input => (
              <EntityIcon key={input} value={input} />