From 8aa3be64c1723bb39a7c580472a3ec81f7956125 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 14 Dec 2020 10:50:08 +0200
Subject: Move loading to different component

---
 src/pages/FormPage.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index a675f8e..ad746c7 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -2,26 +2,16 @@
 import { jsx } from "@emotion/core";
 import { Link } from "react-router-dom";
 
-import { HashLoader } from "react-spinners";
-
 import { useParams } from "react-router";
 import HeaderBar from "../components/HeaderBar";
 import { useEffect, useState } from "react";
 import { Form, getForm } from "../api/forms";
+import Loading from "../components/Loading";
 
 interface PathParams {
     id: string
 }
 
-function Loading() {
-    return <div>
-        <HeaderBar title={"Loading..."}/>
-        <div css={{display: "flex", justifyContent: "center"}}>
-            <HashLoader color="white"/>
-        </div>
-    </div>
-}
-
 function FormPage() {
     const { id } = useParams<PathParams>();
 
@@ -38,7 +28,7 @@ function FormPage() {
     }
 
     return <div>
-        <HeaderBar title={form.title}/>
+        <HeaderBar title={form.name}/>
         <div css={{marginLeft: "20px"}}>
             <h1>{form.description}</h1>
             <Link to="/" css={{color: "white"}}>Return home</Link>
-- 
cgit v1.2.3


From ba72b3c5f4c44d45a5eeaf5212b1ec50db747968 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 14 Dec 2020 10:52:14 +0200
Subject: Update LandingPage to use forms from API

---
 src/pages/LandingPage.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 2e2bfd6..127f166 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -1,13 +1,28 @@
 /** @jsx jsx */
 import { css, jsx } from "@emotion/core";
+import { useEffect, useState } from "react";
 
 import HeaderBar from "../components/HeaderBar";
 import FormListing from "../components/FormListing";
 
-import { getForms } from "../api/forms";
+import { getForms, Form } from "../api/forms";
 import OAuth2Button from "../components/OAuth2Button";
+import Loading from "../components/Loading";
 
 function LandingPage() {
+  const [forms, setForms] = useState<Form[]>();
+
+  useEffect(() => {
+    const fetchForms = async () => {
+      setForms(await getForms());
+    }
+    fetchForms();
+  });
+
+  if (!forms) {
+    return <Loading/>;
+  }
+
   return <div>
     <HeaderBar/>
     <div>
@@ -22,7 +37,7 @@ function LandingPage() {
         <OAuth2Button/>
 
 
-        {getForms().map(form => (
+        {forms.map(form => (
           <FormListing key={form.id} form={form}/>
         ))}
       </div>
-- 
cgit v1.2.3