Update state rendering
This commit is contained in:
parent
2dec48a004
commit
227b9ba5dc
@ -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>
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user