From 3240c6cb93396b02674f4e3632671c9138693a72 Mon Sep 17 00:00:00 2001 From: ernestjx <73307945+ernestjx@users.noreply.github.com> Date: Thu, 22 Aug 2024 17:51:25 +0800 Subject: [PATCH] clean up --- app/(main)/questions/edit/[id]/[id].tsx | 327 --------------- app/(main)/questions/edit/[id]/editClient.tsx | 389 ------------------ app/(main)/questions/edit/[id]/page.tsx | 327 --------------- 3 files changed, 1043 deletions(-) delete mode 100644 app/(main)/questions/edit/[id]/[id].tsx delete mode 100644 app/(main)/questions/edit/[id]/editClient.tsx delete mode 100644 app/(main)/questions/edit/[id]/page.tsx diff --git a/app/(main)/questions/edit/[id]/[id].tsx b/app/(main)/questions/edit/[id]/[id].tsx deleted file mode 100644 index 641df0e..0000000 --- a/app/(main)/questions/edit/[id]/[id].tsx +++ /dev/null @@ -1,327 +0,0 @@ -"use client"; -import { useEffect, useState } from "react"; -import { Questions } from '@/types'; -import { QuestionsService } from '../../../../../service/QuestionsService'; -import { TabView, TabPanel } from 'primereact/tabview'; -import { Editor, EditorTextChangeEvent } from "primereact/editor"; -import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch"; -import { DataTable } from 'primereact/datatable'; -import { Column } from 'primereact/column'; -import { Button } from 'primereact/button'; -import { Dialog } from 'primereact/dialog'; -import { TreeSelect, TreeSelectSelectionKeysType } from "primereact/treeselect"; -import { useRouter } from 'next/navigation'; -import { GetStaticPaths, GetStaticProps } from 'next'; -// import { EditQuestionClient } from "./editClient"; -import { usePathname, useSearchParams } from 'next/navigation' -import { useParams } from 'next/navigation' -import { NextPage } from 'next'; - - -interface MyComponentProps { - id: string; -} - - -const EditQuestion: NextPage = ({ id }) => { -// function generateStaticParams() { -// const posts = await fetch('https://.../posts').then((res) => res.json()) - -// return posts.map((post) => ({ -// slug: post.slug, -// })) -// } - - const params = useParams<{ tag: string; id: string }>() - const router = useRouter(); - const pathname = usePathname() - const searchParams = useSearchParams() - - useEffect(() => { - const url = `${pathname}?${searchParams}` - console.log(url) - }, [pathname, searchParams]) - - useEffect(() => { - console.log("params ", params) - console.log("id ", params.id) - const retrieveQuestionRequest: Questions.RetrieveQuestionRequest = { - "ids":[Number(params.id)] - } - QuestionsService.retrieveMCQByIds(retrieveQuestionRequest).then((data) => { - console.log(data); - var mcq = data[0]; - setStem(mcq.stem); - }).catch(()=>{ - }); - }, [params]); - - const [selectedTopicNodes, setSelectedTopicNodes] = useState(); - const [topicNodes, setTopicNodes] = useState(null); - - const [addedOptions, setAddedOptions] = useState([]); - const [stem, setStem] = useState(''); - const [answer, setAnswer] = useState(''); - const [explanation, setExplanation] = useState(''); - const [isAnswer, setIsAnswer] = useState(false); - const [listOfTopics, setListOfTopics] = useState([]); - const [showOptionDialog, setShowOptionDialog] = useState(false); - const [activeTab, setActiveTab] = useState(0); - - useEffect(()=>{ - QuestionsService.getTopics().then((data) => { - console.log("topics initialized: ", data); - setListOfTopics(data); - - }); - }, []) - - useEffect(()=>{ - var nodes = listOfTopics.map( topic => { - let childnode: any[] = []; - if(topic.skills){ - childnode = topic.skills.map( skill => { - return { "key": topic.id+"-"+skill.id, - "label": skill.name, - "data": { "id": skill.id,"name": skill.name , "type": "skill", "topicId": topic.id} - }; - }); - } - return { "key" : topic.id, "label": topic.name, "data" : { "id":topic.id, "name": topic.name, "type": "topic"}, children : childnode } - }); - setTopicNodes(nodes); - }, [listOfTopics]) - - - - const optionsItemTemplate = (option: Questions.Option) => { - return( - <> -
option
- - -
-
explanation
- - - - ) - } - const optionItemActionTemplate = (option: Questions.Option) => { - return( - - ) - } - const optionItemisAnswer = (option: Questions.Option) => { - return {'bg-primary' : option.isAnswer}; - } - - - const optionItemAnswerSwitch = (option: Questions.Option) => { - return( - handleOnSelectAnswer(option.no, e.value)} /> - ) - } - - const OptionsHeader = ( -
-
-
-
-
-
- ); - - const handleOnDeleteOption = (input_no: number) => { - addedOptions.splice(input_no-1, 1); - const reOrderedOptions =addedOptions.map((option, index) => { - return { - no: index + 1, - text: option.text, - isAnswer: option.isAnswer, - explanation: option.explanation - } - }) - setAddedOptions(reOrderedOptions); - } - const handleOnSelectAnswer = (selectedNo: number, checked: boolean) => { - var refreshAnswer = addedOptions; - refreshAnswer[selectedNo-1].isAnswer = checked; - if(checked){ - refreshAnswer =addedOptions.map((option) => { - return { - no: option.no, - text: option.text, - isAnswer: option.no === selectedNo, - explanation: option.explanation - } - }) - } - setAddedOptions(refreshAnswer); - } - const handleOnClickAdd = () => { - //add options - console.log(answer); - if(!answer) - return; - - const options: Questions.Option[] =addedOptions.map((option, index)=> { - return { - no: index + 1, - text: option.text, - isAnswer: option.isAnswer, - explanation: option.explanation - } - }) - options.push({ - no: options.length +1, - text: answer, - isAnswer: isAnswer, - explanation: explanation - }) - - setAddedOptions(options); - setAnswer(""); - setExplanation(""); - setIsAnswer(false); - setShowOptionDialog(false); - }; - - const handleOnClickDone =() => { - console.log("handleOnClickDone"); - console.log(selectedTopicNodes); - //validate - const answer = addedOptions.filter((option: Questions.Option)=>{ - return option.isAnswer - }) - if(!answer || answer.length <= 0 ) - throw "No answer selected" - console.log(answer) - //populate skills for mcq - let selectedTopics: number[] = []; - let selectedSkills: number[] = []; - if(selectedTopicNodes){ - Object.entries(selectedTopicNodes).forEach(([key, data]) => { - console.log("key", key, "data", data); - let topic_skill = key.split("-"); - if(topic_skill.length>1){ - selectedSkills.push(parseInt(topic_skill[1])); - } else { - selectedTopics.push(parseInt(topic_skill[0])); - } - }); - } - //instantiate MCQ object before adding - let mcq = { - stem: stem, - options: addedOptions, - topics: selectedTopics, - skills: selectedSkills, - } - console.log("mcq to be created ", mcq); - QuestionsService.addMCQ(mcq).then((data) => { - console.log("saveQuestion response: ", data); - router.push('/questions/searchlist'); - }) - // .catch((e)=>{ - // console.log("saveQuestion error: ", e); - // e. - // }) - ; - } - return ( -<> -
Add Question
-
- setActiveTab(e.index)}> - -
-
- setSelectedTopicNodes(e.value)} options={topicNodes} - className="md:w-50rem w-full" metaKeySelection={false} selectionMode="checkbox" display="chip" placeholder="Select Topics / Skills" - showClear> -
-
-
-
- -
-
- - -
-
Fill in the stem of the question.
-
- setStem(e.htmlValue || '')} style={{ height: '320px' }} /> -
-
-
- -
- - - {if (!showOptionDialog) return; setShowOptionDialog(false); }}> -
-
Add an option for the question
- -
- setAnswer(e.htmlValue || '')} style={{ height: '100px' }} /> -
-
Explain why this option is correct or wrong
-
- setExplanation(e.htmlValue || '')} style={{ height: '100px' }} /> -
-
-
-
-
-
- -
-
- - - - - - -
-
- -
-
- - -
-
- - -
-
- - - - -
-
 
- {/*
- -
*/} -
- -
- -
- - - - - ) -} - - -export default EditQuestion; diff --git a/app/(main)/questions/edit/[id]/editClient.tsx b/app/(main)/questions/edit/[id]/editClient.tsx deleted file mode 100644 index fe302a3..0000000 --- a/app/(main)/questions/edit/[id]/editClient.tsx +++ /dev/null @@ -1,389 +0,0 @@ -"use client"; -import { useEffect, useState } from "react"; -import { Questions } from '@/types'; -import { QuestionsService } from '../../../../../service/QuestionsService'; -import { TabView, TabPanel } from 'primereact/tabview'; -import { Editor, EditorTextChangeEvent } from "primereact/editor"; -import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch"; -import { DataTable } from 'primereact/datatable'; -import { Column } from 'primereact/column'; -import { Button } from 'primereact/button'; -import { Dialog } from 'primereact/dialog'; -import { TreeSelect, TreeSelectSelectionKeysType } from "primereact/treeselect"; -import { useRouter } from 'next/navigation'; -// import { GetStaticPaths, GetStaticProps } from 'next'; - -// import { usePathname, useSearchParams } from 'next/navigation' -// import { useParams } from 'next/navigation' -import { NextPage } from 'next'; - - -interface MyComponentProps { - id: string; -} - - -const EditQuestionClient: NextPage = ({ id }) => { -// function generateStaticParams() { -// const posts = await fetch('https://.../posts').then((res) => res.json()) - -// return posts.map((post) => ({ -// slug: post.slug, -// })) -// } - - // const params = useParams<{ tag: string; id: string }>() - const router = useRouter(); - // const pathname = usePathname() - // const searchParams = useSearchParams() - - // useEffect(() => { - // const url = `${pathname}?${searchParams}` - // console.log(url) - // }, [pathname, searchParams]) - - // useEffect(() => { - // console.log("params ", params) - // console.log("id ", params.id) - // const retrieveQuestionRequest: Questions.RetrieveQuestionRequest = { - // "ids":[Number(params.id)] - // } - // QuestionsService.retrieveMCQByIds(retrieveQuestionRequest).then((data) => { - // console.log(data); - // var mcq = data[0]; - // setStem(mcq.stem); - // }).catch(()=>{ - // }); - // }, [params]); - - useEffect(() => { - // console.log("params ", params) - console.log("id ", id) - const retrieveQuestionRequest: Questions.RetrieveQuestionRequest = { - "ids":[Number(id)] - } - QuestionsService.retrieveMCQByIds(retrieveQuestionRequest).then((data) => { - console.log(data); - var mcq = data[0]; - setStem(mcq.stem); - }).catch(()=>{ - }); - }, [id]); - - const [selectedTopicNodes, setSelectedTopicNodes] = useState(); - const [topicNodes, setTopicNodes] = useState(null); - - const [addedOptions, setAddedOptions] = useState([]); - const [stem, setStem] = useState(''); - const [answer, setAnswer] = useState(''); - const [explanation, setExplanation] = useState(''); - const [isAnswer, setIsAnswer] = useState(false); - const [listOfTopics, setListOfTopics] = useState([]); - const [showOptionDialog, setShowOptionDialog] = useState(false); - const [activeTab, setActiveTab] = useState(0); - - useEffect(()=>{ - QuestionsService.getTopics().then((data) => { - console.log("topics initialized: ", data); - setListOfTopics(data); - - }); - }, []) - - useEffect(()=>{ - var nodes = listOfTopics.map( topic => { - let childnode: any[] = []; - if(topic.skills){ - childnode = topic.skills.map( skill => { - return { "key": topic.id+"-"+skill.id, - "label": skill.name, - "data": { "id": skill.id,"name": skill.name , "type": "skill", "topicId": topic.id} - }; - }); - } - return { "key" : topic.id, "label": topic.name, "data" : { "id":topic.id, "name": topic.name, "type": "topic"}, children : childnode } - }); - setTopicNodes(nodes); - }, [listOfTopics]) - - - - const optionsItemTemplate = (option: Questions.Option) => { - return( - <> -
option
- - -
-
explanation
- - - - ) - } - const optionItemActionTemplate = (option: Questions.Option) => { - return( - - ) - } - const optionItemisAnswer = (option: Questions.Option) => { - return {'bg-primary' : option.isAnswer}; - } - - - const optionItemAnswerSwitch = (option: Questions.Option) => { - return( - handleOnSelectAnswer(option.no, e.value)} /> - ) - } - - const OptionsHeader = ( -
-
-
-
-
-
- ); - - const handleOnDeleteOption = (input_no: number) => { - addedOptions.splice(input_no-1, 1); - const reOrderedOptions =addedOptions.map((option, index) => { - return { - no: index + 1, - text: option.text, - isAnswer: option.isAnswer, - explanation: option.explanation - } - }) - setAddedOptions(reOrderedOptions); - } - const handleOnSelectAnswer = (selectedNo: number, checked: boolean) => { - var refreshAnswer = addedOptions; - refreshAnswer[selectedNo-1].isAnswer = checked; - if(checked){ - refreshAnswer =addedOptions.map((option) => { - return { - no: option.no, - text: option.text, - isAnswer: option.no === selectedNo, - explanation: option.explanation - } - }) - } - setAddedOptions(refreshAnswer); - } - const handleOnClickAdd = () => { - //add options - console.log(answer); - if(!answer) - return; - - const options: Questions.Option[] =addedOptions.map((option, index)=> { - return { - no: index + 1, - text: option.text, - isAnswer: option.isAnswer, - explanation: option.explanation - } - }) - options.push({ - no: options.length +1, - text: answer, - isAnswer: isAnswer, - explanation: explanation - }) - - setAddedOptions(options); - setAnswer(""); - setExplanation(""); - setIsAnswer(false); - setShowOptionDialog(false); - }; - - const handleOnClickDone =() => { - console.log("handleOnClickDone"); - console.log(selectedTopicNodes); - //validate - const answer = addedOptions.filter((option: Questions.Option)=>{ - return option.isAnswer - }) - if(!answer || answer.length <= 0 ) - throw "No answer selected" - console.log(answer) - //populate skills for mcq - let selectedTopics: number[] = []; - let selectedSkills: number[] = []; - if(selectedTopicNodes){ - Object.entries(selectedTopicNodes).forEach(([key, data]) => { - console.log("key", key, "data", data); - let topic_skill = key.split("-"); - if(topic_skill.length>1){ - selectedSkills.push(parseInt(topic_skill[1])); - } else { - selectedTopics.push(parseInt(topic_skill[0])); - } - }); - } - //instantiate MCQ object before adding - let mcq = { - stem: stem, - options: addedOptions, - topics: selectedTopics, - skills: selectedSkills, - } - console.log("mcq to be created ", mcq); - QuestionsService.addMCQ(mcq).then((data) => { - console.log("saveQuestion response: ", data); - router.push('/questions/searchlist'); - }) - // .catch((e)=>{ - // console.log("saveQuestion error: ", e); - // e. - // }) - ; - } - return ( - <> -
Add Question
-
- setActiveTab(e.index)}> - -
-
- setSelectedTopicNodes(e.value)} options={topicNodes} - className="md:w-50rem w-full" metaKeySelection={false} selectionMode="checkbox" display="chip" placeholder="Select Topics / Skills" - showClear> -
-
-
-
- -
-
- - -
-
Fill in the stem of the question.
-
- setStem(e.htmlValue || '')} style={{ height: '320px' }} /> -
-
-
- -
- - - {if (!showOptionDialog) return; setShowOptionDialog(false); }}> -
-
Add an option for the question
- -
- setAnswer(e.htmlValue || '')} style={{ height: '100px' }} /> -
-
Explain why this option is correct or wrong
-
- setExplanation(e.htmlValue || '')} style={{ height: '100px' }} /> -
-
-
-
-
-
- -
-
- - - - - - -
-
- -
-
- - -
-
- - -
-
- - - - -
-
 
- {/*
- -
*/} -
- -
- -
- - - - - ) -} - - -export default EditQuestionClient; - -// export function generateStaticParams() { -// return [ { id: [""] } ] -// } - -// export function generateStaticParams() { -// return [{ id: '1' }, { id: '2' }, { id: '3' }] -// } - -// export const getStaticPaths: GetStaticPaths = async () => { -// // Define some initial paths to be statically generated at build time -// const initialQuestions = [ -// { id: 1 }, -// { id: 2 }, -// ]; - -// const paths = initialQuestions.map((question) => ({ -// params: { id: question.id.toString() }, -// })); - -// // fallback: true allows other pages to be generated on-demand -// return { paths, fallback: true }; -// }; - -// export const getStaticProps: GetStaticProps = async ({ params }) => { -// const questionId = params?.id; - -// // Fetch the question data based on the ID -// // Simulate fetching the question from an API or data source -// const question = { -// id: Number(questionId), -// title: 'What is React?', -// content: 'React is a JavaScript library for building user interfaces.', -// }; - -// if (!question) { -// return { -// notFound: true, -// }; -// } - -// return { -// props: { -// question, -// }, -// }; -// }; - diff --git a/app/(main)/questions/edit/[id]/page.tsx b/app/(main)/questions/edit/[id]/page.tsx deleted file mode 100644 index 25ed0c0..0000000 --- a/app/(main)/questions/edit/[id]/page.tsx +++ /dev/null @@ -1,327 +0,0 @@ -"use client"; -import { useEffect, useState } from "react"; -import { Questions } from '@/types'; -import { QuestionsService } from '../../../../../service/QuestionsService'; -import { TabView, TabPanel } from 'primereact/tabview'; -import { Editor, EditorTextChangeEvent } from "primereact/editor"; -import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch"; -import { DataTable } from 'primereact/datatable'; -import { Column } from 'primereact/column'; -import { Button } from 'primereact/button'; -import { Dialog } from 'primereact/dialog'; -import { TreeSelect, TreeSelectSelectionKeysType } from "primereact/treeselect"; -import { useRouter } from 'next/navigation'; -import { GetStaticPaths, GetStaticProps } from 'next'; -import { EditQuestionClient } from "./editClient"; -import { usePathname, useSearchParams } from 'next/navigation' -import { useParams } from 'next/navigation' -import { NextPage } from 'next'; - - -interface MyComponentProps { - id: string; -} - - -const EditQuestion: NextPage = ({ id }) => { -// function generateStaticParams() { -// const posts = await fetch('https://.../posts').then((res) => res.json()) - -// return posts.map((post) => ({ -// slug: post.slug, -// })) -// } - - const params = useParams<{ tag: string; id: string }>() - const router = useRouter(); - const pathname = usePathname() - const searchParams = useSearchParams() - - useEffect(() => { - const url = `${pathname}?${searchParams}` - console.log(url) - }, [pathname, searchParams]) - - useEffect(() => { - console.log("params ", params) - console.log("id ", params.id) - const retrieveQuestionRequest: Questions.RetrieveQuestionRequest = { - "ids":[Number(params.id)] - } - QuestionsService.retrieveMCQByIds(retrieveQuestionRequest).then((data) => { - console.log(data); - var mcq = data[0]; - setStem(mcq.stem); - }).catch(()=>{ - }); - }, [params]); - - const [selectedTopicNodes, setSelectedTopicNodes] = useState(); - const [topicNodes, setTopicNodes] = useState(null); - - const [addedOptions, setAddedOptions] = useState([]); - const [stem, setStem] = useState(''); - const [answer, setAnswer] = useState(''); - const [explanation, setExplanation] = useState(''); - const [isAnswer, setIsAnswer] = useState(false); - const [listOfTopics, setListOfTopics] = useState([]); - const [showOptionDialog, setShowOptionDialog] = useState(false); - const [activeTab, setActiveTab] = useState(0); - - useEffect(()=>{ - QuestionsService.getTopics().then((data) => { - console.log("topics initialized: ", data); - setListOfTopics(data); - - }); - }, []) - - useEffect(()=>{ - var nodes = listOfTopics.map( topic => { - let childnode: any[] = []; - if(topic.skills){ - childnode = topic.skills.map( skill => { - return { "key": topic.id+"-"+skill.id, - "label": skill.name, - "data": { "id": skill.id,"name": skill.name , "type": "skill", "topicId": topic.id} - }; - }); - } - return { "key" : topic.id, "label": topic.name, "data" : { "id":topic.id, "name": topic.name, "type": "topic"}, children : childnode } - }); - setTopicNodes(nodes); - }, [listOfTopics]) - - - - const optionsItemTemplate = (option: Questions.Option) => { - return( - <> -
option
- - -
-
explanation
- - - - ) - } - const optionItemActionTemplate = (option: Questions.Option) => { - return( - - ) - } - const optionItemisAnswer = (option: Questions.Option) => { - return {'bg-primary' : option.isAnswer}; - } - - - const optionItemAnswerSwitch = (option: Questions.Option) => { - return( - handleOnSelectAnswer(option.no, e.value)} /> - ) - } - - const OptionsHeader = ( -
-
-
-
-
-
- ); - - const handleOnDeleteOption = (input_no: number) => { - addedOptions.splice(input_no-1, 1); - const reOrderedOptions =addedOptions.map((option, index) => { - return { - no: index + 1, - text: option.text, - isAnswer: option.isAnswer, - explanation: option.explanation - } - }) - setAddedOptions(reOrderedOptions); - } - const handleOnSelectAnswer = (selectedNo: number, checked: boolean) => { - var refreshAnswer = addedOptions; - refreshAnswer[selectedNo-1].isAnswer = checked; - if(checked){ - refreshAnswer =addedOptions.map((option) => { - return { - no: option.no, - text: option.text, - isAnswer: option.no === selectedNo, - explanation: option.explanation - } - }) - } - setAddedOptions(refreshAnswer); - } - const handleOnClickAdd = () => { - //add options - console.log(answer); - if(!answer) - return; - - const options: Questions.Option[] =addedOptions.map((option, index)=> { - return { - no: index + 1, - text: option.text, - isAnswer: option.isAnswer, - explanation: option.explanation - } - }) - options.push({ - no: options.length +1, - text: answer, - isAnswer: isAnswer, - explanation: explanation - }) - - setAddedOptions(options); - setAnswer(""); - setExplanation(""); - setIsAnswer(false); - setShowOptionDialog(false); - }; - - const handleOnClickDone =() => { - console.log("handleOnClickDone"); - console.log(selectedTopicNodes); - //validate - const answer = addedOptions.filter((option: Questions.Option)=>{ - return option.isAnswer - }) - if(!answer || answer.length <= 0 ) - throw "No answer selected" - console.log(answer) - //populate skills for mcq - let selectedTopics: number[] = []; - let selectedSkills: number[] = []; - if(selectedTopicNodes){ - Object.entries(selectedTopicNodes).forEach(([key, data]) => { - console.log("key", key, "data", data); - let topic_skill = key.split("-"); - if(topic_skill.length>1){ - selectedSkills.push(parseInt(topic_skill[1])); - } else { - selectedTopics.push(parseInt(topic_skill[0])); - } - }); - } - //instantiate MCQ object before adding - let mcq = { - stem: stem, - options: addedOptions, - topics: selectedTopics, - skills: selectedSkills, - } - console.log("mcq to be created ", mcq); - QuestionsService.addMCQ(mcq).then((data) => { - console.log("saveQuestion response: ", data); - router.push('/questions/searchlist'); - }) - // .catch((e)=>{ - // console.log("saveQuestion error: ", e); - // e. - // }) - ; - } - return ( -<> -
Add Question
-
- setActiveTab(e.index)}> - -
-
- setSelectedTopicNodes(e.value)} options={topicNodes} - className="md:w-50rem w-full" metaKeySelection={false} selectionMode="checkbox" display="chip" placeholder="Select Topics / Skills" - showClear> -
-
-
-
- -
-
- - -
-
Fill in the stem of the question.
-
- setStem(e.htmlValue || '')} style={{ height: '320px' }} /> -
-
-
- -
- - - {if (!showOptionDialog) return; setShowOptionDialog(false); }}> -
-
Add an option for the question
- -
- setAnswer(e.htmlValue || '')} style={{ height: '100px' }} /> -
-
Explain why this option is correct or wrong
-
- setExplanation(e.htmlValue || '')} style={{ height: '100px' }} /> -
-
-
-
-
-
- -
-
- - - - - - -
-
- -
-
- - -
-
- - -
-
- - - - -
-
 
- {/*
- -
*/} -
- -
- -
- - - - - ) -} - - -export default EditQuestion;