Skip to content

Commit 863e341

Browse files
danieldanieleckidanieldanielecki
committed
fix: differences between original fork after merge conflicts differences
1 parent 1da4f64 commit 863e341

File tree

7 files changed

+54
-92
lines changed

7 files changed

+54
-92
lines changed

‎components/NumberInputComponent.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import useDebounce from "@azure-fundamentals/hooks/useDebounce";
22
import { useState, useEffect } from "react";
3+
import { useForm } from "react-hook-form";
34

45
interface Props {
56
totalQuestions: number;
@@ -14,6 +15,7 @@ const NumberInputComponent: React.FC<Props> = ({
1415
}) => {
1516
const [inputValue, setInputValue] = useState(currentQuestionIndex);
1617
const debouncedInputValue = useDebounce(inputValue, 1000);
18+
const { reset } = useForm();
1719

1820
useEffect(() => {
1921
if (debouncedInputValue !== currentQuestionIndex) {
@@ -23,6 +25,7 @@ const NumberInputComponent: React.FC<Props> = ({
2325

2426
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
2527
setInputValue(Number(e.target.value));
28+
reset();
2629
};
2730

2831
return (

‎components/QuizExamForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Question } from "./types";
44
import { FieldArray, FormikProvider, Field, useFormik } from "formik";
55
import { Button } from "./Button";
66
import useResults from "@azure-fundamentals/hooks/useResults";
7+
import LoadingIndicator from "./LoadingIndicator";
78

89
type Props = {
910
isLoading: boolean;
@@ -188,7 +189,7 @@ const QuizExamForm: FC<Props> = ({
188189
setSavedAnswers(saved);
189190
};
190191

191-
if (isLoading) return <p>Loading...</p>;
192+
if (isLoading) return <LoadingIndicator />;
192193

193194
return (
194195
<FormikProvider value={formik}>

‎components/QuizExamFormUF.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useForm, useFieldArray, Controller } from "react-hook-form";
44
import { Button } from "./Button";
55
import useResults from "@azure-fundamentals/hooks/useResults";
66
import { Question, Option } from "@azure-fundamentals/components/types";
7+
import LoadingIndicator from "./LoadingIndicator";
78

89
type Props = {
910
isLoading: boolean;
@@ -169,7 +170,7 @@ const QuizExamForm: FC<Props> = ({
169170
setSavedAnswers(saved);
170171
};
171172

172-
if (isLoading) return <p>Loading...</p>;
173+
if (isLoading) return <LoadingIndicator />;
173174

174175
return (
175176
<form onSubmit={handleSubmit(onSubmit)}>

‎components/QuizForm.tsx‎

Lines changed: 33 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Props } from "./types";
44
import Image from "next/image";
55
import SelectionInput from "./SelectionInput";
66
import { Button } from "./Button";
7-
// import NumberInputComponent from "./NumberInputComponent";
7+
import NumberInputComponent from "./NumberInputComponent";
88
import LoadingIndicator from "./LoadingIndicator";
99

1010
const QuizForm: FC<Props> = ({
@@ -15,10 +15,7 @@ const QuizForm: FC<Props> = ({
1515
totalQuestions,
1616
link,
1717
}) => {
18-
const { register, handleSubmit, watch } = useForm();
19-
const [isThinking, setIsThinking] = useState<boolean>(false);
20-
const [ollamaAvailable, setOllamaAvailable] = useState<boolean>(false);
21-
const [explanation, setExplanation] = useState<string | null>(null);
18+
const { register, handleSubmit, reset, watch } = useForm();
2219

2320
const [showCorrectAnswer, setShowCorrectAnswer] = useState<boolean>(false);
2421
const [lastIndex, setLastIndex] = useState<number>(1);
@@ -36,6 +33,10 @@ const QuizForm: FC<Props> = ({
3633
alt: string;
3734
} | null>(null);
3835

36+
const [isThinking, setIsThinking] = useState<boolean>(false);
37+
const [ollamaAvailable, setOllamaAvailable] = useState<boolean>(false);
38+
const [explanation, setExplanation] = useState<string | null>(null);
39+
3940
useEffect(() => {
4041
const handleEsc = (event: KeyboardEvent) => {
4142
if (event.key === "Escape") {
@@ -71,13 +72,6 @@ const QuizForm: FC<Props> = ({
7172
checkOllamaStatus();
7273
}, []);
7374

74-
const recordShowCorrectAnswer = () => {
75-
setShowCorrectAnswer((prev) => ({
76-
...prev,
77-
[currentQuestionIndex]: true,
78-
}));
79-
};
80-
8175
const isOptionChecked = (optionText: string): boolean | undefined => {
8276
const savedAnswer = savedAnswers[currentQuestionIndex];
8377
if (savedAnswer === null) {
@@ -128,10 +122,11 @@ const QuizForm: FC<Props> = ({
128122
};
129123

130124
if (isLoading) return <LoadingIndicator />;
125+
131126
//Error Handling for loading issues
132127
if (!questionSet) {
133128
handleNextQuestion(1);
134-
return <p>Loading questions failed</p>;
129+
return <p>Loading questions failed.</p>;
135130
}
136131

137132
const { question, options, images } = questionSet!;
@@ -148,54 +143,22 @@ const QuizForm: FC<Props> = ({
148143
};
149144

150145
const noOfAnswers = options.filter((el) => el.isAnswer === true).length;
151-
152-
const handleNextQueClick = () => {
153-
setExplanation(null);
154-
setSavedAnswers((prev) => ({
155-
...prev,
156-
[currentQuestionIndex]: watchInput,
157-
}));
158-
handleNextQuestion(currentQuestionIndex + 1);
159-
};
160-
161-
const isOptionCheckedWithoutReveal = (
162-
optionText: string,
163-
): boolean | undefined => {
164-
const savedAnswer = checkedAnswers[currentQuestionIndex];
165-
if (savedAnswer?.length) {
166-
return savedAnswer.includes(optionText);
167-
} else {
168-
return false;
169-
}
170-
};
171-
172-
const handleRadioCheckboxClick = (event: any, isItMulti: boolean = false) => {
173-
const valueToManage = event.target.value;
174-
let finalData = [valueToManage];
175-
if (isItMulti) {
176-
const savedData = checkedAnswers[currentQuestionIndex] || [];
177-
if (savedData.includes(valueToManage)) {
178-
finalData = savedData.filter((item) => item !== valueToManage);
179-
} else {
180-
finalData = [...savedData, valueToManage];
181-
}
182-
}
183-
setCheckedAnswers((prev) => ({
184-
...prev,
185-
[currentQuestionIndex]: finalData,
186-
}));
187-
};
188-
189146
return (
190147
<form onSubmit={handleSubmit(onSubmit)}>
191148
<div className="relative min-h-40">
192149
<div className="flex justify-center ">
193150
<button
194151
type="button"
195152
onClick={() => {
153+
if (currentQuestionIndex < lastIndex + 2) {
154+
setShowCorrectAnswer(true);
155+
} else {
156+
setShowCorrectAnswer(false);
157+
}
158+
reset();
196159
handleNextQuestion(currentQuestionIndex - 1);
197160
}}
198-
disabled={currentQuestionIndex == 1}
161+
disabled={!(currentQuestionIndex > 1) || !canGoBack}
199162
className="group"
200163
>
201164
<svg
@@ -217,31 +180,27 @@ const QuizForm: FC<Props> = ({
217180
<span className="absolute text-white opacity-10 font-bold text-6xl bottom-0 -z-[1] select-none">
218181
Q&A
219182
</span>
220-
{/* Debounce rerendering issue on prev next click
221-
<NumberInputComponent
183+
<NumberInputComponent
222184
totalQuestions={totalQuestions}
223185
currentQuestionIndex={currentQuestionIndex}
224186
handleNextQuestion={handleNextQuestion}
225-
/> */}
226-
227-
<input
228-
className="w-[40px] text-white rounded-l-md border outline-0 border-slate-700 bg-slate-900 text-center text-md [-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
229-
type="number"
230-
min={0}
231-
max={totalQuestions}
232-
value={currentQuestionIndex}
233-
onChange={(e) => {
234-
handleNextQuestion(Number(e.target.value));
235-
}}
236187
/>
237188
<p className="text-white text-md font-semibold text-center w-[40px] rounded-r-md border bg-slate-800 border-slate-700">
238189
{totalQuestions}
239190
</p>
240191
</div>
241192
<button
242193
type="button"
243-
onClick={handleNextQueClick}
244-
disabled={currentQuestionIndex == totalQuestions}
194+
onClick={() => {
195+
if (currentQuestionIndex < lastIndex) {
196+
setShowCorrectAnswer(true);
197+
} else {
198+
setShowCorrectAnswer(false);
199+
}
200+
reset();
201+
handleNextQuestion(currentQuestionIndex + 1);
202+
}}
203+
disabled={!(currentQuestionIndex < lastIndex)}
245204
className="group"
246205
>
247206
<svg
@@ -309,17 +268,9 @@ const QuizForm: FC<Props> = ({
309268
type={noOfAnswers > 1 ? "checkbox" : "radio"}
310269
label={option.text}
311270
isAnswer={option.isAnswer}
312-
showCorrectAnswer={
313-
showCorrectAnswer[currentQuestionIndex] || false
314-
}
315-
disabled={showCorrectAnswer[currentQuestionIndex] || false}
316-
checked={
317-
isOptionChecked(option.text) ||
318-
isOptionCheckedWithoutReveal(option.text)
319-
}
320-
handleChange={(e: any) => {
321-
handleRadioCheckboxClick(e, noOfAnswers > 1);
322-
}}
271+
showCorrectAnswer={showCorrectAnswer}
272+
disabled={showCorrectAnswer}
273+
defaultChecked={isOptionChecked(option.text)}
323274
/>
324275
</li>
325276
))}
@@ -332,7 +283,7 @@ const QuizForm: FC<Props> = ({
332283
type="submit"
333284
intent="secondary"
334285
size="medium"
335-
disabled={showCorrectAnswer[currentQuestionIndex] || false}
286+
disabled={showCorrectAnswer}
336287
>
337288
Reveal Answer
338289
</Button>
@@ -343,9 +294,10 @@ const QuizForm: FC<Props> = ({
343294
size="medium"
344295
disabled={isThinking}
345296
onClick={() => {
346-
recordShowCorrectAnswer();
297+
setShowCorrectAnswer(true);
347298
setIsThinking(true);
348299
explainCorrectAnswer();
300+
reset();
349301
}}
350302
>
351303
{isThinking ? "Thinking..." : "Explain"}
@@ -364,6 +316,7 @@ const QuizForm: FC<Props> = ({
364316
}));
365317
}
366318
setShowCorrectAnswer(false);
319+
setExplanation(null);
367320
if (currentQuestionIndex === totalQuestions) {
368321
handleNextQuestion(1);
369322
setLastIndex(1);

‎components/SelectionInput.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ type Props = {
88
showCorrectAnswer?: boolean;
99
disabled?: boolean;
1010
checked?: boolean;
11-
handleChange?: (e: React.MouseEvent<HTMLInputElement>) => void;
1211
} & InputHTMLAttributes<HTMLInputElement>;
1312

1413
const SelectionInput = forwardRef<HTMLInputElement, Props>(
@@ -23,8 +22,6 @@ const SelectionInput = forwardRef<HTMLInputElement, Props>(
2322
showCorrectAnswer,
2423
disabled = false,
2524
defaultChecked,
26-
checked,
27-
handleChange = () => {},
2825
...rest
2926
},
3027
ref,
@@ -39,8 +36,6 @@ const SelectionInput = forwardRef<HTMLInputElement, Props>(
3936
id={id}
4037
className={`peer hidden [&:checked_+_label_svg_path]:block `}
4138
defaultChecked={defaultChecked}
42-
checked={checked}
43-
onClick={handleChange}
4439
{...rest}
4540
/>
4641
<label

0 commit comments

Comments
 (0)