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,59 +107,94 @@ const DoForm: React.FC = () => {
       <h1>{form.title}</h1>
       <p>{form.dateCreated}</p>
       <h3>{form.author?.name || 'No author'}</h3>
-
+      {form.submissions ? (
-      <form onSubmit={handleSubmit}>
+        <div>
-        <ul>
+          <h1>Submission{form.submissions.length > 1 && 's'}:</h1>
-          {form.questions.map((el: InputQuestion | ChoisesQuestion) => {
+          <ul>
-            if (el.__typename === 'InputQuestion')
+            {form.submissions.map((submission, submissionIndex) => (
-              return (
+              <li key={submissionIndex}>
-                <li key={el.number}>
+                <h2>
-                  <label>
+                  User:{' '}
-                    {el.title}
+                  {submission.user ? submission.user.name : 'No submitter'}
-                    <input
+                </h2>
-                      onChange={(e) =>
+                <ul>
-                        answerChange(el.number)(e.currentTarget.value)
+                  {submission.answers.map(
-                      }
+                    (answer: InputAnswer | ChoiseAnswer, answerIndex) => (
-                      type="text"
+                      <li key={answerIndex}>
-                    />
+                        <h3>{form.questions[answerIndex].title}</h3>
-                  </label>
+                        {answer.__typename === 'ChoiseAnswer' && (
-                </li>
+                          <h4>
-              )
+                            {
-            if (el.__typename === 'ChoisesQuestion')
+                              (form.questions[answerIndex] as ChoisesQuestion)
-              return (
+                                .variants[answer.userChoise].text
-                <li key={el.number}>
+                            }
-                  <label>
+                          </h4>
-                    {el.title}
+                        )}
-                    {el.type === 'SELECT' ? (
+                        {answer.__typename === 'InputAnswer' && (
-                      <select
+                          <h4>{answer.userInput}</h4>
-                        onChange={(e) => {
+                        )}
-                          const selectValue = el.variants.findIndex(
+                      </li>
-                            (val) => val.text === e.currentTarget.value
+                    )
-                          )
+                  )}
-                          answerChange(el.number)(selectValue)
+                </ul>
-                        }}
+              </li>
-                        name={el.title}
+            ))}
-                      >
+          </ul>
-                        {el.variants.map((option, index) => (
+        </div>
-                          <option key={index}>{option.text}</option>
+      ) : (
-                        ))}
+        <form onSubmit={handleSubmit}>
-                      </select>
+          <ul>
-                    ) : (
+            {form.questions.map((el: InputQuestion | ChoisesQuestion) => {
-                      <Lists
+              if (el.__typename === 'InputQuestion')
-                        variants={el.variants}
+                return (
-                        onChange={answerChange(el.number)}
+                  <li key={el.number}>
-                        name={el.title}
+                    <label>
-                        type={el.type}
+                      {el.title}
+                      <input
+                        onChange={(e) =>
+                          answerChange(el.number)(e.currentTarget.value)
+                        }
+                        type="text"
                       />
-                    )}
+                    </label>
-                  </label>
+                  </li>
-                </li>
+                )
-              )
+              if (el.__typename === 'ChoisesQuestion')
-            return <li>Unknown question type</li>
+                return (
-          })}
+                  <li key={el.number}>
-        </ul>
+                    <label>
-        {submitLoading ? <p>Uploading...</p> : <input type="submit" />}
+                      {el.title}
-      </form>
+                      {el.type === 'SELECT' ? (
+                        <select
+                          onChange={(e) => {
+                            const selectValue = el.variants.findIndex(
+                              (val) => val.text === e.currentTarget.value
+                            )
+                            answerChange(el.number)(selectValue)
+                          }}
+                          name={el.title}
+                        >
+                          {el.variants.map((option, index) => (
+                            <option key={index}>{option.text}</option>
+                          ))}
+                        </select>
+                      ) : (
+                        <Lists
+                          variants={el.variants}
+                          onChange={answerChange(el.number)}
+                          name={el.title}
+                          type={el.type}
+                        />
+                      )}
+                    </label>
+                  </li>
+                )
+              return <li>Unknown question type</li>
+            })}
+          </ul>
+          {submitLoading ? <p>Uploading...</p> : <input type="submit" />}
+        </form>
+      )}
       {submitError && <p>{submitError.message}</p>}
       {submitData && submitData.formSubmit && submitData.formSubmit.success && (
         <p>Successfully uploaded</p>