From 8a10c6679ef8f639abe7161dd04357e048f9b04d Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Tue, 16 Jun 2020 23:40:47 +0300
Subject: [PATCH] List signupees

---
 src/models/SignupForm.ts            |  1 +
 src/pages/SignUpPage/SignUpPage.tsx | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/models/SignupForm.ts b/src/models/SignupForm.ts
index 266b75d..1ff02a9 100644
--- a/src/models/SignupForm.ts
+++ b/src/models/SignupForm.ts
@@ -9,6 +9,7 @@ export interface SignupForm {
   start_time: string;
   end_time: string;
   questions: Question[];
+  signups: string[];
 }
 
 export async function getForms(): Promise<SignupForm[]> {
diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx
index cc10ad0..a902b1c 100644
--- a/src/pages/SignUpPage/SignUpPage.tsx
+++ b/src/pages/SignUpPage/SignUpPage.tsx
@@ -155,6 +155,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
       };
       if (payload.id === undefined) {
         const resp = await createSignup(payload);
+        this.fetchSignUp();
         this.setState({
           error: null,
           statusMessage: "Sign-up submitted successfully",
@@ -200,23 +201,37 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
     );
   }
 
+  renderList() {
+    const { signUpForm } = this.state;
+    return (
+      <div>
+        {signUpForm.signups.map(s => (
+          <p key={s}>{s}</p>
+        ))}
+      </div>
+    )
+  }
+
   render() {
     const { match } = this.props;
     const { id } = match.params;
     const { signUpForm, statusMessage } = this.state;
 
-    const content = signUpForm !== null
+    const form = signUpForm !== null
       ? this.renderForm()
       : <div>Loading...</div>;
 
+    const signups = signUpForm && signUpForm.signups ? this.renderList() : null;
+
     return (
       <div className="sign-up-page">
         <Helmet>
           <link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
         </Helmet>
+        {statusMessage}
         <PageSection backgroundColor={ColorEnum.DarkBlue}>
-          {statusMessage}
-          {content}
+          {form}
+          {signups}
         </PageSection>
       </div>
     );