20230218: GraphQL-Integration: Integreated Membership GraphQL

src/components/Dashboard/Memberships.tsx

@@ -1,14 +1,24 @@
 import React from "react";
 import SubBlock from "./ui/SubBlock";
 import Line from "./ui/Line";
+import { ElectedCouncil } from "@/types";
+import { useMemberships } from "@/hooks";
 
-const Memberships = (props: {}) => {
+const Memberships = (props: { council: ElectedCouncil | undefined }) => {
+  const { council } = props;
+  const { created, invited, total, loading, error } = useMemberships({ council });
+
+  console.log(created, invited, total, loading)
 
   return (
     <SubBlock title="Memberships">
-      <Line content={"created"} value={99} />
-      <Line content={"created"} value={100} />
-      <Line content={"total"} value={8000} />
+      { !loading && (
+        <>
+          <Line content={"Created"} value={created} />
+          <Line content={"Invited"} value={invited} />
+          <Line content={"Total"} value={total} />
+        </>
+      )}
     </SubBlock>
   );
 };

src/components/Dashboard/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { IState } from "../../types";
 import { Container, Grid } from "@material-ui/core";
 import Memberships from "./Memberships";
@@ -10,25 +10,39 @@ import Validation from "./Validation";
 import SubBlock from "./ui/SubBlock";
 import Banner from "./ui/Banner";
 import { useElectedCouncils } from '@/hooks';
+import { ElectedCouncil } from "@/types";
 
 
 interface IProps extends IState {}
 const Dashboard = (props: IProps) => {
   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({});
-  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 (
     <div style={{ flexGrow: 1 }}>
       <Container maxWidth="xl">
         <Grid container spacing={3}>
-          <Banner description={_description1}/>
+          <Banner description={description1}/>
         </Grid>
         <Grid container spacing={3}>
-          <Memberships
+          <Memberships council={council}
           />
           <Channels
           />
@@ -42,10 +56,10 @@ const Dashboard = (props: IProps) => {
           />
         </Grid>
         <Grid container spacing={3}>
-          <Banner title="WG" description={_description2}/>
+          <Banner title="WG" description={description2}/>
         </Grid>
         <Grid container spacing={3}>
-          <Banner title="Proposals" description={_description2}/>
+          <Banner title="Proposals" description={description2}/>
         </Grid>
       </Container>
     </div>

src/components/Dashboard/ui/Banner.tsx

@@ -56,7 +56,9 @@ const Banner = (props: {
             </Toolbar>
           </AppBar>
         }
-        <Line content={description} />
+        <i>
+          <Line content={description} />
+        </i>
         {/* <Typography variant="body1" className={classes.description}>
             {description}
         </Typography> */}

src/components/Dashboard/ui/Line.tsx

@@ -15,7 +15,7 @@ const Line = (props: {
   return (
     <Box sx={{ display: 'flex', paddingLeft:'16px', paddingRight:'16px', color: '#000' }} >
 			<Box sx={{ flexGrow: 1, textAlign: "left" }}>{content}</Box>
-			<Box sx={{ textAlign: "right" }}>{value}</Box>
+			<Box sx={{ textAlign: "right" }}><i>{value}</i></Box>
     </Box>
   );
 };