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/LandingPage.tsx')

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

