20230220: Integrated channel, video, forum, election, validation in dashboard

src/App.tsx

@@ -327,11 +327,11 @@ class App extends React.Component<IProps, IState> {
     this.state = initialState;
     this.save = this.save.bind(this);
     this.load = this.load.bind(this);
-    // this.toggleEditKpi = this.toggleEditKpi.bind(this);
-    // this.toggleStar = this.toggleStar.bind(this);
-    // this.toggleFooter = this.toggleFooter.bind(this);
-    // this.toggleShowStatus = this.toggleShowStatus.bind(this);
-    // this.getMember = this.getMember.bind(this);
+    this.toggleEditKpi = this.toggleEditKpi.bind(this);
+    this.toggleStar = this.toggleStar.bind(this);
+    this.toggleFooter = this.toggleFooter.bind(this);
+    this.toggleShowStatus = this.toggleShowStatus.bind(this);
+    this.getMember = this.getMember.bind(this);
   }
 }
 

src/components/Dashboard/Channels.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import SubBlock from "./ui/SubBlock";
 import Line from "./ui/Line";
+import { ElectedCouncil } from "@/queries";
+import { useChannels } from "@/hooks";
 
-const Channels = (props: {}) => {
+const Channels = (props: { council: ElectedCouncil | undefined }) => {
+  const { council } = props;
+  const { created, total, loading, error } = useChannels({ council });
 
   return (
     <SubBlock title="Channels">
-      <Line content={"created"} value={5} />
-      <Line content={"total"} value={10000} />
+      { !loading && (
+        <>
+          <Line content={"created"} value={created} />
+          <Line content={"total"} value={total} />
+        </>
+      )}
     </SubBlock>
   );
 };

src/components/Dashboard/Election.tsx

@@ -1,14 +1,23 @@
 import React from "react";
 import SubBlock from "./ui/SubBlock";
 import Line from "./ui/Line";
+import { ElectedCouncil } from "@/queries";
+import { useElection } from "@/hooks";
+import { sumStakes } from "@/helpers";
 
-const Election = (props: {}) => {
+const Election = (props: { council: ElectedCouncil | undefined}) => {
+  const { council } = props;
+  const { election, loading, error } = useElection({ council });
 
   return (
     <SubBlock title="Election">
-      <Line content={"candidates"} value={5} />
-      <Line content={"votes"} value={232} />
-      <Line content={"staked"} value={99093123} />
+      { !loading && (
+        <>
+          <Line content={"candidates"} value={election? election.candidates.length : "-"} />
+          <Line content={"votes"} value={election? election.castVotes.length: "-"} />
+          <Line content={"staked"} value={election? sumStakes(election.candidates).toString().slice(0, length - 10): "-"} />
+        </>
+      )}
     </SubBlock>
   );
 };

src/components/Dashboard/Forum.tsx

@@ -1,15 +1,28 @@
 import React from "react";
 import SubBlock from "./ui/SubBlock";
 import Line from "./ui/Line";
+import { ElectedCouncil } from "@/queries";
+import { usePostTokenData, useThreadData } from "@/hooks";
 
-const Forum = (props: {}) => {
+const Forum = (props: { council: ElectedCouncil | undefined}) => {
+  const { council } = props;
+  const thread = useThreadData({ council });
+  const post = usePostTokenData({ council });
 
   return (
     <SubBlock title="Forum">
-      <Line content={"threads new"} value={13} />
-      <Line content={"threads total"} value={432} />
-      <Line content={"posts new"} value={99} />
-      <Line content={"posts total"} value={712} />
+      { !thread.loading && (
+        <>
+          <Line content={"threads new"} value={thread.created} />
+          <Line content={"threads total"} value={thread.total} />
+        </>
+      )}
+      { !post.loading && (
+        <>
+          <Line content={"posts new"} value={post.created} />
+          <Line content={"posts total"} value={post.total} />
+        </>
+      )}
     </SubBlock>
   );
 };

src/components/Dashboard/Memberships.tsx

@@ -8,8 +8,6 @@ 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">
       { !loading && (

src/components/Dashboard/Validation.tsx

@@ -1,14 +1,24 @@
 import React from "react";
 import SubBlock from "./ui/SubBlock";
 import Line from "./ui/Line";
+import { ElectedCouncil } from "@/queries";
+import { useValidation } from "@/hooks";
 
-const Validation = (props: {}) => {
+const Validation = (props: { council: ElectedCouncil | undefined }) => {
+  const { council } = props;
+  const { validator, stake, mint, loading, error } = useValidation({ council });
+
+  console.log("validation", validator, stake, mint, loading)
 
   return (
     <SubBlock title="Validation">
-      <Line content={"count"} value={5} />
-      <Line content={"minted"} value={100} />
-      <Line content={"staked"} value={99093123} />
+      { !loading && (
+        <>
+          <Line content={"count"} value={validator} />
+          <Line content={"minted"} value={mint} />
+          <Line content={"staked"} value={stake} />
+        </>
+      )}
     </SubBlock>
   );
 };

src/components/Dashboard/Videos.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import SubBlock from "./ui/SubBlock";
 import Line from "./ui/Line";
+import { ElectedCouncil } from "@/queries";
+import { useVideos } from "@/hooks";
 
-const Videos = (props: {}) => {
+const Videos = (props: { council: ElectedCouncil | undefined}) => {
+  const { council } = props;
+  const { created, total, loading, error } = useVideos({ council });
 
   return (
     <SubBlock title="Videos">
-      <Line content={"created"} value={5} />
-      <Line content={"total"} value={10000} />
+      { !loading && (
+        <>
+          <Line content={"created"} value={created} />
+          <Line content={"total"} value={total} />
+        </>
+      )}
     </SubBlock>
   );
 };

src/components/Dashboard/index.tsx

@@ -23,8 +23,6 @@ const Dashboard = (props: IProps) => {
 	const council: ElectedCouncil | undefined = data && data[0]
 
 	useEffect(() => {
-		console.log(council)
-
 		if (!council) return
 
 		setDescription1(
@@ -44,15 +42,15 @@ const Dashboard = (props: IProps) => {
         <Grid container spacing={3}>
           <Memberships council={council}
           />
-          <Channels
-          />
-          <Videos
+          <Channels council={council}
           />
-          <Forum
+          <Videos council={council}
           />
-          <Election
+          <Forum council={council}
           />
-          <Validation 
+          <Election council={council}
+          />  
+          <Validation council={council}
           />
         </Grid>
         <Grid container spacing={3}>