dm1sh/questionForm_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dmitriy Shishkov 2020-10-19 22:48:51 +05:00
parent b7910a5de2
commit b8450525a5
No known key found for this signature in database
GPG Key ID: D76D70029F55183E
4 changed files with 121 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

32
src/apollo/defs.ts
View File

@ -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
}
}
}
}
}

1
src/apollo/typeDefs.gql
View File

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

139
src/components/DoForm/index.tsx
View File

@ -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>