From 0da45505d7b5bc4d9b1e4aa1e9489f8b1f165725 Mon Sep 17 00:00:00 2001
From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
Date: Mon, 4 Jan 2021 04:00:10 +0300
Subject: Adds Question Rendering

Adds a question component, and calls it on form page. Adds styling for
input types and form page. Lays foundation for validation and
 submission.

Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/pages/FormPage.tsx | 76 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 10 deletions(-)

(limited to 'src/pages/FormPage.tsx')

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 1805897..b966e84 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -1,12 +1,17 @@
 /** @jsx jsx */
-import { jsx } from "@emotion/react";
+import { jsx, css } from "@emotion/react";
 import { Link } from "react-router-dom";
 
+import React, { SyntheticEvent, useEffect, useState } from "react";
 import { useParams } from "react-router";
+
 import HeaderBar from "../components/HeaderBar";
-import { useEffect, useState } from "react";
-import { Form, getForm } from "../api/forms";
+import RenderedQuestion from "../components/Question";
 import Loading from "../components/Loading";
+import ScrollToTop from "../components/ScrollToTop";
+
+import { Form, FormFeatures, getForm } from "../api/forms";
+
 
 interface PathParams {
     id: string
@@ -21,19 +26,70 @@ function FormPage(): JSX.Element {
         getForm(id).then(form => {
             setForm(form);
         });
-    });
+    }, []);
 
     if (!form) {
         return <Loading/>;
     }
 
-    return <div>
-        <HeaderBar title={form.name}/>
-        <div css={{marginLeft: "20px"}}>
-            <h1>{form.description}</h1>
-            <Link to="/" css={{color: "white"}}>Return home</Link>
+    const questions = form.questions.map((question, index) => {
+        return <RenderedQuestion question={question} public_state={new Map()} key={index}/>;
+    });
+
+    function handleSubmit(event: SyntheticEvent) {
+        questions.forEach(prop => {
+            const question = prop.props.question;
+
+            // TODO: Parse input from each question, and submit
+            switch (question.type) {
+            default:
+                console.log(question.id, prop.props.public_state);
+            }
+        });
+
+        event.preventDefault();
+    }
+
+    const open: boolean = form.features.includes(FormFeatures.Open);
+
+    let closed_header = null;
+    let submit = null;
+
+    if (open) {
+        submit = (
+            <div className="submit_form">
+                <button form="form" type="submit">Submit</button>
+            </div>
+        );
+    } else {
+        closed_header = (
+            <div className="closed_header">
+                <div>This form is now closed. You will not be able to submit your response.</div>
+            </div>
+        );
+    }
+
+
+    return (
+        <div>
+            <HeaderBar title={form.name} description={form.description} key={2}/>
+            <div css={css`${require("./css/FormPage.css")};`}>
+                <form id="form" onSubmit={handleSubmit} className="unselectable">
+                    { closed_header }
+                    {questions}
+                </form>
+                <div className="nav unselectable">
+                    <div className={ "nav_buttons" + (open ? "" : " closed") }>
+                        <Link to="/" className="return_home">Return Home</Link>
+                    </div>
+                    <br className="nav_separator"/>
+                    { submit }
+                </div>
+            </div>
+            <div css={css`margin-bottom: 10rem`}/>
+            <ScrollToTop/>
         </div>
-    </div>;
+    );
 }
 
 export default FormPage;
-- 
cgit v1.2.3