src/pages/FormPage/SuccessPage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/** @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 {returnButtonStyles, navigationStyles, unselectable, mainTextStyles} from "../../commonStyles";


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, mainTextStyles, divStyle]}>
                <h3 css={thanksStyle}>{submitted_text}</h3>
                <div css={navigationStyles}>
                    <Link to="/" css={returnButtonStyles}>Return Home</Link>
                </div>
            </div>
        </div>
    );
}