Proposals

package.json

@@ -13,6 +13,7 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "bootstrap": "^4.5.3",
+    "htmr": "^0.9.2",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",

src/App.tsx

@@ -7,7 +7,7 @@ import * as get from "./lib/getters";
 import { domain, wsLocation } from "./config";
 
 // types
-import { Block, NominatorsEntries, Proposals } from "./types";
+import { Api, Block, NominatorsEntries, Proposals } from "./types";
 import { types } from "@joystream/types";
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import { Header } from "@polkadot/types/interfaces";
@@ -22,11 +22,12 @@ interface IState {
   loading: boolean;
   council: any;
   channels: number[];
-  proposals: Proposals;
+  proposals: any;
   posts: number[];
   categories: number[];
   threads: number[];
   domain: string;
+  proposalCount: number;
 }
 
 const initialState = {
@@ -40,12 +41,8 @@ const initialState = {
   council: [],
   categories: [],
   threads: [],
-  proposals: {
-    current: 0,
-    last: 0,
-    active: [],
-    executing: [],
-  },
+  proposals: [],
+  proposalCount: 0,
   domain,
 };
 
@@ -79,11 +76,16 @@ class App extends React.Component<IProps, IState> {
     threads[0] = await get.currentThreadId(api);
 
     let { proposals } = this.state;
-    proposals.last = await get.proposalCount(api);
-    proposals.active = await get.activeProposals(api);
-    proposals.executing = await get.pendingProposals(api);
+    const proposalCount = await get.proposalCount(api);
+    for (let i = proposalCount; i > 0; i--) {
+      this.fetchProposal(api, i);
+    }
 
-    this.setState({ channels, proposals, posts, categories, threads });
+    //proposals.last = await get.proposalCount(api);
+    //proposals.active = await get.activeProposalCount(api);
+    //proposals.executing = await get.pendingProposals(api);
+
+    this.setState({ channels, proposalCount, posts, categories, threads });
 
     const council = await api.query.council.activeCouncil();
 
@@ -143,6 +145,13 @@ class App extends React.Component<IProps, IState> {
     );
   }
 
+  async fetchProposal(api: Api, id: number) {
+    const proposal = await get.proposalDetail(api, id);
+    let { proposals } = this.state;
+    proposals[id] = proposal;
+    this.setState({ proposals });
+  }
+
   // async fetchData() {
   //   // inital axios requests go here
   //   this.setState({ loading: false });
@@ -163,6 +172,7 @@ class App extends React.Component<IProps, IState> {
   constructor(props: any) {
     super(props);
     this.state = initialState;
+    this.fetchProposal = this.fetchProposal.bind(this);
   }
 }
 

src/components/Dashboard/Blocks.tsx

@@ -2,6 +2,7 @@ import { Block } from "../../types";
 import moment from "moment";
 
 const Blocks = (props: { blocks: Block[] }) => {
+  //if (!props.blocks) return ""
   const blocks: Block[] = Array.from(new Set(props.blocks))
     .sort((a: Block, b: Block) => b.id - a.id)
     .slice(0, 5);

src/components/Dashboard/Nominators.tsx

@@ -3,6 +3,8 @@ import User from "../User";
 
 const Nominators = (props: { nominators: string[] }) => {
   const { nominators } = props;
+  //if (!nominators) return ""
+  
   const half = Math.floor(nominators.length / 2) + 1;
 
   return (

src/components/Dashboard/Validators.tsx

@@ -3,6 +3,8 @@ import User from "../User";
 
 const Validators = (props: { validators: string[] }) => {
   const { validators } = props;
+  //if (!validators) return "";
+
   const third = Math.floor(validators.length / 3) + 1;
 
   return (

src/components/Dashboard/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Blocks from "./Blocks";
-import Council from "../Council";
+import { ActiveProposals, Council } from "..";
 import Nominators from "./Nominators";
 import Validators from "./Validators";
 import { Block } from "../../types";
@@ -12,42 +12,36 @@ interface IProps {
   council: any;
   nominators: string[];
   validators: string[];
+  proposals: any;
+  proposalCount: number;
   domain: string;
 }
 
 const Dashboard = (props: IProps) => {
-  const {
-    domain,
-    block,
-    blocks,
-    council,
-    nominators,
-    validators,
-    proposals,
-  } = props;
-
   return (
     <div className="w-100 flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
       <div className="title">
         <h1>
-          <a href={`${domain}`}>Joystream</a>
+          <a href={props.domain}>Joystream</a>
         </h1>
       </div>
-      <Proposals proposals={proposals} />
       <div className="box mt-3">
         <h3>latest block</h3>
-        {block}
+        {props.block}
+      </div>
+      <div className="box">
+        <h3>Active Proposals</h3>
+        <ActiveProposals proposals={props.proposals} />
       </div>
-      <Blocks blocks={blocks} />
       <Link to={"/council"}>
-        <Council council={council} />
+        <Council council={props.council} />
       </Link>
       <div className="d-flex flex-row">
         <Link to={"/validators"}>
-          <Validators validators={validators} />
+          <Validators validators={props.validators} />
         </Link>
         <Link to={"/nominators"}>
-          <Nominators nominators={nominators} />
+          <Nominators nominators={props.nominators} />
         </Link>
       </div>
     </div>

src/components/Proposals/Active.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Proposal from "./ProposalOverlay";
+
+const ActiveProposals = (props: any) => {
+  const active = props.proposals.filter((p: any) => p.stage === "Active");
+  if (!active.length) return <div className="box">No active proposals.</div>;
+  return active.map((p: any, key: number) => <Proposal key={key} {...p} />);
+};
+
+export default ActiveProposals;

src/components/Proposals/Proposal.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import htmr from "htmr";
+
+const Proposal = (props: any) => {
+  const { match, proposals } = props;
+  const id = parseInt(match.params.id);
+
+  const proposal = proposals.find((p: any) => p && p.id === id);
+  if (!proposal) return <div>Proposal not found</div>;
+  const { title, message } = proposal;
+
+  return (
+    <div>
+      <div className="box">
+        <Link className="float-left" to="/">
+          back
+        </Link>
+        <h3>{title}</h3>
+        <div>{htmr(message.replaceAll(`\n`, "<br/>"))}</div>
+        <div>
+          <a href={`https://pioneer.joystreamstats.live/#/proposals/${id}`}>
+            more
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Proposal;

src/components/Proposals/ProposalLink.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {Link} from "react-router-dom"
+
+const ProposalLink = (props: any) => {
+  return (
+    <div>
+      <Link to={`/proposal/${props.id}`}>
+        {props.title}
+      </Link>
+    </div>
+  );
+};
+
+export default ProposalLink;

src/components/Proposals/ProposalOverlay.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import htmr from "htmr";
+
+const ProposalOverlay = (props: any) => {
+  return (
+    <OverlayTrigger
+      placement="right"
+      overlay={
+        <Tooltip id={props.title}>
+          <div className="text-left">
+            {htmr(props.message.replace(/\n/, "<br/>"))}
+          </div>
+        </Tooltip>
+      }
+    >
+      <div>
+        {props.title}{" "}
+        <a href={`https://pioneer.joystreamstats.live/#/proposals/${props.id}`}>
+          &rsaquo;
+        </a>
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default ProposalOverlay;

src/components/Proposals/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Proposal from "./Proposal";
+
+const Proposals = (props: any) => {
+  const { count, proposals } = props;
+
+  const active = proposals.filter((p: any) => p.stage === "Active");
+  const executing = proposals.filter((p: any) => p.exec);
+
+  return (
+    <div className="d-flex flex-column">
+      <div className="d-flex flex-row">
+        {(active.length &&
+          active.map((p: any, key: number) => (
+            <Proposal key={key} {...p} />
+          ))) || <div className="box">No active proposals.</div>}
+      </div>
+      <div className="d-flex flex-row">
+        {(executing.length &&
+          executing.map((p: any, key: number) => (
+            <Proposal key={key} {...p} />
+          ))) || <div className="box">No executing proposals.</div>}
+      </div>
+    </div>
+  );
+};
+
+export default Proposals;

src/components/Proposals/index.tsx~

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Proposals = (props: { proposals: any }) => {
+  const {active, executing} = props.proposals
+  
+  return (
+    <div className="proposals">
+    {active.map(id => <div key={id}>{id}</div>)}
+    </div>
+  );
+};
+
+export default Proposals;

src/components/User/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { domain } from "../../config";
+
+const shortName = (name: string) => {
+  return `${name.slice(0, 5)}..${name.slice(+name.length - 5)}`;
+};
+
+const User = (props: { id: string; handle?: string }) => {
+  const { id, handle } = props;
+  
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={id}>{id}</Tooltip>}
+    >
+      <div>
+        <a href={`${domain}`}>{handle ? handle : shortName(id)}</a>
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default User;

src/components/User/index.tsx~

@@ -0,0 +1,26 @@
+import React from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { domain } from "../../config";
+
+const shortName = (name: string) => {
+  return `${name.slice(0, 5)}..${name.slice(+name.length - 5)}`;
+};
+
+const User = (props: { id: string; handle?: string }) => {
+  const { id, handle } = props;
+  if (!id) return <div>unknown validator</div>;
+
+  console.log(`user`, props);
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={id}>{id}</Tooltip>}
+    >
+      <div>
+        <a href={`${domain}`}>{handle ? handle : shortName(id || `unnamed`)}</a>
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default User;

src/components/index.ts

@@ -1,6 +1,9 @@
 export { default as Routes } from "./Routes"
-
 export { default as Council } from "./Council"
 export { default as Dashboard } from "./Dashboard";
+export { default as Proposals } from "./Proposals";
+export { default as ProposalLink } from "./Proposals/ProposalLink"
+export { default as Proposal } from "./Proposals/Proposal"
+export { default as ActiveProposals } from "./Proposals/Active"
 export { default as Loading } from "./Loading";
 export { default as User } from "./User";

src/config.ts

@@ -1,4 +1,4 @@
-//export const wsLocation = 'wss://joystreamstats.live:9944/'
 export const domain = "https://testnet.joystream.org";
 
 export const wsLocation = "wss://rome-rpc-endpoint.joystream.org:9944/";
+//export const wsLocation = 'wss://joystreamstats.live:9944/'

src/index.css

@@ -41,3 +41,9 @@ h3 {
   right: 10px;
   bottom: 0px;
 }
+
+.proposals {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+}

src/lib/announcements.ts

@@ -16,10 +16,9 @@ import {
   memberHandleByAccount,
   proposalDetail,
 } from './getters'
+import {domain} from '../config'
 import moment from 'moment'
 
-const domain = 'testnet.joystream.org'
-
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
 // query API repeatedly to ensure a result

src/lib/getters.ts

@@ -8,7 +8,7 @@ import {
   ChannelId,
   PostId,
   ProposalDetailsOf,
-  ThreadId
+  ThreadId,
 } from "@joystream/types/augment";
 import { Category, CategoryId } from "@joystream/types/forum";
 import { MemberId, Membership } from "@joystream/types/members";
@@ -62,11 +62,11 @@ export const currentCategoryId = async (api: Api): Promise<number> => {
 // proposals
 
 export const proposalCount = async (api: Api): Promise<number> => {
-  const proposalCount: number = await api.query.proposalsEngine.proposalCount();
-  return proposalCount || 0;
+  const proposalCount: any = await api.query.proposalsEngine.proposalCount();
+  return proposalCount.toJSON() || 0;
 };
 
-const activeProposalCount = async (api: Api): Promise<number> => {
+export const activeProposalCount = async (api: Api): Promise<number> => {
   const proposalCount: number = await api.query.proposalsEngine.activeProposalCount();
   return proposalCount || 0;
 };
@@ -122,7 +122,17 @@ export const proposalDetail = async (
   const args: string[] = [String(id), title, type, stage, result, author];
   const message: string = formatProposalMessage(args);
   const createdAt: number = proposal.createdAt.toNumber();
-  return { createdAt, finalizedAt, parameters, message, stage, result, exec };
+  return {
+    id,
+    title,
+    createdAt,
+    finalizedAt,
+    parameters,
+    message,
+    stage,
+    result,
+    exec,
+  };
 };
 
 // storage providers

src/types.ts

@@ -31,6 +31,8 @@ export interface ProposalDetail {
   stage: string;
   result: string;
   exec: any;
+  id: number;
+  title: string;
 }
 
 export type ProposalArray = number[];

yarn.lock

@@ -1085,7 +1085,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1914,6 +1914,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
+  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -2035,6 +2040,23 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-router-dom@^5.1.6":
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.6.tgz#07b14e7ab1893a837c8565634960dc398564b1fb"
+  integrity sha512-gjrxYqxz37zWEdMVvQtWPFMFj1dRDb4TGOcgyOfSXTrEXdF92L00WE3C471O3TV/RF1oskcStkXsOU0Ete4s/g==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.8.tgz#4614e5ba7559657438e17766bb95ef6ed6acc3fa"
+  integrity sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -5785,6 +5807,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5794,6 +5828,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -5874,7 +5915,7 @@ html-webpack-plugin@4.5.0:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
-htmlparser2@^3.3.0:
+htmlparser2@^3.10.1, htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
   integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
@@ -5886,6 +5927,14 @@ htmlparser2@^3.3.0:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
+htmr@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/htmr/-/htmr-0.9.2.tgz#724a063e08b08f0c6e2aebf8b9810c5f0ac16826"
+  integrity sha512-xeQMcN98ASLmZ2R+UB/FrOSuSv0z+Ah7d0L/4QirZWj2GZwQNQLtt5TtdsN6kJmvh8FbqCSZ/Q/tS3X8Xc5n1w==
+  dependencies:
+    html-entities "^1.2.1"
+    htmlparser2 "^3.10.1"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -6490,6 +6539,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7344,7 +7398,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
   integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7576,6 +7630,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8351,6 +8413,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -9454,7 +9523,7 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
-react-is@^16.3.2, react-is@^16.8.1:
+react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9488,6 +9557,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0, react-router@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.1.tgz#34974c0f4cfdf1655906c95df6a04d80db8b88f0"
@@ -9857,6 +9955,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
@@ -10976,6 +11079,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -11427,6 +11540,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"