124 lines
4.6 KiB
TypeScript
124 lines
4.6 KiB
TypeScript
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>
|
|
)
|
|
}
|