From b8450525a576ff2fb5f46011e8498e195ead4a6e Mon Sep 17 00:00:00 2001
From: Dm1tr1y147 <me@dmitriy.icu>
Date: Mon, 19 Oct 2020 22:48:51 +0500
Subject: [PATCH] Added form submissions showing for submitted forms and
authors instead of forms itself
---
.gitignore | 1 +
src/apollo/defs.ts | 32 ++++++++
src/apollo/typeDefs.gql | 1 +
src/components/DoForm/index.tsx | 139 ++++++++++++++++++++------------
4 files changed, 121 insertions(+), 52 deletions(-)
diff --git a/.gitignore b/.gitignore
index e00931e..fc074b5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
# misc
.DS_Store
+.env
.env.local
.env.development.local
.env.test.local
diff --git a/src/apollo/defs.ts b/src/apollo/defs.ts
index e6f0504..a9b6bfe 100644
--- a/src/apollo/defs.ts
+++ b/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
+ }
+ }
}
}
}
diff --git a/src/apollo/typeDefs.gql b/src/apollo/typeDefs.gql
index dbcb68d..e3607fc 100644
--- a/src/apollo/typeDefs.gql
+++ b/src/apollo/typeDefs.gql
@@ -42,6 +42,7 @@ type InputQuestion implements Question {
}
type FormSubmission {
+ user: User
answers: [Answer!]!
date: String!
id: Int!
diff --git a/src/components/DoForm/index.tsx b/src/components/DoForm/index.tsx
index fe15db2..d7d3067 100644
--- a/src/components/DoForm/index.tsx
+++ b/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 onSubmit={handleSubmit}>
- <ul>
- {form.questions.map((el: InputQuestion | ChoisesQuestion) => {
- if (el.__typename === 'InputQuestion')
- return (
- <li key={el.number}>
- <label>
- {el.title}
- <input
- onChange={(e) =>
- answerChange(el.number)(e.currentTarget.value)
- }
- type="text"
- />
- </label>
- </li>
- )
- if (el.__typename === 'ChoisesQuestion')
- return (
- <li key={el.number}>
- <label>
- {el.title}
- {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}
+ {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) => {
+ if (el.__typename === 'InputQuestion')
+ return (
+ <li key={el.number}>
+ <label>
+ {el.title}
+ <input
+ onChange={(e) =>
+ answerChange(el.number)(e.currentTarget.value)
+ }
+ type="text"
/>
- )}
- </label>
- </li>
- )
- return <li>Unknown question type</li>
- })}
- </ul>
- {submitLoading ? <p>Uploading...</p> : <input type="submit" />}
- </form>
+ </label>
+ </li>
+ )
+ if (el.__typename === 'ChoisesQuestion')
+ return (
+ <li key={el.number}>
+ <label>
+ {el.title}
+ {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>