133 lines
4.5 KiB
TypeScript
133 lines
4.5 KiB
TypeScript
import { ElementRef, FC, useMemo, useRef } 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'
|
|
|
|
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])
|
|
|
|
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>
|
|
<div className={styles.grid}>
|
|
{Object.values(groups)
|
|
.sort((a, b) => a.name.localeCompare(b.name))
|
|
.map(group => (
|
|
<GroupBox key={group.name} group={group} />
|
|
))}
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|