Stylings / Restructuring

This commit is contained in:
Sebastian Seedorf
2022-08-14 10:49:11 +02:00
parent 7682aeaea1
commit 76f508a847
17 changed files with 333 additions and 137 deletions

View File

@@ -2,12 +2,15 @@ import type { NextPage } from 'next'
import Head from 'next/head'
import {useGroups} from "../../components/contexts/GroupProvider";
import {useFactories} from "../../src/hooks/useFactories";
import {ProducingGraph, ProducingNode} from "../../components/shared/ProducingGraph";
import {GraphNode, ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
import {useMemo} from "react";
import {calculateInputs} from "../../src/calculateInputs";
import {useRouter} from "next/router";
import {isNonNullable} from "../../src/utils";
import {EnrichedEntity} from "../../src/types";
import {groupBy, isNonNullable} from "../../src/utils";
import {EnrichedEntity, Recipe} from "../../src/types";
import {DetailGraphNode, NodeDetails} from "../../components/visualize/NodeDetails/NodeDetails";
const Page: NextPage = () => {
const {query: {name}} = useRouter()
@@ -34,21 +37,29 @@ const Page: NextPage = () => {
)
}, [baseFactories, exportedFactories, findFactory, group, ignoredFactories])
const producingNodes: ProducingNode[] = useMemo(() => {
const producingNodes: DetailGraphNode[] = useMemo(() => {
if (!group) return []
return Array.from(new Set([...intermediateFactories, ...group.exports, ...group.malls]))
const nodes = Array.from(new Set([...intermediateFactories, ...group.exports, ...group.malls]))
.map(findFactory)
.filter(isNonNullable)
.map((factory: EnrichedEntity) => ({
inputs: Object.keys(factory.recipe?.prerequisites ?? {}).sort((a, b) => a.localeCompare(b)),
outputs: Object.keys(factory.recipe?.output ?? {}).sort((a, b) => a.localeCompare(b)),
name: factory.name,
recipe: factory.recipe
}))
recipes: [factory.recipe]
} as DetailGraphNode))
return Object
.values(groupBy(nodes, node => node.inputs.join()))
.map(nodesOfInput => ({
inputs: nodesOfInput[0].inputs,
outputs: Array.from(new Set(nodesOfInput.flatMap(node => node.outputs))),
name: nodesOfInput.map(node => node.name).join(', '),
recipes: nodesOfInput.flatMap(node => node.recipes)
} as DetailGraphNode))
}, [findFactory, group, intermediateFactories])
return (
<div>
<>
<Head>
<title>Factorio Microservices</title>
<meta name="description" content="Create Factorio microservices" />
@@ -56,10 +67,19 @@ const Page: NextPage = () => {
</Head>
<main>
<h1>Factorio Microservices</h1>
<ProducingGraph nodes={producingNodes} inputs={inputFactories}></ProducingGraph>
<ProducingGraph
nodes={producingNodes}
inputs={inputFactories}
outputs={group?.exports}
childType={NodeDetails}
/>
</main>
</div>
</>
)
}
export async function getServerSideProps() {
return { props: { bodyClassName: 'scroll' } };
}
export default Page