diff --git a/package.json b/package.json index c1864b5..c9ef1d4 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "devDependencies": { "@graphql-codegen/cli": "^1.17.10", "@graphql-codegen/typescript": "^1.17.10", + "eslint-plugin-react-hooks": "^4.2.0", "typescript-plugin-css-modules": "^2.7.0" } } diff --git a/public/index.html b/public/index.html index a02d5c6..8dc3367 100644 --- a/public/index.html +++ b/public/index.html @@ -10,33 +10,13 @@ content="QuestionForm is an open source alternative to Google Forms" /> - - - + QuestionForm
- diff --git a/src/components/App.tsx b/src/components/App.tsx index d63a876..170b013 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -3,40 +3,30 @@ import React from 'react' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import client from '../apollo' -import Context from '../context' -import { useUser } from '../hooks' -import Authorize from './Authorize' -import CreateForm from './CreateForm' -import DoForm from './DoForm' -import Home from './Home' -import Login from './Login' +import Authorize from '../views/Authorize' +import CreateForm from '../views/CreateForm' +import DoForm from '../views/DoForm' +import Home from '../views/Home' +import Login from '../views/Login' import Navbar from './Navbar' -import Register from './Register' -import UserPage from './UserPage' +import Register from '../views/Register' -const App: React.FC = () => { - const userContext = useUser() - - return ( -
- - - - - - - - - - - - - - - - -
- ) -} +const App: React.FC = () => ( +
+ + + + + + + + + + + + + +
+) export default App diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 28c76cf..2428089 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom' import styles from './main.module.css' -interface props { +interface ICardProps { title: string subtitle?: string icon?: React.Component @@ -11,7 +11,7 @@ interface props { id: number } -const Card: React.FC = ({ title, subtitle, id }) => { +const Card: React.FC = ({ title, subtitle, id }) => { return (

{title}

diff --git a/src/components/DoForm/hooks.ts b/src/components/DoForm/hooks.ts deleted file mode 100644 index 5e73887..0000000 --- a/src/components/DoForm/hooks.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useState } from 'react' -import { ChoiseAnswer, InputAnswer } from '../../apollo/typeDefs.gen' - -export const useForm = (initialValue?: (InputAnswer | ChoiseAnswer)[]) => { - const [answers, setAnswer] = useState<(InputAnswer | ChoiseAnswer)[]>( - initialValue || [] - ) - - const answerChange = (num: number) => { - return (value: number | string) => { - setAnswer((prev) => { - return prev.map((el, index) => { - if (index === num) { - if (el.__typename === 'ChoiseAnswer' && typeof value === 'number') - return { ...el, userChoise: value } - if (el.__typename === 'InputAnswer' && typeof value === 'string') - return { ...el, userInput: value } - } - return el - }) - }) - } - } - - return [answers, answerChange] -} diff --git a/src/components/DoForm/index.tsx b/src/components/DoForm/index.tsx deleted file mode 100644 index cfad12f..0000000 --- a/src/components/DoForm/index.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import { useMutation, useQuery } from '@apollo/client' -import React, { FormEvent, useEffect, useState } from 'react' -import { Redirect, useParams } from 'react-router-dom' -import { FORM, FORMSUBMIT } from '../../apollo' -import { - ChoiseAnswer, - ChoisesQuestion, - Form, - InputAnswer, - InputQuestion, - MutationFormSubmitArgs, - QueryFormArgs, - ServerAnswer, -} from '../../apollo/typeDefs.gen' -import Lists from './Lists' - -interface IFormQuery { - form: Form -} - -interface IFormSubmitMutation { - formSubmit: ServerAnswer -} - -const DoForm: React.FC = () => { - const { id: idString } = useParams<{ id: string }>() - - const id = parseInt(idString) - - const { data, error, loading, refetch: refetchForm } = useQuery< - IFormQuery, - QueryFormArgs - >(FORM, { - variables: { id }, - skip: isNaN(id), - }) - - const [ - doFormSubmit, - { error: submitError, data: submitData, loading: submitLoading }, - ] = useMutation(FORMSUBMIT) - - const [answers, setAnswer] = useState<(InputAnswer | ChoiseAnswer)[]>([]) - - const getInitialState = (data: IFormQuery) => { - if (data && data.form) { - return data.form.questions!.flatMap( - (el: InputQuestion | ChoisesQuestion) => { - if (el.__typename === 'ChoisesQuestion') - return [ - { __typename: 'ChoiseAnswer', type: 'CHOISE', userChoise: -1 }, - ] - if (el.__typename === 'InputQuestion') - return [{ __typename: 'InputAnswer', type: 'INPUT', userInput: '' }] - return [] - } - ) - } - return [] - } - - useEffect(() => { - if (data) { - const initialState = getInitialState(data) - setAnswer(initialState) - } - }, [data]) - - if (isNaN(id)) return - - if (loading) return
Loading...
- if (error) return
{error.message}
- - const { form } = data! - - const handleSubmit = async (e: FormEvent) => { - e.preventDefault() - - answers.forEach((el) => { - delete el.__typename - }) - - try { - const submitAnswers = JSON.stringify(answers) - - await doFormSubmit({ - variables: { - formId: id, - answers: submitAnswers, - }, - }) - await refetchForm() - } catch (err) {} - } - - const answerChange = (num: number) => { - return (value: number | string) => { - setAnswer((prev) => { - return prev.map((el, index) => { - if (index === num) { - if (el.__typename === 'ChoiseAnswer' && typeof value === 'number') - return { ...el, userChoise: value } - if (el.__typename === 'InputAnswer' && typeof value === 'string') - return { ...el, userInput: value } - } - return el - }) - }) - } - } - - return ( -
-

{form.title}

-

{form.dateCreated}

-

{form.author?.name || 'No author'}

- {form.submissions ? ( - form.submissions.length > 0 ? ( -
-

Submission{form.submissions.length > 1 && 's'}:

-
    - {form.submissions.map((submission, submissionIndex) => ( -
  • -

    - User:{' '} - {submission.user ? submission.user.name : 'No submitter'} -

    -
      - {submission.answers.map( - (answer: InputAnswer | ChoiseAnswer, answerIndex) => ( -
    • -

      {form.questions![answerIndex].title}

      - {answer.__typename === 'ChoiseAnswer' && ( -

      - { - (form.questions![ - answerIndex - ] as ChoisesQuestion).variants[ - answer.userChoise - ].text - } -

      - )} - {answer.__typename === 'InputAnswer' && ( -

      {answer.userInput}

      - )} -
      • - ) - )} -
    -
    • - ))} -
-
- ) : ( - 'No submissions yet' - ) - ) : ( -
-
    - {form.questions!.map((el: InputQuestion | ChoisesQuestion) => { - if (el.__typename === 'InputQuestion') - return ( -
  • - -
    • - ) - if (el.__typename === 'ChoisesQuestion') - return ( -
  • - -
    • - ) - return
  • Unknown question type
    • - })} -
- {submitLoading ?

Uploading...

: } -
- )} - {submitError &&

{submitError.message}

} - {submitData && submitData.formSubmit && submitData.formSubmit.success && ( -

Successfully uploaded

- )} -
- ) -} - -export default DoForm diff --git a/src/components/DoForm/Lists.tsx b/src/components/FormLists/index.tsx similarity index 87% rename from src/components/DoForm/Lists.tsx rename to src/components/FormLists/index.tsx index b92697e..2c8ffc5 100644 --- a/src/components/DoForm/Lists.tsx +++ b/src/components/FormLists/index.tsx @@ -1,13 +1,13 @@ import React from 'react' -interface IProps { +interface IListsProps { variants: { text: string }[] name: string type: 'CHECK' | 'CHOOSE' onChange: (num: number) => void } -const Lists: React.FC = ({ variants, name, type, onChange }) => { +const Lists: React.FC = ({ variants, name, type, onChange }) => { const inputType = (type === 'CHECK' && 'check') || (type === 'CHOOSE' && 'radio') || undefined diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index c0f0f1a..45c0a65 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Link } from 'react-router-dom' + import styles from './main.module.css' import logo from './logo.svg' diff --git a/src/components/QuestionsForm/hooks.ts b/src/components/QuestionsForm/hooks.ts new file mode 100644 index 0000000..556701b --- /dev/null +++ b/src/components/QuestionsForm/hooks.ts @@ -0,0 +1,34 @@ +import { useState, useCallback } from 'react' +import { AnswerT, QuestionT } from '../../types' +import { getInitialState } from './utils' + +export const useForm = () => { + const [answers, setAnswers] = useState([]) + + const changeAnswer = useCallback( + (num: number) => (value: number | string) => + setAnswers((prev) => + prev.map((el, index) => { + if (index === num) { + if (el.__typename === 'ChoiseAnswer' && typeof value === 'number') + return { ...el, userChoise: value } + if (el.__typename === 'InputAnswer' && typeof value === 'string') + return { ...el, userInput: value } + } + return el + }) + ), + [setAnswers] + ) + + const setInitialState = useCallback( + (questions: QuestionT[]) => { + const state = getInitialState(questions) + console.log('Setting state') + setAnswers(state) + }, + [setAnswers] + ) + + return { answers, changeAnswer, setInitialState } +} diff --git a/src/components/QuestionsForm/index.tsx b/src/components/QuestionsForm/index.tsx new file mode 100644 index 0000000..0918dfc --- /dev/null +++ b/src/components/QuestionsForm/index.tsx @@ -0,0 +1,118 @@ +import React, { FormEvent, useEffect } from 'react' +import { useMutation } from '@apollo/client' + +import { MutationFormSubmitArgs } from '../../apollo/typeDefs.gen' +import { FORMSUBMIT } from '../../apollo' +import Lists from '../FormLists' +import { useForm } from './hooks' +import { QuestionT } from '../../types' +import { RefetchQuestionsFT, IFormSubmitMutation } from './types' + +interface IQuestionsFormProps { + formId: number + questions: QuestionT[] + refetchQuestions: RefetchQuestionsFT +} + +const QuestionsForm: React.FC = ({ + formId, + questions, + refetchQuestions, +}) => { + const [ + doFormSubmit, + { error: submitError, data: submitData, loading: submitLoading }, + ] = useMutation(FORMSUBMIT) + + const { + answers, + changeAnswer, + setInitialState: setInitialFromState, + } = useForm() + + useEffect(() => setInitialFromState(questions), [ + questions, + setInitialFromState, + ]) + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault() + + answers.forEach((el) => { + delete el.__typename + }) + + try { + const submitAnswers = JSON.stringify(answers) + + await doFormSubmit({ + variables: { + formId, + answers: submitAnswers, + }, + }) + await refetchQuestions() + } catch (err) {} + } + + return ( + <> +
+
    + {questions.map((el: QuestionT) => { + if (el.__typename === 'InputQuestion') + return ( +
  • + +
    • + ) + if (el.__typename === 'ChoisesQuestion') + return ( +
  • + +
    • + ) + return
  • Unknown question type
    • + })} +
+ {submitLoading ?

Uploading...

: } +
+ {submitError &&

{submitError.message}

} + {submitData?.formSubmit.success &&

Successfully uploaded

} + + ) +} + +export default QuestionsForm diff --git a/src/components/QuestionsForm/types.ts b/src/components/QuestionsForm/types.ts new file mode 100644 index 0000000..104a08b --- /dev/null +++ b/src/components/QuestionsForm/types.ts @@ -0,0 +1,14 @@ +import { ApolloQueryResult } from '@apollo/client' + +import { IFormQuery, AnswerT, QuestionT } from '../../types' +import { QueryFormArgs, ServerAnswer } from '../../apollo/typeDefs.gen' + +export type RefetchQuestionsFT = ( + variables?: Partial | undefined +) => Promise> + +export interface IFormSubmitMutation { + formSubmit: ServerAnswer +} + +export type GetInitialStateFT = (questions: QuestionT[]) => AnswerT[] diff --git a/src/components/QuestionsForm/utils.ts b/src/components/QuestionsForm/utils.ts new file mode 100644 index 0000000..5ffbf69 --- /dev/null +++ b/src/components/QuestionsForm/utils.ts @@ -0,0 +1,11 @@ +import { AnswerT } from '../../types' +import { GetInitialStateFT } from './types' + +export const getInitialState: GetInitialStateFT = (questions) => + questions.flatMap((el) => { + if (el.__typename === 'ChoisesQuestion') + return [{ __typename: 'ChoiseAnswer', type: 'CHOISE', userChoise: -1 }] + if (el.__typename === 'InputQuestion') + return [{ __typename: 'InputAnswer', type: 'INPUT', userInput: '' }] + return [] + }) diff --git a/src/components/SubmissionsList/index.tsx b/src/components/SubmissionsList/index.tsx new file mode 100644 index 0000000..79e183d --- /dev/null +++ b/src/components/SubmissionsList/index.tsx @@ -0,0 +1,56 @@ +import React from 'react' + +import { + FormSubmission, + InputAnswer, + ChoiseAnswer, + ChoisesQuestion, + Question, +} from '../../apollo/typeDefs.gen' + +interface ISubmissionListProps { + submissions: FormSubmission[] + questions: Question[] +} + +const SubmissionList: React.FC = ({ + submissions, + questions, +}) => { + return submissions.length > 0 ? ( +
    + {submissions.map((submission, submissionIndex) => ( +
  • +

    + User: {submission.user ? submission.user.name : 'No submitter'} +

    +
      + {submission.answers.map( + (answer: InputAnswer | ChoiseAnswer, answerIndex) => ( +
    • +

      {questions![answerIndex].title}

      + {answer.__typename === 'ChoiseAnswer' && ( +

      + { + (questions![answerIndex] as ChoisesQuestion).variants[ + answer.userChoise + ].text + } +

      + )} + {answer.__typename === 'InputAnswer' && ( +

      {answer.userInput}

      + )} +
      • + ) + )} +
    +
    • + ))} +
+ ) : ( +

No submissions yet

+ ) +} + +export default SubmissionList diff --git a/src/components/UserPage/index.tsx b/src/components/UserPage/index.tsx deleted file mode 100644 index 9635d05..0000000 --- a/src/components/UserPage/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { useQuery } from '@apollo/client' -import React from 'react' -import { USER } from '../../apollo' -import { QueryUserArgs, User } from '../../apollo/typeDefs.gen' - -interface IUserQuery { - user: User -} - -const UserPage: React.FC = () => { - const { data, error, loading } = useQuery(USER) - if (loading) return

Loading...

- - if (error) return

{error.message}

- - const { user } = data! - - return ( -
-

Username: {user.name}

-

Email: {user.email}

-

User ID: {user.id}

- {user.forms && ( - <> -

Forms list

- - - )} -
- ) -} - -export default UserPage diff --git a/src/context.ts b/src/context.ts deleted file mode 100644 index 089057d..0000000 --- a/src/context.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { createContext } from 'react' - -export type UserType = { - id: number - email: string - name: string -} - -export type ContextType = { - user: UserType - setUser: (user: UserType) => void -} - -export const initialUser: UserType = { - email: '', - id: 0, - name: '' -} - -const initialState: ContextType = { - user: initialUser, - setUser: () => {} -} - -const Context = createContext(initialState) - -export default Context diff --git a/src/hooks.ts b/src/hooks.ts index 0f85206..2c98944 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -1,16 +1,4 @@ -import { useCallback, useState } from 'react' import { useLocation } from 'react-router-dom' -import { ContextType, initialUser, UserType } from './context' - -export const useUser = (): ContextType => { - const [user, internalSerUser] = useState(initialUser) - - const setUser = useCallback((user: UserType): void => { - internalSerUser(user) - }, []) - - return { user, setUser } -} export const useURLQuery = () => { return new URLSearchParams(useLocation().search) diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..472f12f --- /dev/null +++ b/src/types.ts @@ -0,0 +1,15 @@ +import { + InputQuestion, + ChoisesQuestion, + InputAnswer, + ChoiseAnswer, + Form, +} from './apollo/typeDefs.gen' + +export type QuestionT = InputQuestion | ChoisesQuestion + +export type AnswerT = InputAnswer | ChoiseAnswer + +export interface IFormQuery { + form: Form +} diff --git a/src/components/Authorize/index.tsx b/src/views/Authorize/index.tsx similarity index 99% rename from src/components/Authorize/index.tsx rename to src/views/Authorize/index.tsx index dcd920f..f1e9309 100644 --- a/src/components/Authorize/index.tsx +++ b/src/views/Authorize/index.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Redirect } from 'react-router-dom' + import { useURLQuery } from '../../hooks' const Authorize: React.FC = () => { diff --git a/src/components/CreateForm/hooks.ts b/src/views/CreateForm/hooks.ts similarity index 50% rename from src/components/CreateForm/hooks.ts rename to src/views/CreateForm/hooks.ts index 11da114..6dcec4a 100644 --- a/src/components/CreateForm/hooks.ts +++ b/src/views/CreateForm/hooks.ts @@ -1,72 +1,27 @@ -import { ApolloError, useMutation } from '@apollo/client' -import { ChangeEvent, FormEvent, useState } from 'react' +import { useMutation } from '@apollo/client' +import { useState } from 'react' + import { CREATEFORM } from '../../apollo' -import { MutationCreateFormArgs, ServerAnswer } from '../../apollo/typeDefs.gen' - -type FormQuestion = { - title: string - type: T - variants: string[] -} - -type Form = { - title: string - questions: FormQuestion[] -} - -export type FormatQuestionsToSubmitType = ( - questions: FormQuestion[] -) => string - -interface ICreateFormMutation { - createForm: ServerAnswer -} - -type FormSubmitType = (e: FormEvent) => void - -type HandleFormTitleChangeType = (e: ChangeEvent) => void - -type CreateQuestionType = (type: T) => void - -type HandleQuestionTitleChangeType = ( - questionNumber: number, - e: ChangeEvent -) => void - -type AddVariantType = (questionNumber: number) => void - -type HandleAnswerVariantChangeType = ( - questionNumber: number, - variantNumber: number, - e: ChangeEvent -) => void - -type UseFormCreatorHookTurple = [ - Form, - [ - FormSubmitType, - { - submitData: ICreateFormMutation | null | undefined - submitError: ApolloError | undefined - submitLoading: boolean - } - ], - { - handleFormTitleChange: HandleFormTitleChangeType - addQuestion: CreateQuestionType - handleQuestionTitleChange: HandleQuestionTitleChangeType - handleAnswerVariantChange: HandleAnswerVariantChangeType - addVariant: AddVariantType - }, - () => void -] +import { MutationCreateFormArgs } from '../../apollo/typeDefs.gen' +import { + FormatQuestionsToSubmitFT, + UseFormCreatorHookTurpleT, + FormT, + ICreateFormMutation, + FormSubmitT, + HandleFormTitleChangeFT, + CreateQuestionFT, + HandleQuestionTitleChangeFT, + HandleAnswerVariantChangeFT, + AddVariantFT, +} from './types' const initialState = { title: '', questions: [] } export const useFormCreator = ( - formatQuestionsToSubmit: FormatQuestionsToSubmitType -): UseFormCreatorHookTurple => { - const [form, setState] = useState>(initialState) + formatQuestionsToSubmit: FormatQuestionsToSubmitFT +): UseFormCreatorHookTurpleT => { + const [form, setState] = useState>(initialState) const [ doFormCreation, @@ -78,26 +33,26 @@ export const useFormCreator = ( }, }) - const formSubmit: FormSubmitType = async (e) => { + const formSubmit: FormSubmitT = async (e) => { e.preventDefault() try { await doFormCreation() } catch (err) {} } - const handleFormTitleChange: HandleFormTitleChangeType = (e) => { + const handleFormTitleChange: HandleFormTitleChangeFT = (e) => { const title = e.currentTarget.value setState((prev) => ({ ...prev, title })) } - const createQuestion: CreateQuestionType = (type) => { + const createQuestion: CreateQuestionFT = (type) => { setState(({ title, questions }) => ({ title, questions: questions.concat({ title: '', type, variants: [''] }), })) } - const handleQuestionTitleChange: HandleQuestionTitleChangeType = ( + const handleQuestionTitleChange: HandleQuestionTitleChangeFT = ( questionNumber, e ) => { @@ -110,7 +65,7 @@ export const useFormCreator = ( })) } - const handleAnswerVariantChange: HandleAnswerVariantChangeType = ( + const handleAnswerVariantChange: HandleAnswerVariantChangeFT = ( questionNumber, variantNumber, e @@ -131,7 +86,7 @@ export const useFormCreator = ( })) } - const addVariant: AddVariantType = (questionNumber) => { + const addVariant: AddVariantFT = (questionNumber) => { setState(({ title, questions }) => ({ title, questions: questions.map((el, index) => ({ diff --git a/src/components/CreateForm/index.tsx b/src/views/CreateForm/index.tsx similarity index 78% rename from src/components/CreateForm/index.tsx rename to src/views/CreateForm/index.tsx index 2df35e8..e109891 100644 --- a/src/components/CreateForm/index.tsx +++ b/src/views/CreateForm/index.tsx @@ -1,30 +1,8 @@ import React from 'react' -import { FormatQuestionsToSubmitType, useFormCreator } from './hooks' - -const creationsArray = [ - { title: 'Check', type: 'CHECK', enabled: false }, - { title: 'Input', type: 'INPUT', enabled: true }, - { title: 'Choose', type: 'CHOOSE', enabled: true }, - { title: 'Select', type: 'SELECT', enabled: true }, -] as const - -type QuestionTypes = 'CHECK' | 'INPUT' | 'CHOOSE' | 'SELECT' - -const formatQuestionsToSubmit: FormatQuestionsToSubmitType = (questions) => { - return JSON.stringify( - questions.map((question) => - question.type === 'INPUT' - ? { title: question.title } - : { - ...question, - variants: question.variants.map((variant) => ({ - text: variant, - })), - } - ) - ) -} +import { QuestionTypes } from './types' +import { useFormCreator } from './hooks' +import { creationsArray, formatQuestionsToSubmit } from './utils' const CreateForm: React.FC = () => { const [ @@ -44,8 +22,8 @@ const CreateForm: React.FC = () => { <>
{ - resetForm() formSubmit(e) + resetForm() }} >