-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: quiz create form now completed
- Loading branch information
1 parent
dc15d41
commit e8164f8
Showing
8 changed files
with
240 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,21 @@ | ||
| import { Chip } from "@material-tailwind/react"; | ||
| import { size } from "@material-tailwind/react/types/components/chip"; | ||
| import { colors } from "@material-tailwind/react/types/generic"; | ||
| import { Difficulty } from "@generated/graphql.ts"; | ||
|
|
||
| interface DifficultyChipProps { | ||
| // Difficulty of the quiz, if not provided then its Unknown | ||
| difficulty?: Difficulty | null; | ||
| size?: size; | ||
| } | ||
|
|
||
| export function DifficultyChip({ difficulty }: DifficultyChipProps) { | ||
| export function DifficultyChip({ difficulty, size = "md" }: DifficultyChipProps) { | ||
| const color = { | ||
| [Difficulty.Easy]: "green", | ||
| [Difficulty.Medium]: "yellow", | ||
| [Difficulty.Hard]: "red", | ||
| [Difficulty.Unknown]: "gray", | ||
| }[difficulty || Difficulty.Unknown]; | ||
|
|
||
| return <Chip color={color as colors} value={difficulty} />; | ||
| return <Chip color={color as colors} value={difficulty} size={size} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { Chip } from "@material-tailwind/react"; | ||
| import { colors } from "@material-tailwind/react/types/generic"; | ||
| import { QuestionType } from "@generated/graphql.ts"; | ||
|
|
||
| interface QuestionTypeChipProps { | ||
| questionType: QuestionType; | ||
| } | ||
|
|
||
| export function QuestionTypeChip({ questionType }: QuestionTypeChipProps) { | ||
| const color = { | ||
| [QuestionType.Single]: "green", | ||
| [QuestionType.Multi]: "blue", | ||
| }[questionType || QuestionType.Single]; | ||
|
|
||
| return <Chip color={color as colors} value={questionType} size='sm' />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Checkbox, IconButton, Input, Typography } from "@material-tailwind/react"; | ||
| import { Plus, X } from "lucide-react"; | ||
| import { useFieldArray, useFormContext } from "react-hook-form"; | ||
| import { z } from "zod"; | ||
| import { quizFormSchema } from "./quizFormSchema"; | ||
|
|
||
| interface OptionsFieldsProps { | ||
| questionIndex: number; | ||
| } | ||
|
|
||
| export function OptionsFields({ questionIndex }: OptionsFieldsProps) { | ||
| const { | ||
| control, | ||
| register, | ||
| formState: { errors }, | ||
| } = useFormContext<z.infer<typeof quizFormSchema>>(); | ||
| const { fields, append, remove } = useFieldArray({ | ||
| control, | ||
| name: `questions.${questionIndex}.options`, | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-3 px-2 py-2 md:px-4"> | ||
| <div className="flex items-center justify-between"> | ||
| <Typography>Options: {fields.length}</Typography> | ||
| <IconButton onClick={() => append({ text: "", correct: false })} color="green" size="sm"> | ||
| <Plus className="size-5" /> | ||
| </IconButton> | ||
| </div> | ||
|
|
||
| {fields.map((field, optionIndex) => ( | ||
| <div key={field.id} className="mb-4"> | ||
| <div className="mb-2 flex items-center justify-between"> | ||
| <Typography>Option #{optionIndex + 1}</Typography> | ||
| <IconButton onClick={() => remove(optionIndex)} variant="text" size="sm"> | ||
| <X className="size-4 stroke-red-500" /> | ||
| </IconButton> | ||
| </div> | ||
| <div className="flex items-center gap-3"> | ||
| <Input | ||
| {...register(`questions.${questionIndex}.options.${optionIndex}.text`)} | ||
| size="md" | ||
| label="Text" | ||
| placeholder="" | ||
| error={!!errors.questions?.[questionIndex]?.options?.[optionIndex]?.text} | ||
| /> | ||
| <Checkbox | ||
| {...register(`questions.${questionIndex}.options.${optionIndex}.correct`)} | ||
| color="green" | ||
| label="Correct" | ||
| /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { cloneElement } from "react"; | ||
| import { IconButton, Input, Option, Select, Typography } from "@material-tailwind/react"; | ||
| import { Plus, X } from "lucide-react"; | ||
| import { useFieldArray, useFormContext } from "react-hook-form"; | ||
| import { z } from "zod"; | ||
| import { QuestionTypeChip } from "@components/QuestionTypeChip/QuestionTypeChip.tsx"; | ||
| import { QuestionType } from "@generated/graphql.ts"; | ||
| import { OptionsFields } from "./OptionsFields"; | ||
| import { quizFormSchema } from "./quizFormSchema"; | ||
|
|
||
| export function QuestionFields() { | ||
| const { | ||
| control, | ||
| register, | ||
| getValues, | ||
| setValue, | ||
| formState: { errors }, | ||
| } = useFormContext<z.infer<typeof quizFormSchema>>(); | ||
| const { fields, append, remove } = useFieldArray({ | ||
| control, | ||
| name: "questions", | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex items-center justify-between"> | ||
| <Typography>Questions: {fields.length}</Typography> | ||
| <IconButton | ||
| onClick={() => append({ question: "", type: QuestionType.Single, options: [{ text: "", correct: false }] })} | ||
| color="green" | ||
| size="sm" | ||
| > | ||
| <Plus className="size-5" /> | ||
| </IconButton> | ||
| </div> | ||
|
|
||
| {fields.map((field, questionIndex) => ( | ||
| <div key={field.id} className="flex flex-col gap-2"> | ||
| <div className="flex items-center justify-between"> | ||
| <Typography>Question #{questionIndex + 1}</Typography> | ||
| <IconButton onClick={() => remove(questionIndex)} variant="text" size="sm"> | ||
| <X className="size-4 stroke-red-500" /> | ||
| </IconButton> | ||
| </div> | ||
|
|
||
| <Input | ||
| {...register(`questions.${questionIndex}.question`)} | ||
| size="md" | ||
| label="Title" | ||
| placeholder="" | ||
| error={!!errors.questions?.[questionIndex]?.question} | ||
| /> | ||
| <Select | ||
| label="Type" | ||
| value={getValues(`questions.${questionIndex}.type`)} | ||
| onChange={value => | ||
| setValue(`questions.${questionIndex}.type`, (value as QuestionType) || QuestionType.Single) | ||
| } | ||
| selected={element => | ||
| element && | ||
| cloneElement(element, { | ||
| disabled: true, | ||
| className: "flex items-center opacity-100 px-0 gap-2 pointer-events-none", | ||
| }) | ||
| } | ||
| > | ||
| {Object.keys(QuestionType).map(type => ( | ||
| <Option key={`questions-${questionIndex}-${type}`} value={type} className="flex items-center gap-2"> | ||
| <QuestionTypeChip questionType={QuestionType[type]} /> | ||
| </Option> | ||
| ))} | ||
| </Select> | ||
|
|
||
| <OptionsFields questionIndex={questionIndex} /> | ||
|
|
||
| <hr className="border-secondaryShades.5 mt-2 w-full" /> | ||
| </div> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { z } from "zod"; | ||
| import { Difficulty, QuestionType } from "@generated/graphql.ts"; | ||
|
|
||
| export const quizFormSchema = z | ||
| .object({ | ||
| title: z.string().min(5, { message: "Enter a title." }), | ||
| description: z.string().min(50, { message: "Enter a description." }), | ||
| country: z.string().min(1, { message: "Enter a country." }), | ||
| image: z.union([z.literal(""), z.string().trim().url()]), | ||
| questions: z.array( | ||
| z.object({ | ||
| question: z.string().min(15, { message: "Enter a question." }), | ||
| type: z.nativeEnum(QuestionType), | ||
| options: z.array( | ||
| z.object({ | ||
| text: z.string().min(1, { message: "Enter an option." }), | ||
| correct: z.boolean(), | ||
| }) | ||
| ), | ||
| }) | ||
| ), | ||
| difficulty: z.nativeEnum(Difficulty), | ||
| timeLimit: z.number().nonnegative().optional(), | ||
| tags: z.string().array().optional(), | ||
| }) | ||
| .superRefine(({ questions }, ctx) => { | ||
| const hasAllQuestionsHaveAtLeastOneCorrectOption = questions.every(question => { | ||
| return question.options.some(option => option.correct); | ||
| }); | ||
|
|
||
| if (!hasAllQuestionsHaveAtLeastOneCorrectOption) { | ||
| ctx.addIssue({ | ||
| code: z.ZodIssueCode.custom, | ||
| message: "Each question must at least have one correct option.", | ||
| path: ["correctOption"], | ||
| }); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters