Styling of home

2022-08-22 17:04:39 +02:00
parent 537a18fb88
commit d964748a66
55 changed files with 1791 additions and 341 deletions
--- a/components/home/SectionAddMissing/SectionAddMissing.tsx
+++ b/components/home/SectionAddMissing/SectionAddMissing.tsx
@@ -0,0 +1,123 @@
+import { FC, useCallback, useMemo, useState } from 'react'
+import { Heading } from '../../shared/Heading'
+import { i18n, I18n } from '../../shared/I18n/I18n'
+import { Paragraph } from '../../shared/Paragraph/Paragraph'
+import styles from './SectionAddMissing.module.css'
+import { EntitySpan } from '../EntitySpan/EntitySpan'
+import { Section } from '../../shared/Section/Section'
+import { EnrichedEntity } from '../../../src/types'
+import { useFactories } from '../../contexts/FactoryProvider'
+import { useGroups } from '../../contexts/GroupProvider'
+import { useIntl } from 'react-intl'
+import { Input } from '../../shared/Input/Input'
+import { Button } from '../../shared/Button/Button'
+
+export const SectionAddMissing: FC = () => {
+  const intl = useIntl()
+  const DEFAULT_NAME = useMemo(() => i18n(intl, 'page.home.group.add.default_group_name'), [intl])
+  const { factories } = useFactories()
+  const { addGroup: addGroupCtx, doNotSuggest, ignoredFactories, setIgnoredFactories } = useGroups()
+  const [newGroupValue, setNewGroupValue] = useState(DEFAULT_NAME)
+  const addGroup = useCallback(
+    (preferredName: string, exported?: string[], mall?: string[]) => {
+      const name = newGroupValue !== DEFAULT_NAME ? newGroupValue : preferredName
+      const result = addGroupCtx(name, exported, mall)
+      result && setNewGroupValue(DEFAULT_NAME)
+      return result
+    },
+    [DEFAULT_NAME, addGroupCtx, newGroupValue]
+  )
+
+  const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
+    return factories
+      .filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
+      .reduce(
+        (acc, factory) =>
+          (factory.usedBy?.length ?? 0) >= 3
+            ? [[...acc[0], factory], acc[1]]
+            : [acc[0], [...acc[1], factory]],
+        [[], []] as [EnrichedEntity[], EnrichedEntity[]]
+      )
+  }, [factories, doNotSuggest])
+
+  return (
+    <Section color={'secondary'}>
+      <Heading type={'section'}>
+        <I18n id={'page.home.group.add.title'} />
+      </Heading>
+      <Input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)} />
+      <Button
+        className={styles.addBtn}
+        disabled={!newGroupValue}
+        onClick={() => {
+          addGroup(newGroupValue)
+          setNewGroupValue(DEFAULT_NAME)
+        }}
+      >
+        <I18n id={'page.home.group.add.button_text'} values={{ name: newGroupValue }} />
+      </Button>
+      <Heading type={'subsection'}>
+        <I18n id={'page.home.group.missing.export.title'} />
+      </Heading>
+      <Paragraph size={'subtitle'}>
+        <I18n id={'page.home.group.missing.export.description'} />
+      </Paragraph>
+      {missingExport.length ? (
+        <div className={styles.entitySpanList}>
+          {missingExport.map(missing => (
+            <EntitySpan
+              key={missing.href}
+              value={missing}
+              onClick={() => {
+                addGroup(missing.name, [missing.href])
+              }}
+              onContextMenu={event => {
+                event.preventDefault()
+                setIgnoredFactories([...ignoredFactories, missing.href])
+              }}
+              leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_new_export')}
+              rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
+            />
+          ))}
+        </div>
+      ) : (
+        <Paragraph size={'medium'}>
+          <em>
+            <I18n id={'page.home.group.missing.none'} />
+          </em>
+        </Paragraph>
+      )}
+      <Heading type={'subsection'}>
+        <I18n id={'page.home.group.missing.mall.title'} />
+      </Heading>
+      <Paragraph size={'subtitle'}>
+        <I18n id={'page.home.group.missing.mall.description'} />
+      </Paragraph>
+      {missingMall.length ? (
+        <div className={styles.entitySpanList}>
+          {missingMall.map(missing => (
+            <EntitySpan
+              key={missing.href}
+              value={missing}
+              onClick={() => {
+                addGroup(missing.name, undefined, [missing.href])
+              }}
+              onContextMenu={event => {
+                event.preventDefault()
+                setIgnoredFactories([...ignoredFactories, missing.href])
+              }}
+              leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_new_mall')}
+              rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
+            />
+          ))}
+        </div>
+      ) : (
+        <Paragraph size={'medium'}>
+          <em>
+            <I18n id={'page.home.group.missing.none'} />
+          </em>
+        </Paragraph>
+      )}
+    </Section>
+  )
+}