From 4bf1b3f5bc9564070dba1481e380179431ddf62b Mon Sep 17 00:00:00 2001
From: Max Nanis
Date: Wed, 4 Jun 2025 05:35:57 +0700
Subject: Saving answers to server. Updating views based on reducer states
 (pagination disable after question is answered).

---
 src/pages/Questions.tsx | 162 +++++++++++++++++++++++++++++++++++-------------
 1 file changed, 118 insertions(+), 44 deletions(-)

(limited to 'src/pages/Questions.tsx')

diff --git a/src/pages/Questions.tsx b/src/pages/Questions.tsx
index a6f0d7b..e9abe31 100644
--- a/src/pages/Questions.tsx
+++ b/src/pages/Questions.tsx
@@ -1,8 +1,14 @@
 import React, {useMemo, useState} from 'react'
-import {UpkQuestion, UpkQuestionChoice} from "@/api";
-import {Card, CardContent, CardTitle, CardFooter, CardHeader} from "@/components/ui/card.tsx";
+import {
+    BodySubmitProfilingQuestionsProductIdProfilingQuestionsPost,
+    ProfilingQuestionsApiFactory,
+    UpkQuestion,
+    UpkQuestionChoice,
+    UserQuestionAnswerIn
+} from "@/api";
+import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components/ui/card.tsx";
 import {useAppDispatch, useAppSelector} from "@/hooks.ts";
-import {addAnswer, makeSelectChoicesByQuestion} from "@/models/answerSlice.ts";
+import answerSlice, {addAnswer, Answer,answerForQuestion, makeSelectChoicesByQuestion, saveAnswer} from "@/models/answerSlice.ts";
 import {useSelector} from "react-redux";
 import {Button} from "@/components/ui/button"
 import {
@@ -12,41 +18,49 @@ import {
     PaginationLink,
     PaginationNext,
 } from "@/components/ui/pagination"
-import { Input } from "@/components/ui/input"
+import {Input} from "@/components/ui/input"
 import {Badge} from "@/components/ui/badge"
 
 const TextEntry: React.FC<{ question: UpkQuestion }> = ({question}) => {
     const dispatch = useAppDispatch()
     const selectAnswer = useMemo(() => makeSelectChoicesByQuestion(question), [question]);
-    const answer = useSelector(selectAnswer);
+    const answer: Answer = useSelector(selectAnswer);
+    const error: Boolean = answer.error_msg.length > 0
 
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         dispatch(addAnswer({question: question, val: event.target.value}))
     };
 
-    // console.log("TextEntry.answer", answer)
-
     return (
-        <Input type="text"
-               id="text-entry-input"
-               aria-describedby=""
-               placeholder=""
-               onKeyDown={handleInputChange}
-        />
-        // <small id="text-entry-msg">{answer.error_msg}</small>
+        <>
+            <Input type="text"
+                   id="text-entry-input"
+                   aria-describedby=""
+                   defaultValue={answer.values.length ? answer.values[0] : ""}
+                   onKeyUp={handleInputChange}
+                   title={error ? answer.error_msg : ""}
+                   className={error ? "border-red-500 focus-visible:ring-red-500" : ""}
+            />
+
+            {
+                error && <p className="text-sm text-red-500 mt-1">{answer.error_msg}</p>
+            }
+        </>
+
     )
 }
 
 const MultiChoiceItem: React.FC<{ question: UpkQuestion, choice: UpkQuestionChoice }> = ({question, choice}) => {
     const dispatch = useAppDispatch()
     const selectAnswer = useMemo(() => makeSelectChoicesByQuestion(question), [question]);
-    const answer = useSelector(selectAnswer);
+    const answer: Answer = useSelector(selectAnswer);
     const selected: Boolean = answer.values.includes(choice.choice_id)
 
     return (
         <li key={choice.choice_id} style={{marginBottom: '0.5rem'}}>
             <Button
                 onClick={() => dispatch(addAnswer({question: question, val: choice.choice_id}))}
+                className="cursor-pointer"
                 variant={selected ? "default" : "secondary"}
             >
                 {choice.choice_text}
@@ -56,27 +70,40 @@ const MultiChoiceItem: React.FC<{ question: UpkQuestion, choice: UpkQuestionChoi
 }
 
 const MultipleChoice: React.FC<{ question: UpkQuestion }> = ({question}) => {
-    // const selectAnswer = useMemo(() => makeSelectChoicesByQuestion(question), [question]);
-    // const answer = useSelector(selectAnswer);
+    const selectAnswer = useMemo(() => makeSelectChoicesByQuestion(question), [question]);
+    const answer: Answer = useSelector(selectAnswer);
+    const error: Boolean = answer.error_msg.length > 0
 
     return (
-        // <small id="text-entry-msg">{answer.error_msg}</small>
-        <ol style={{listStyle: 'none', padding: 0, margin: 0}}>
+        <>
             {
-                question.choices.map(c => {
-                    return <MultiChoiceItem
-                        key={`${question.question_id}-${c.choice_id}`}
-                        question={question}
-                        choice={c}/>
-                })
+                error && <p className="text-sm text-red-500 mt-1">{answer.error_msg}</p>
             }
-        </ol>
+
+            <ol style={{listStyle: 'none', padding: 0, margin: 0}}>
+                {
+                    question.choices.map(c => {
+                        return <MultiChoiceItem
+                            key={`${question.question_id}-${c.choice_id}`}
+                            question={question}
+                            choice={c}/>
+                    })
+                }
+            </ol>
+        </>
     )
 }
 
 
 const ProfileQuestionFull: React.FC<UpkQuestion> = ({question}) => {
+    const dispatch = useAppDispatch()
+    const selectAnswer = useMemo(() => makeSelectChoicesByQuestion(question), [question]);
+    const answer: Answer = useSelector(selectAnswer);
+    const app = useAppSelector(state => state.app)
 
+    const provided_answer = answer.values.length > 0
+    const error: Boolean = answer.error_msg.length > 0
+    const can_submit = provided_answer && !error && !answer.complete
 
     const renderContent = () => {
         switch (question.question_type) {
@@ -87,10 +114,38 @@ const ProfileQuestionFull: React.FC<UpkQuestion> = ({question}) => {
         }
     };
 
+    const submitAnswer = () => {
+        if (!can_submit) {
+            return;
+        }
+
+        if (answer.complete || answer.processing) {
+            return
+        }
+
+        let body: BodySubmitProfilingQuestionsProductIdProfilingQuestionsPost = {
+            'answers': [{
+                "question_id": question.question_id,
+                "answer": answer.values
+            } as UserQuestionAnswerIn
+            ]
+        }
+        console.log("submitAnswers", body)
+        new ProfilingQuestionsApiFactory().submitProfilingQuestionsProductIdProfilingQuestionsPost(app.bpid, app.bpuid, body)
+            .then(res => {
+                if (res.status == 200) {
+                    dispatch(saveAnswer({question: question}))
+                } else {
+                    // let error_msg = res.data.msg
+                }
+            })
+            .catch(err => console.log(err));
+    }
+
     return (
         <Card className="@container/card relative">
             <Badge
-                className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+                className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
                 variant="outline"
                 title={`Currently ${question.task_count.toLocaleString()} surveys use this profiling question`}
             >
@@ -103,21 +158,51 @@ const ProfileQuestionFull: React.FC<UpkQuestion> = ({question}) => {
             <CardContent>
                 {renderContent()}
             </CardContent>
-            <CardFooter className="flex-col gap-2">
-                <Button type="submit" className="w-full">
+            <CardFooter className="flex justify-end">
+                <Button
+                    type="submit"
+                    className="w-1/3 cursor-pointer"
+                    disabled={!can_submit}
+                    onClick={submitAnswer}
+                >
                     Submit
                 </Button>
             </CardFooter>
         </Card>
     )
 }
+// type Props = {
+//     onSetQuestionID: (name: string) => void
+// }
+
+const PaginationIcon: React.FC<{
+    question: UpkQuestion, activeQuestionID: string, idx: number, onSetQuestionID: () => void
+}> = ({question, activeQuestionID, idx, onSetQuestionID}) => {
+
+    const answers = useAppSelector(state => state.answers)
+    const answer = answers[question.question_id]
+
+    return (
+        <PaginationItem>
+            <PaginationLink
+                href="#"
+                title={question.question_text}
+                isActive={question.question_id === activeQuestionID}
+                aria-disabled={answer?.complete}
+
+                onClick={(e) => answer?.complete ? e.preventDefault() : onSetQuestionID(question.question_id)}
+                className={answer?.complete ? "pointer-events-none opacity-50 cursor-not-allowed" : ""}>
+                {idx + 1}
+            </PaginationLink>
+        </PaginationItem>
+    )
+}
 
 const QuestionsPage = () => {
     const questions = useAppSelector(state => state.questions)
-    const [activeQuestionID, setQuestionID] = useState(() => questions[0].question_id);
 
+    const [activeQuestionID, setQuestionID] = useState(() => questions[0].question_id);
     const question = questions.find(q => q.question_id === activeQuestionID);
-    console.log("activeQuestionID:", activeQuestionID, question)
 
     return (
         <div>
@@ -129,18 +214,8 @@ const QuestionsPage = () => {
                 <PaginationContent>
                     {
                         questions.slice(0, 5).map((q, i) => {
-                            return (
-                                <PaginationItem>
-                                    <PaginationLink
-                                        href="#"
-                                        title={q.question_text}
-                                        onClick={() => setQuestionID(q.question_id)}
-                                        isActive={q.question_id === activeQuestionID}
-                                    >
-                                        {i + 1}
-                                    </PaginationLink>
-                                </PaginationItem>
-                            )
+                            return <PaginationIcon key={q.question_id} question={q} idx={i}
+                                                   onSetQuestionID={setQuestionID}/>
                         })
                     }
 
@@ -152,7 +227,6 @@ const QuestionsPage = () => {
                 </PaginationContent>
             </Pagination>
 
-
             <ProfileQuestionFull key={question.question_id} question={question} className="mt-4 mb-4"/>
         </div>
     )
-- 
cgit v1.2.3