Update state rendering

This commit is contained in:
Kai Vogelgesang 2022-01-02 03:40:23 +01:00
parent 2dec48a004
commit 227b9ba5dc
Signed by: kai
GPG Key ID: 0A95D3B6E62C0879

View File

@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { State } from "../proto"; import { Computer, State } from "../proto";
import { TokenContext } from "../tokenStorage"; import { TokenContext } from "../tokenStorage";
export const Index: React.FC = () => { export const Index: React.FC = () => {
const tokenStorage = React.useContext(TokenContext); const tokenStorage = React.useContext(TokenContext);
const [state, setState] = useState<State>(); const [state, setState] = useState<State>();
useEffect(() => { useEffect(() => {
@ -24,11 +24,52 @@ export const Index: React.FC = () => {
}, [tokenStorage.token]); }, [tokenStorage.token]);
return <> return <>
<p>Hallo i bims 1 index u d1 token bimst {tokenStorage.token}</p> <button onClick={tokenStorage.reset}>Logout</button>
<button onClick={tokenStorage.reset}>Resetteroni</button> <p>State:</p>
<p>Der State ist:</p> {
{JSON.stringify(state)} state
? <Groups computers={state.computers} />
: <p>loading</p>
}
</> </>
} }
export default Index; export default Index;
const Groups: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
const groupMap = new Map<string, Array<Computer>>();
for (const computer of computers) {
if (!groupMap.has(computer.group)) {
groupMap.set(computer.group, []);
}
groupMap.get(computer.group)!.push(computer);
}
return <>
{
Array.from(groupMap.entries()).map((entry, index) => {
const [group, computers] = entry;
return <div key={group}>
<p>{group}:</p>
<CardList computers={computers}/>
</div>
})
}
</>
}
const CardList: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
return <>
{computers.map(
(computer, index) => <ComputerCard key={computer.uuid} computer={computer} />
)}
</>
}
const ComputerCard: React.FC<{ computer: Computer }> = ({ computer }) => {
return <div>
{computer.label}
</div>
}