fix: corrected a hook that caused re-renders on each mouseclick

EAVFW · Feb 27, 2024 · 3c7783c · 3c7783c
1 parent fdb42c9
commit 3c7783c
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 46 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
@@ -1,7 +1,7 @@
 import "../style/QuickForm.css";
 import React from "react";
 import { useQuickForm } from "../state/QuickFormContext";
-import { Ending, ErrorMessage, Submit } from "./index";
+import { Ending, Submit } from "./index";
 import { Intro } from "./intro/Intro";
 import { SlideRenderer } from "./slide-renderer/SlideRenderer";
 
@@ -21,7 +21,6 @@ export const QuickForm: React.FC = () => {
 
     return (
         <div className="container">
-            {state.errorMsg && state.errorMsg !== "" && <ErrorMessage message={state.errorMsg} />}
             <SlideRenderer />
         </div>
     );

diff --git a/packages/core/src/components/error-message/ErrorMessage.tsx b/packages/core/src/components/error-message/ErrorMessage.tsx
@@ -9,9 +9,15 @@ type ErrorProps = {
 
 export const ErrorMessage: React.FC<ErrorProps> = ({ message }: ErrorProps) => {
   const [isVisible, setIsVisible] = useState(false);
-  const { dispatch } = useQuickForm();
+  const { dispatch, state } = useQuickForm();
 
-  useDelayedClickListener(() => dispatch({ type: "SET_ERROR_MSG", msg: "" }));
+  const resetErrorMessage = () => {
+    if (state.errorMsg !== "") {
+      dispatch({ type: "SET_ERROR_MSG", msg: "" })
+    }
+  }
+
+  useDelayedClickListener(resetErrorMessage);
 
   useEffect(() => {
     if (message) {

diff --git a/packages/core/src/components/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/slide-renderer/SlideRenderer.tsx
@@ -6,39 +6,16 @@ import { Slide } from '../slide/Slide';
 
 
 export const SlideRenderer: React.FC = () => {
-    const { state, goToNextSlide, answerQuestion } = useQuickForm();
+    const { state, answerQuestion } = useQuickForm();
     const currentSlide = state.slides[state.currIdx];
-    // const [allQuestionsAnswered, setAllQuestionsAnswered] = useState(false);
-
-    // useEffect(() => {
-    //     // This effect runs whenever currentSlide changes, to reset our check.
-    //     setAllQuestionsAnswered(currentSlide.isAnswered);
-    // }, [currentSlide]);
-
-    // useEffect(() => {
-    //     // This effect attempts to navigate to the next slide if all questions are answered.
-    //     if (allQuestionsAnswered) {
-    //         goToNextSlide();
-    //     }
-    // }, [allQuestionsAnswered, goToNextSlide]);
 
+    /* If all questions are answered, goToNextSlide() is called by the answerQuestion function (dispatch) */
     const handleGoToNextSlideClicked = () => {
         for (var q of currentSlide.questions) {
             if (typeof q.output !== "undefined" && q.output !== "") {
                 answerQuestion(q.logicalName!, q.output);
             }
         }
-
-        // // Check outside the loop, after state has a chance to update
-        // const allAnswered = !currentSlide.questions.some(q => q.answered === false);
-        // setAllQuestionsAnswered(allAnswered);
-
-        // if (!allAnswered) {
-        //     console.log("Not all question have been answered on slide: ", currentSlide);
-        // } else {
-        //     console.log("All questions answered for slide: ", currentSlide);
-        //     // We no longer directly call goToNextSlide here
-        // }
     };
 
     /* Listens to enter key pressed */
@@ -53,7 +30,7 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'start'}}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
                 onClick={handleGoToNextSlideClicked}
                 showPressEnter={!enterKeyDisabled}
                 children={"Ok"} />

diff --git a/packages/core/src/hooks/useHandleEnterKeypress.ts b/packages/core/src/hooks/useHandleEnterKeypress.ts
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { useEffect } from "react";
 
 export function useHandleEnterKeypress(inputType: "multilinetext" | string, disabled?: boolean, customFunc?: () => void) {

diff --git a/packages/core/src/hooks/useHandleScroll.ts b/packages/core/src/hooks/useHandleScroll.ts
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 import { useEffect, useRef } from "react";
 import { useQuickForm } from "../state/QuickFormContext";
 
 export function useHandleScroll() {
     const timerIdRef = useRef<number>();
-    const { goToNextSlide: goToNextQuestion, goToPrevSlide: goToPreviousQuestion, state: { submitStatus } } = useQuickForm();
+    const { goToNextSlide, goToPrevSlide, state: { submitStatus } } = useQuickForm();
 
     useEffect(() => {
         function handleScroll(event: WheelEvent) {
@@ -17,15 +17,15 @@ export function useHandleScroll() {
             timerIdRef.current = window.setTimeout(() => {
                 if (event.deltaY > 0) {
                     //   handleOkClick();
-                    goToNextQuestion();
+                    goToNextSlide();
                 } else if (event.deltaY <= -1) {
                     //   setErrorMsg({});
                     //   setQuestionNum((prevValue) =>
                     //     prevValue.now - 1 < 0
                     //       ? { ...prevValue }
                     //       : { prev: prevValue.now, now: prevValue.now - 1 }
                     //   );
-                    goToPreviousQuestion();
+                    goToPrevSlide();
                 }
             }, 32);
         }
@@ -37,6 +37,5 @@ export function useHandleScroll() {
         };
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        //   }, [isSubmitting , isSubmitOK]);
     }, [])
-}
+}
diff --git a/packages/core/src/hooks/useKeyPressHandler.ts b/packages/core/src/hooks/useKeyPressHandler.ts
@@ -3,17 +3,15 @@
 
 export function useKeyPressHandler(keys: string[], onclick: (e: KeyboardEvent, key: string) => void) {
 
-
     useEffect(() => {
         function handleKeypress(event: KeyboardEvent) {
-
-
+            event.preventDefault();
             keys.filter(v => v.toLowerCase() === event.key.toLowerCase() && onclick(event, v));
         }
 
         document.addEventListener("keypress", handleKeypress);
 
-        return function() {
+        return function () {
             document.removeEventListener("keypress", handleKeypress);
         };
 

diff --git a/packages/core/src/model/InputType.ts b/packages/core/src/model/InputType.ts
@@ -25,7 +25,7 @@ export type DropDownProperties = {
     inputType: typeof Dropdown;
     maxItems?: number;
     minItems?: number;
-    options?: {
+    options: {
         [key: string]: string;
     }
 }
@@ -40,7 +40,10 @@ export type MultilineProperties = {
 
 export type RadioProperties = {
     inputType: typeof Radio;
-    options: any;
+    options: {
+        [key: string]: string;
+    }
+    direction?: "horizontal" | "vertical";
 }
 
 export type SliderProperties = {

diff --git a/packages/core/src/model/QuestionModel.ts b/packages/core/src/model/QuestionModel.ts
@@ -10,7 +10,7 @@ export class QuestionModel {
     placeholder: string = "";
     paragraph: string = "";
     dataType: "string" | "number" | "boolean" = "string"
-    answered?: boolean = false;
+    answered: boolean = false;
     output: any = {};
     inputProperties?: DropDownProperties | RadioProperties | SliderProperties | undefined;
 

diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
@@ -21,6 +21,7 @@ function parseInputProperties(questionJsonModel: QuestionJsonModel): DropDownPro
             inputProperties = {
                 inputType: questionJsonModel.inputType,
                 options: (questionJsonModel as (QuestionJsonModel & RadioProperties)).options,
+                direction: (questionJsonModel as (QuestionJsonModel & RadioProperties)).direction
             };
             break;
         case "slider":

diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -22,7 +22,7 @@ function mapJsonQuestionToModelQuestion(key: string, question: QuestionJsonModel
         text: question.text,
         placeholder: question.placeholder ?? '',
         paragraph: question.paragraph,
-        answered: typeof (value) !== "undefined" && value !== '' && value !== null && value !== "",
+        answered: typeof (value) !== "undefined" && value !== '' && value !== null,
         inputProperties: parseInputProperties(question),
         output: value ?? '',
     } as QuestionModel;

diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
@@ -4,7 +4,7 @@
     "lib": [ "dom", "dom.iterable", "esnext" ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,