package.json

@@ -30,6 +30,7 @@
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "moment": "^2.29.1",
+    "notistack": "^3.0.1",
     "pako": "^2.0.4",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.1.0",
@@ -99,7 +100,6 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.12",
-    "prettier": "2.7.1",
     "babel-plugin-import-graphql": "^2.8.1",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-preset-env": "^1.7.0",
@@ -111,6 +111,7 @@
     "html-webpack-plugin": "^5.5.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "path-browserify": "^1.0.1",
+    "prettier": "2.7.1",
     "raw-loader": "^4.0.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",

src/components/Dashboard/index.tsx

@@ -13,6 +13,7 @@ import Banner from "../ui/Banner";
 import { useElectedCouncils } from '@/hooks';
 import { ElectedCouncil } from "@/graphtypes";
 import Proposals from "./Proposals";
+import { SnackbarProvider, VariantType, useSnackbar } from 'notistack';
 
 
 const Dashboard = (props) => {
@@ -21,6 +22,9 @@ const Dashboard = (props) => {
 	const [description1, setDescription1] = useState('');
 
 	const council: ElectedCouncil | undefined = data && data[0]
+  const { enqueueSnackbar } = useSnackbar();
+
+  const hello = <h3>This is a success message!</h3>
 
 	useEffect(() => {
 		if (!council) 
@@ -31,6 +35,8 @@ const Dashboard = (props) => {
 			", From: " + new Date(council.electedAt.timestamp) + 
 			", Councilors: [ " + council.councilors.map(each => each.member.handle).join(", ") + " ]")
 
+    enqueueSnackbar(hello);
+
 	}, [council])
  
 

src/components/Spending/Round/index.tsx

@@ -2,7 +2,7 @@ import { mJoy, formatDate, sortDesc, fixGroupName } from "../../../lib/util";
 import Groups from "../Groups";
 
 const Round = (props: {}) => {
-  const { round, electedAtTime, electedAtBlock, endedAtTime, endedAtBlock } =
+  const { round, electedAt, endedAt} =
     props;
   const [
     wgSpending,
@@ -31,11 +31,11 @@ const Round = (props: {}) => {
     <div className="box text-left">
       <h1>Council #{round}</h1>
       <div>
-        elected: {formatDate(electedAtTime)} ({electedAtBlock})
+        elected: {formatDate(electedAt.timestamp)} ({electedAt.number})
       </div>
-      {endedAtBlock ? (
+      {endedAt ? (
         <div>
-          ended: {formatDate(endedAtTime)} ({endedAtBlock})
+          ended: {formatDate(endedAt.timestamp)} ({endedAt.number})
         </div>
       ) : (
         ""

src/components/Spending/index.tsx

@@ -1,56 +1,114 @@
 import React from "react";
 import { sortDesc } from "../../lib/util";
 import Round from "./Round";
+import { useElectedCouncils } from "@/hooks";
+import { gql, useQuery } from '@apollo/client';
+import { bounties, councilBudgetRefills, councilSalaryChanges, councilSalaryPayouts, openings, wgBudgetRefills, wgSpending, workerChanges, workerPayments } from "@/queries_";
 
 const Rounds = (props: {}) => {
   const {
-    bounties,
-    councils,
-    wgSpending,
-    wgBudgetRefills,
-    councilBudgetRefills,
-    councilSalaryPayouts,
-    workerPayments,
-    councilSalaryChanges,
-    openings,
-    workerChanges,
+    // bounties,
+    // councils,
+    // wgSpending,
+    // wgBudgetRefills,
+    // councilBudgetRefills,
+    // councilSalaryPayouts,
+    // workerPayments,
+    // councilSalaryChanges,
+    // openings,
+    // workerChanges,
   } = props;
 
-  const filterEvents = (list, start, end) =>
-    list?.length
-      ? list.filter((e) => e.inBlock > start && (!end || e.inBlock < end))
-      : [];
+  const _electedCouncil = useElectedCouncils({});
+  const _wgSpending = useQuery(gql(wgSpending));
+  const _wgBudgetRefills = useQuery(gql(wgBudgetRefills));
+  const _councilBudgetRefills = useQuery(gql(councilBudgetRefills));
+  const _councilSalaryPayouts = useQuery(gql(councilSalaryPayouts));
+  const _workerPayments = useQuery(gql(workerPayments));
+  const _councilSalaryChanges = useQuery(gql(councilSalaryChanges));
+  const _openings = useQuery(gql(openings));
+  const _workerChanges = useQuery(gql(workerChanges));
+  const _bounties = useQuery(gql(bounties));
 
-  return sortDesc(councils?.electedCouncils, "electedAtBlock").map(
-    (c, i: number) => (
-      <Round
-        key={`elected` + c.electedAtBlock}
-        bounties={sortDesc(bounties?.bounties, "createdInEvent.block").filter(
-          (b) =>
-            b.createdInEvent.block > c.electedAtBlock &&
-            b.createdInEvent.block < c.endedAtBlock
-        )}
-        round={councils.electedCouncils.length - i}
-        data={[
-          wgSpending?.budgetSpendingEvents,
-          wgBudgetRefills?.budgetUpdatedEvents,
-          councilBudgetRefills?.budgetRefillEvents,
-          councilSalaryPayouts?.rewardPaymentEvents,
-          workerPayments?.rewardPaidEvents,
-          councilSalaryChanges?.councilorRewardUdatedEvents,
-          openings?.openingAddedEvents,
-          openings?.openingCanceledEvents,
-          openings?.openingFilledEvents,
-          workerChanges?.terminatedWorkerEvents,
-          workerChanges?.workerExitedEvents,
-          workerChanges?.stakeSlashedEvents,
-          workerChanges?.workerRewardAmountUpdatedEvents,
-          workerChanges?.workerRoleAccountUpdatedEvents,
-        ].map((list) => filterEvents(list, c.electedAtBlock, c.endedAtBlock))}
-        {...c}
-      />
+  const filterEvents = (list: any, start: any, end: any) =>
+    list?.length ? list.filter((e: any) => e.inBlock > start && (!end || e.inBlock < end)) : [];
+
+  if ((_electedCouncil?.loading == false) && 
+      (_wgSpending?.loading == false) &&
+      (_wgBudgetRefills?.loading == false) && 
+      (_councilBudgetRefills?.loading == false) && 
+      (_councilSalaryPayouts?.loading == false) && 
+      (_workerPayments?.loading == false) && 
+      (_councilSalaryChanges?.loading == false) && 
+      (_openings?.loading == false) && 
+      (_workerChanges?.loading == false) && 
+      (_bounties?.loading == false)) {
+
+    console.log(`Rounding: All information fetched`, 
+      _electedCouncil?.data,
+      _wgSpending.data, _wgBudgetRefills.data, _councilBudgetRefills.data, _councilSalaryPayouts.data,
+      _workerPayments.data, _councilSalaryChanges.data, _openings.data, _workerChanges.data, _bounties.data);
+    return sortDesc(_electedCouncil?.data, "id").map(
+      (c, i, member) => (
+        <Round
+          key={`elected` + c.electedAt.number}
+          bounties={_bounties?.data.bounties}
+          round={c.id}
+          data={[
+            _wgSpending?.data.budgetSpendingEvents,
+            _wgBudgetRefills?.data.budgetRefillEvents,
+            _councilBudgetRefills?.data.budgetRefillEvents,
+            _councilSalaryPayouts?.data.rewardPaymentEvents,
+            _workerPayments?.data.rewardPaidEvents,
+            _councilSalaryChanges?.data.councilorRewardUpdatedEvents,
+            _openings?.data.openingAddedEvents,
+            _openings?.data.openingCanceledEvents,
+            _openings?.data.openingFilledEvents,
+            _workerChanges?.data.terminatedWorkerEvents,
+            _workerChanges?.data.workerExitedEvents,
+            _workerChanges?.data.stakeSlashedEvents,
+            _workerChanges?.data.workerRewardAmountUpdatedEvents,
+            _workerChanges.data.workerRoleAccountUpdatedEvents,
+          ].map((list) => filterEvents(list, c.electedAt.number, c.endedAt?.number))}
+          {...c}
+          />
+      )
     )
-  );
+  }
+  else {
+    return <></>;
+  }
+
+  // return sortDesc(councils?.electedCouncils, "electedAtBlock").map(
+  //   (c, i: number) => (
+  //     <Round
+  //       key={`elected` + c.electedAtBlock}
+  //       bounties={sortDesc(bounties?.bounties, "createdInEvent.block").filter(
+  //         (b) =>
+  //           b.createdInEvent.block > c.electedAtBlock &&
+  //           b.createdInEvent.block < c.endedAtBlock
+  //       )}
+  //       round={councils.electedCouncils.length - i}
+  //       data={[
+  //         wgSpending?.budgetSpendingEvents,
+  //         wgBudgetRefills?.budgetUpdatedEvents,
+  //         councilBudgetRefills?.budgetRefillEvents,
+  //         councilSalaryPayouts?.rewardPaymentEvents,
+  //         workerPayments?.rewardPaidEvents,
+  //         councilSalaryChanges?.councilorRewardUdatedEvents,
+  //         openings?.openingAddedEvents,
+  //         openings?.openingCanceledEvents,
+  //         openings?.openingFilledEvents,
+  //         workerChanges?.terminatedWorkerEvents,
+  //         workerChanges?.workerExitedEvents,
+  //         workerChanges?.stakeSlashedEvents,
+  //         workerChanges?.workerRewardAmountUpdatedEvents,
+  //         workerChanges?.workerRoleAccountUpdatedEvents,
+  //       ].map((list) => filterEvents(list, c.electedAtBlock, c.endedAtBlock))}
+  //       {...c}
+  //     />
+  //   )
+  // );
 };
 
 export default Rounds;

src/index.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router } from "react-router-dom";
 import Providers from "./Providers";
+import { SnackbarProvider } from 'notistack';
+
+
 import "./index.css";
 import App from "./App";
 
@@ -10,7 +13,9 @@ import "./i18n";
 ReactDOM.render(
   <Router>
     <Providers>
-      <App />
+      <SnackbarProvider maxSnack={5}>
+        <App />
+      </SnackbarProvider>
     </Providers>
   </Router>,
   document.getElementById("root")

webpack.config.js

@@ -15,20 +15,20 @@ module.exports = {
         path: path.join(__dirname, '/public'),
         filename: 'bundle.js'
     },
-    devServer: {
-        port: 8080,
-        client: {
-          logging: 'error',
-          progress: true,
-          overlay: true,
-          webSocketURL: {
-            hostname: 'dev.joystreamstats.live',
-            pathname: '/ws',
-            port: 443,
-            protocol: 'wss'
-          }
-        }
-    },
+    // devServer: {
+    //     port: 8080,
+    //     client: {
+    //       logging: 'error',
+    //       progress: true,
+    //       overlay: true,
+    //       webSocketURL: {
+    //         hostname: 'dev.joystreamstats.live',
+    //         pathname: '/ws',
+    //         port: 443,
+    //         protocol: 'wss'
+    //       }
+    //     }
+    // },
     module: {
         rules: [
             {

yarn.lock

@@ -6532,7 +6532,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.0.4:
+clsx@^1.0.4, clsx@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -9230,6 +9230,11 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+goober@^2.0.33:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.12.tgz#6c1645314ac9a68fe76408e1f502c63df8a39042"
+  integrity sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -12542,6 +12547,14 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+notistack@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
+  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
+  dependencies:
+    clsx "^1.1.0"
+    goober "^2.0.33"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"