Styling of home

components/home/Home.tsx

@@ -1,125 +1,38 @@
-import { ElementRef, FC, useMemo, useRef } from 'react'
+import { FC } from 'react'
 import { GroupBox } from './GroupBox/GroupBox'
 import styles from './Home.module.css'
-import { EnrichedEntity } from '../../src/types'
-import { EntitySpan } from './EntitySpan/EntitySpan'
 import { useGroups } from '../contexts/GroupProvider'
-import { Preferences } from './Preferences/Preferences'
-import { download, streamToArrayBuffer } from '../../src/download'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { i18n, I18n } from '../shared/I18n/I18n'
-import { useFactories } from '../contexts/FactoryProvider'
-import { GraphIcon } from '../icons/GraphIcon'
-import { useIntl } from 'react-intl'
+import { SectionPreferences } from './SectionPreferences/SectionPreferences'
+import { I18n } from '../shared/I18n/I18n'
+import { Heading } from '../shared/Heading'
+import { Paragraph } from '../shared/Paragraph/Paragraph'
+import { Section } from '../shared/Section/Section'
+import { SectionAddMissing } from './SectionAddMissing/SectionAddMissing'
+import { SectionShare } from './SectionShare/SectionShare'
+import { ButtonVisualize } from '../shared/ButtonVisualize/ButtonVisualize'
 
 export const Home: FC = () => {
-  const intl = useIntl()
-  const { query } = useRouter()
-  const { factories } = useFactories()
-  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[]]>(() => {
-    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])
+  const { groups } = useGroups()
 
   return (
     <main>
-      <h1>
-        <I18n id={'page.home.title'} />
-      </h1>
-      <p>
-        <I18n id={'page.home.description'} />
-      </p>
-      <button
-        onClick={() => {
-          download('factorio-microservices.bin', store())
-        }}
-      >
-        <I18n id={'page.home.pref.download'} />
-      </button>
-      <input
-        type={'file'}
-        multiple={false}
-        ref={inputRef}
-        onChange={async evt => {
-          const stream = evt.currentTarget.files?.[0].stream() as
-            | globalThis.ReadableStream<Uint8Array>
-            | undefined
-          if (stream) {
-            const array = await streamToArrayBuffer(stream)
-            load(array)
-            if (inputRef.current) inputRef.current.value = null as unknown as string
-          }
-        }}
-      />
-      <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'} />
-        </legend>
-        <span>
-          <I18n id={'page.home.group.missing.export.description'} />
-        </span>
-        <div className={styles.missingFactories}>
-          {missingExport.map(missing => (
-            <EntitySpan
-              key={missing.href}
-              value={missing}
-              onClick={() => {
-                preferencesRef.current?.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>
-      </fieldset>
-      <fieldset>
-        <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
-              key={missing.href}
-              value={missing}
-              onClick={() => {
-                preferencesRef.current?.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>
-      </fieldset>
+      <Section>
+        <Heading type={'pageTitle'}>
+          <I18n id={'page.home.title'} />
+        </Heading>
+        <Paragraph size={'large'}>
+          <I18n id={'page.home.description'} />
+        </Paragraph>
+      </Section>
+      <SectionShare />
+      <SectionPreferences />
+      <SectionAddMissing />
+      <Section>
+        <Heading type={'section'}>
+          <I18n id={'page.home.group.title'} />
+          <ButtonVisualize large={true} />
+        </Heading>
+      </Section>
       <div className={styles.grid}>
         {Object.values(groups)
           .sort((a, b) => a.name.localeCompare(b.name))