Added form submissions showing for submitted forms and authors instead of forms itself

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

src/apollo/defs.ts

@@ -32,6 +32,22 @@ const FORM = gql`
           title
         }
       }
+      submissions {
+        answers {
+          ... on InputAnswer {
+            type
+            userInput
+          }
+          ... on ChoiseAnswer {
+            type
+            userChoise
+          }
+        }
+        date
+        user {
+          name
+        }
+      }
       title
     }
   }
@@ -46,6 +62,22 @@ const USER = gql`
       forms {
         id
         title
+        submissions {
+          answers {
+            ... on InputAnswer {
+              type
+              userInput
+            }
+            ... on ChoiseAnswer {
+              type
+              userChoise
+            }
+          }
+          date
+          user {
+            name
+          }
+        }
       }
     }
   }

src/apollo/typeDefs.gql

@@ -42,6 +42,7 @@ type InputQuestion implements Question {
 }
 
 type FormSubmission {
+  user: User
   answers: [Answer!]!
   date: String!
   id: Int!

src/components/DoForm/index.tsx

@@ -107,7 +107,41 @@ const DoForm: React.FC = () => {
       <h1>{form.title}</h1>
       <p>{form.dateCreated}</p>
       <h3>{form.author?.name || 'No author'}</h3>
-
+      {form.submissions ? (
+        <div>
+          <h1>Submission{form.submissions.length > 1 && 's'}:</h1>
+          <ul>
+            {form.submissions.map((submission, submissionIndex) => (
+              <li key={submissionIndex}>
+                <h2>
+                  User:{' '}
+                  {submission.user ? submission.user.name : 'No submitter'}
+                </h2>
+                <ul>
+                  {submission.answers.map(
+                    (answer: InputAnswer | ChoiseAnswer, answerIndex) => (
+                      <li key={answerIndex}>
+                        <h3>{form.questions[answerIndex].title}</h3>
+                        {answer.__typename === 'ChoiseAnswer' && (
+                          <h4>
+                            {
+                              (form.questions[answerIndex] as ChoisesQuestion)
+                                .variants[answer.userChoise].text
+                            }
+                          </h4>
+                        )}
+                        {answer.__typename === 'InputAnswer' && (
+                          <h4>{answer.userInput}</h4>
+                        )}
+                      </li>
+                    )
+                  )}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
         <form onSubmit={handleSubmit}>
           <ul>
             {form.questions.map((el: InputQuestion | ChoisesQuestion) => {
@@ -160,6 +194,7 @@ const DoForm: React.FC = () => {
           </ul>
           {submitLoading ? <p>Uploading...</p> : <input type="submit" />}
         </form>
+      )}
       {submitError && <p>{submitError.message}</p>}
       {submitData && submitData.formSubmit && submitData.formSubmit.success && (
         <p>Successfully uploaded</p>