Add Loading, Error and ProposalFromId Components

package.json

@@ -44,6 +44,7 @@
     "@storybook/addon-knobs": "^5.2.5",
     "@storybook/addon-storysource": "^5.2.5",
     "@types/jest": "^24.0.22",
+    "@types/react-router-dom": "^5.1.4",
     "@types/yup": "^0.26.36",
     "autoprefixer": "^9.7.1",
     "empty": "^0.10.1",

packages/joy-proposals/src/Proposal/Error.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Container, Message } from "semantic-ui-react";
+
+type ErrorProps = {
+  error: any;
+};
+export default function Error({ error }: ErrorProps) {
+  console.error(error);
+  return (
+    <Container style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+      <Message negative>
+        <Message.Header>Oops! We got an error!</Message.Header>
+        <p>{error}</p>
+      </Message>
+    </Container>
+  );
+}

packages/joy-proposals/src/Proposal/Loading.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Loader, Container } from "semantic-ui-react";
+
+type LoadingProps = {
+  text: string;
+};
+
+export default function Loading({ text }: LoadingProps) {
+  return (
+    <Container style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+      <Loader>{text}</Loader>
+    </Container>
+  );
+}

packages/joy-proposals/src/Proposal/ProposalFromId.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+
+import ProposalDetails from "./ProposalDetails";
+import { useTransport, SubstrateTransport } from "../runtime";
+import { usePromise } from "../utils";
+import Error from "./Error";
+import Loading from "./Loading";
+
+export default function ProposalFromId(props: RouteComponentProps<any>) {
+  const {
+    match: {
+      params: { id }
+    }
+  } = props;
+  console.log(`This is ID: ${id} bleeep bloop 🤖`);
+  let transport = useTransport() as SubstrateTransport;
+  console.log("THIS IS THE CONTEXT INSIDE OF PROPOSAL PREVIEW LIST BLEEP BLOOP 🤖");
+  let [proposal, loading, error] = usePromise<any>(transport.proposalById(id), {});
+
+  if (loading && !error) {
+    return <Loading text="Fetching Proposal..." />;
+  } else if (error) {
+    return <Error error={error} />;
+  }
+
+  return <ProposalDetails {...proposal} />;
+}

packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx

@@ -5,6 +5,8 @@ import { ProposalProps } from "./ProposalDetails";
 import ProposalPreview from "./ProposalPreview";
 import { useTransport, SubstrateTransport, TransportContext } from "../runtime";
 import { usePromise } from "../utils";
+import Loading from "./Loading";
+import Error from "./Error";
 
 type ProposalFilter = "all" | "active" | "withdrawn" | "approved" | "rejected" | "slashed";
 
@@ -40,9 +42,9 @@ export default function ProposalPreviewList() {
   const [activeFilter, setActiveFilter] = useState<ProposalFilter>("all");
 
   if (loading && !error) {
-    return <Loader>Fetching Proposals...</Loader>;
+    return <Loading text="Fetching proposals..." />;
   } else if (error) {
-    return <div style={{ color: "red" }}>{error}</div>;
+    return <Error error={error} />;
   }
 
   console.log(proposals);

packages/joy-proposals/src/Proposal/index.tsx

@@ -1,3 +1,4 @@
 export { default as ProposalDetails } from "./ProposalDetails";
 export { default as ProposalPreview } from "./ProposalPreview";
-export { default as ProposalPreviewList } from "./ProposalPreviewList";
+export { default as ProposalPreviewList } from "./ProposalPreviewList";
+export { default as ProposalFromId } from "./ProposalFromId";

packages/joy-proposals/src/index.tsx

@@ -5,7 +5,7 @@ import { AppProps, I18nProps } from "@polkadot/react-components/types";
 import Tabs, { TabItem } from "@polkadot/react-components/Tabs";
 import { ApiProps } from "@polkadot/react-api/types";
 import { SubstrateProvider } from "./runtime";
-import { ProposalPreviewList } from "./Proposal";
+import { ProposalPreviewList, ProposalFromId } from "./Proposal";
 
 import "./index.css";
 
@@ -41,7 +41,7 @@ function App(props: Props): React.ReactElement<Props> {
           <Route path={`${basePath}/active`} component={NotDone} />
           <Route path={`${basePath}/finalized`} component={NotDone} />
           <Route path={`${basePath}/new`} component={NotDone} />
-          <Route path={`${basePath}/:id`} component={NotDone} />
+          <Route path={`${basePath}/:id`} component={ProposalFromId} />
           <Route component={ProposalPreviewList} />
         </Switch>
       </main>

packages/joy-proposals/src/utils.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-export function usePromise<T>(promiseOrFunction: () => Promise<T> | Promise<T>, defaultValue: T) {
+export function usePromise<T>(promiseOrFunction: (() => Promise<T>) | Promise<T>, defaultValue: T) {
   const [state, setState] = useState({ value: defaultValue, error: null, isPending: true });
 
   useEffect(() => {

yarn.lock

@@ -3516,6 +3516,15 @@
     "@types/react" "*"
     "@types/react-router" "*"
 
+"@types/react-router-dom@^5.1.4":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.4.tgz#8d3e0306df74af301cc896309e7d4758f1a4bf71"
+  integrity sha512-LO0z5qqSfWdYtCNsRm8/OMnnkv52hwADJKrAfpKIyfHclORllcgAMGypEA7ajHm38+jOonKLx8nPygNAAZGxtg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
 "@types/react-router@*":
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.3.tgz#7c7ca717399af64d8733d8cb338dd43641b96f2d"