Fix /spending

src/App.tsx

@@ -192,7 +192,7 @@ class App extends React.Component<IProps, IState> {
     const s = active.length > 1 ? `s` : ``;
     console.log(`Updating ${active.length} active proposal${s}`);
     active.forEach(async (a) => {
-      const { data } = await axios.get(`${apiLocation}/proposals/${a.id}`);
+      const { data } = await axios.get(`${apiLocation}/v2/proposals/${a.id}`);
       if (!data || data.error) return console.error(`failed to fetch from API`);
       this.save(
         "proposals",
@@ -241,7 +241,7 @@ class App extends React.Component<IProps, IState> {
   }
 
   async fetchCouncils() {
-    const { data } = await axios.get(`${apiLocation}/councils`);
+    const { data } = await axios.get(`${apiLocation}/v1/councils`);
     if (!data || data.error) return console.error(`failed to fetch from API`);
     console.debug(`councils`, data);
     this.save("councils", data);
@@ -256,7 +256,7 @@ class App extends React.Component<IProps, IState> {
     this.save("status", status);
   }
   async fetchProposals() {
-    const { data } = await axios.get(`${apiLocation}/proposals`);
+    const { data } = await axios.get(`${apiLocation}/v2/proposals`);
     if (!data || data.error) return console.error(`failed to fetch from API`);
     console.debug(`proposals`, data);
     this.save("proposals", data);
@@ -329,26 +329,26 @@ class App extends React.Component<IProps, IState> {
     this.fetchCategories();
   }
   async fetchPosts() {
-    const { data } = await axios.get(`${apiLocation}/posts`);
+    const { data } = await axios.get(`${apiLocation}/v1/posts`);
     if (!data || data.error) return console.error(`failed to fetch from API`);
     console.debug(`posts`, data);
     this.save("posts", data);
   }
   async fetchThreads() {
-    const { data } = await axios.get(`${apiLocation}/threads`);
+    const { data } = await axios.get(`${apiLocation}/v1/threads`);
     if (!data || data.error) return console.error(`failed to fetch from API`);
     console.debug(`threads`, data);
     this.save("threads", data);
   }
   async fetchCategories() {
-    const { data } = await axios.get(`${apiLocation}/categories`);
+    const { data } = await axios.get(`${apiLocation}/v1/categories`);
     if (!data || data.error) return console.error(`failed to fetch from API`);
     console.debug(`categories`, data);
     this.save("categories", data);
   }
 
   async fetchMembers() {
-    const { data } = await axios.get(`${apiLocation}/members`);
+    const { data } = await axios.get(`${apiLocation}/v1/members`);
     if (!data || data.error) return console.error(`failed to fetch from API`);
     console.debug(`members`, data);
     this.save("members", data);

src/components/Proposals/Spending.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { IState, ProposalDetail } from "../../types";
+import { domain } from "../../config";
 
-const amount = (amount: number) => (amount / 1000000).toFixed(2);
+const mJoy = (amount: number) => (amount ? (amount / 1000000).toFixed(2) : `?`);
 
 const executionFailed = (result: string, executed: any) => {
   if (result !== "Approved") return result;
@@ -16,6 +17,8 @@ const Spending = (props: IState) => {
   const spending = props.proposals.filter(
     (p: ProposalDetail) => p && p.type === "spending"
   );
+  console.log(`Found ${spending.length} spending proposals.`);
+  console.log(spending);
 
   const rounds: ProposalDetail[][] = [];
   let unknown = 0;
@@ -25,29 +28,28 @@ const Spending = (props: IState) => {
     const r = p.councilRound;
     rounds[r] = rounds[r] ? rounds[r].concat(p) : [p];
     if (!sums[r]) sums[r] = 0;
-    if (!p.detail) return unknown++;
     if (executionFailed(p.result, p.executed)) return;
-    sum += p.detail.spending[0];
-    sums[r] += p.detail.spending[0];
+    sum += p.amount;
+    sums[r] += p.amount;
   });
 
   return (
     <div className="box text-left">
-      <h1 className="text-left">
-        Total: {amount(sum)}
-        {unknown ? `*` : ``} M tJOY
-      </h1>
-      {unknown ? `* may change until all details are available` : ``}
-      {rounds.map((proposals, i: number) => (
-        <div key={`round-${i}`} className="bg-secondary p-1 my-2">
-          <h2 className="text-left mt-3">
-            Round {i} <small>{amount(sums[i])} M</small>
-          </h2>
-          {proposals.map((p) => (
-            <ProposalLine key={p.id} {...p} />
-          ))}
-        </div>
-      ))}
+      <h1 className="text-left">Total: {mJoy(sum)}M tJOY</h1>
+      {rounds.length
+        ? rounds.map((proposals, i: number) => (
+            <div key={`round-${i}`} className="bg-secondary p-1 my-2">
+              <h2 className="text-left mt-3">
+                Round {i} <small>{mJoy(sums[i])} M</small>
+              </h2>
+              {proposals.map((p) => (
+                <ProposalLine key={p.id} {...p} />
+              ))}
+            </div>
+          ))
+        : spending
+            .sort((a, b) => b.id - a.id)
+            .map((p) => <ProposalLine key={p.id} {...p} />)}
     </div>
   );
 };
@@ -55,18 +57,27 @@ const Spending = (props: IState) => {
 export default Spending;
 
 const ProposalLine = (props: any) => {
-  const { id, title, detail, author, executed, result } = props;
+  const { id, title, amount, author, executed, result } = props;
   const failed = executionFailed(result, executed);
+  const color = failed
+    ? failed === "Pending"
+      ? "warning"
+      : "danger"
+    : "success";
   return (
-    <div key={id} className={failed ? "bg-danger" : "bg-warn"}>
-      <span
-        className={`bg-${failed ? "danger" : "warning"} text-body p-1 mr-2`}
-      >
-        {detail ? amount(detail.spending[0]) : `?`} M
-      </span>
-      <Link to={`/proposals/${id}`}>{title}</Link> (
-      <Link to={`/members/${author}`}>{author.handle}</Link>)
-      {failed ? ` - ${failed}` : ""}
+    <div key={id} className={`bg-${color} d-flex flex-row`}>
+      <div className={`col-1 text-right bg-${color} text-body p-1 mr-2`}>
+        {mJoy(amount)} M
+      </div>
+      <a className="col-1" href={`${domain}/#/proposals/${id}`}>
+        {id}
+      </a>
+      <Link className="col-1" to={`/members/${author.handle}`}>
+        {author.handle}
+      </Link>
+      <Link className="col-4" to={`/proposals/${id}`}>
+        {title}
+      </Link>
     </div>
   );
 };

src/config.ts

@@ -1,6 +1,6 @@
 export const domain = "https://pioneer.joystreamstats.live";
 export const wsLocation = "wss://joystreamstats.live:9945";
-export const apiLocation = "https://api.joystreamstats.live/api/v1"
+export const apiLocation = "https://api.joystreamstats.live/api"
 export const socketLocation = "/socket.io"
 export const hydraLocation = "https://hydra.joystream.org/graphql"
 //export const alternativeBackendApis = "http://localhost:3000"