|
@@ -1,4 +1,4 @@
|
|
-import React from "react";
|
|
|
|
|
|
+import React, { useEffect, useState } from "react";
|
|
import { IState } from "../../types";
|
|
import { IState } from "../../types";
|
|
import { Container, Grid } from "@material-ui/core";
|
|
import { Container, Grid } from "@material-ui/core";
|
|
import Memberships from "./Memberships";
|
|
import Memberships from "./Memberships";
|
|
@@ -10,25 +10,39 @@ import Validation from "./Validation";
|
|
import SubBlock from "./ui/SubBlock";
|
|
import SubBlock from "./ui/SubBlock";
|
|
import Banner from "./ui/Banner";
|
|
import Banner from "./ui/Banner";
|
|
import { useElectedCouncils } from '@/hooks';
|
|
import { useElectedCouncils } from '@/hooks';
|
|
|
|
+import { ElectedCouncil } from "@/types";
|
|
|
|
|
|
|
|
|
|
interface IProps extends IState {}
|
|
interface IProps extends IState {}
|
|
const Dashboard = (props: IProps) => {
|
|
const Dashboard = (props: IProps) => {
|
|
const { } = props;
|
|
const { } = props;
|
|
- const _description1 = "For a given council period {so there needs to be an input field for this}, I want to see a nice one page dashboard which shows the following, and nothing else (each at end of period)"
|
|
|
|
- const _description2 = "new tokens minted size of budget at end of period amount of debt at end of period number of workers at end of period"
|
|
|
|
-
|
|
|
|
const { data } = useElectedCouncils({});
|
|
const { data } = useElectedCouncils({});
|
|
- console.log(data)
|
|
|
|
-
|
|
|
|
|
|
+ const [description1, setDescription1] = useState('');
|
|
|
|
+ const [description2, setDescription2] = useState('');
|
|
|
|
+
|
|
|
|
+ const council: ElectedCouncil | undefined = data && data[0]
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ console.log(council)
|
|
|
|
+
|
|
|
|
+ if (!council) return
|
|
|
|
+
|
|
|
|
+ setDescription1(
|
|
|
|
+ "Round: " + council.electionCycleId +
|
|
|
|
+ ", From: " + new Date(council.electedAt.timestamp) +
|
|
|
|
+ ", Councilors: [ " + council.councilors.map(each => each.member.handle).join(", ") + " ]")
|
|
|
|
+
|
|
|
|
+ }, [council])
|
|
|
|
+
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<div style={{ flexGrow: 1 }}>
|
|
<div style={{ flexGrow: 1 }}>
|
|
<Container maxWidth="xl">
|
|
<Container maxWidth="xl">
|
|
<Grid container spacing={3}>
|
|
<Grid container spacing={3}>
|
|
- <Banner description={_description1}/>
|
|
|
|
|
|
+ <Banner description={description1}/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={3}>
|
|
<Grid container spacing={3}>
|
|
- <Memberships
|
|
|
|
|
|
+ <Memberships council={council}
|
|
/>
|
|
/>
|
|
<Channels
|
|
<Channels
|
|
/>
|
|
/>
|
|
@@ -42,10 +56,10 @@ const Dashboard = (props: IProps) => {
|
|
/>
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={3}>
|
|
<Grid container spacing={3}>
|
|
- <Banner title="WG" description={_description2}/>
|
|
|
|
|
|
+ <Banner title="WG" description={description2}/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={3}>
|
|
<Grid container spacing={3}>
|
|
- <Banner title="Proposals" description={_description2}/>
|
|
|
|
|
|
+ <Banner title="Proposals" description={description2}/>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</Container>
|
|
</div>
|
|
</div>
|