55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { useGroups } from '../contexts/GroupProvider'
|
|
import { FC, useMemo } from 'react'
|
|
import { calculateInputs } from '../../src/calculateInputs'
|
|
import Head from 'next/head'
|
|
import { ScrollContainer } from './ScrollContainer/ScrollContainer'
|
|
import { ProducingGraph } from './ProducingGraph/ProducingGraph'
|
|
import { NodeOverview, OverviewGraphNode } from './NodeOverview/NodeOverview'
|
|
import { useFactories } from '../contexts/FactoryProvider'
|
|
import { i18n, I18n } from '../shared/I18n/I18n'
|
|
import { useIntl } from 'react-intl'
|
|
|
|
export const PageOverview: FC = () => {
|
|
const intl = useIntl()
|
|
const { exportedFactories, baseFactories, groups } = useGroups()
|
|
const { findFactory } = useFactories()
|
|
|
|
const producingNodes: OverviewGraphNode[] = useMemo(() => {
|
|
return Object.values(groups).map(group => ({
|
|
inputs: calculateInputs(
|
|
[...group.exports, ...group.malls],
|
|
baseFactories,
|
|
exportedFactories,
|
|
findFactory
|
|
)[0],
|
|
outputs: group.exports,
|
|
name: group.name,
|
|
icons: [...group.exports, ...group.malls]
|
|
}))
|
|
}, [baseFactories, exportedFactories, findFactory, groups])
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>
|
|
<I18n id={'page.visualize.overview.title'} />
|
|
</title>
|
|
<meta name='description' content={i18n(intl, 'page.home.head.meta.description')} />
|
|
</Head>
|
|
<main>
|
|
<ScrollContainer>
|
|
<h1>
|
|
<I18n id={'page.visualize.overview.title'} />
|
|
</h1>
|
|
<ProducingGraph
|
|
nodes={producingNodes}
|
|
inputs={baseFactories}
|
|
childType={NodeOverview}
|
|
mergeHidden={true}
|
|
/>
|
|
</ScrollContainer>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|