Restructure FormPage

The main FormPage component had gotten very out of hand, with many
moving parts that were hard to parse, understand, or modify. This
refactors breaks things up into separate files with better defined
goals.

Most changes are just straight copies without much change, however some
structural changes have been introduced as a foundation for improving
the app.

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 45 insertions, 0 deletions

diff --git a/src/pages/FormPage/SuccessPage.tsx b/src/pages/FormPage/SuccessPage.tsx
new file mode 100644
index 0000000..e35bd4d
--- /dev/null
+++ b/src/pages/FormPage/SuccessPage.tsx
@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import {jsx, css} from "@emotion/react";
+import {Link} from "react-router-dom";
+
+import {Form} from "../../api/forms";
+import HeaderBar from "../../components/HeaderBar";
+import {unselectable} from "../../commonStyles";
+
+import Navigation from "./Navigation";
+
+
+interface SuccessProps {
+    form: Form
+}
+
+const thanksStyle = css`
+  font-family: "Uni Sans", "Hind", "Arial", sans-serif;
+  margin-top: 15.5rem;
+`;
+
+const divStyle = css`
+  width: 80%;
+`;
+
+export default function Success(props: SuccessProps): JSX.Element {
+    let submitted_text;
+    if (props.form.submitted_text) {
+        submitted_text = props.form.submitted_text.split("\n").map((line, index) => <span key={index}>{line}<br/></span>);
+        submitted_text.push(<span key={submitted_text.length - 1}>{submitted_text.pop()?.props.children[0]}</span>);
+    } else {
+        submitted_text = "Thanks for your response!";
+    }
+
+    return (
+        <div>
+            <HeaderBar title={props.form.name} description={props.form.description}/>
+            <div css={[unselectable, Navigation.containerStyles, divStyle]}>
+                <h3 css={thanksStyle}>{submitted_text}</h3>
+                <div className={"return_button closed"}>
+                    <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
+                </div>
+            </div>
+        </div>
+    );
+}