From c71f5cd9a6f552a32ae8a425eaa4dba42fb7532a Mon Sep 17 00:00:00 2001 From: Alex Stan Date: Sat, 1 Jun 2024 23:42:20 +0300 Subject: [PATCH] polish app Signed-off-by: Alex Stan --- app/components/question_component.tsx | 42 ++++++++++++++------------- app/learn/[category]/page.tsx | 15 +++++++--- app/lib/session.ts | 1 + app/results/page.tsx | 28 ++++++++++++++++-- package-lock.json | 15 +++++++++- package.json | 3 +- 6 files changed, 75 insertions(+), 29 deletions(-) diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx index 4c1f541..f4e0f0c 100644 --- a/app/components/question_component.tsx +++ b/app/components/question_component.tsx @@ -17,6 +17,9 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt const handleAnswerClick = (right: boolean) => { setState( (prevState: SessionState) => ({ ...prevState, + answered: prevState.answered + 1, + wrong: prevState.wrong + (right ? 0 : 1), + right: prevState.right + (right ? 1 : 0), answer: { ...prevState.answer, [question.id]: right ? AnswerType.Right : AnswerType.Wrong @@ -29,30 +32,29 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt

- {question.text} + {question && question.text}

- {state.opened[ question.id ] ? ( -

+ {question && state.opened[ question.id ] ? ( +

{question.answer}

- ) : null} - + +
+
) : ( -
- - -
+ )}
) diff --git a/app/learn/[category]/page.tsx b/app/learn/[category]/page.tsx index 372c3c4..5b2939a 100644 --- a/app/learn/[category]/page.tsx +++ b/app/learn/[category]/page.tsx @@ -7,6 +7,7 @@ import { CheckIcon } from '@heroicons/react/20/solid'; import { SessionState } from '@/app/lib/session'; import { AnswerType, Question, getQuestions } from '@/app/lib/question'; import QuestionView from '@/app/components/question_component'; +import ResultScreen from '@/app/results/page'; const Page = ({ params }: { params: { category: string }}) => { @@ -17,7 +18,8 @@ const Page = ({ params }: { params: { category: string }}) => { right: 0, category: '', opened: [], - answer: [] + answer: [], + index: 0 } ); // const category = params.category; @@ -56,6 +58,12 @@ const Page = ({ params }: { params: { category: string }}) => { console.log( "state15", state ); + + // alternate version (show all of them at the same time): + // {/* {questions.map( (q) => (q.answered == AnswerType.Unset) ? : <>)} */} + + const index = state.answered; + console.log( "index18", index ) return (
@@ -75,9 +83,8 @@ const Page = ({ params }: { params: { category: string }}) => { />
- - {/* */} - {questions.map( (q) => (q.answered == AnswerType.Unset) ? : <>)} + + {questions[ index ] ? () : }
=> { diff --git a/app/results/page.tsx b/app/results/page.tsx index fb58d7d..07d93fb 100644 --- a/app/results/page.tsx +++ b/app/results/page.tsx @@ -1,6 +1,8 @@ import { CheckIcon, XMarkIcon, QuestionMarkCircleIcon, FingerPrintIcon, LockClosedIcon } from '@heroicons/react/24/outline' import Logo from '../components/logo'; +import { SessionState } from '../lib/session'; +/* const features = [ { name: 'Correct Questions', @@ -21,8 +23,24 @@ const features = [ icon: QuestionMarkCircleIcon, } ] +*/ -export default function Example() { +const Result = ({name, text1, number, text2, Icon}: {name: string, text1: string, number: number, text2: string, Icon: any}) => { + return ( +
+
+
+
+ {name} +
+
{`${text1} ${number} ${text2}`}
+
+ // {/*

{`${text1} ${number} ${text2}`}

*/} + ) +} + +const ResultScreen = ({state}: {state: SessionState}) => { return (
- {features.map((feature) => ( + {/* {features.map((feature) => (
@@ -61,7 +79,10 @@ export default function Example() {
{feature.description}
- ))} + ))} */} + + +


) } +export default ResultScreen; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 69e8894..c37c1f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "@heroicons/react": "^2.1.3", "next": "14.2.3", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-use-wizard": "^2.3.0" }, "devDependencies": { "@types/node": "^20", @@ -3911,6 +3912,18 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-use-wizard": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-use-wizard/-/react-use-wizard-2.3.0.tgz", + "integrity": "sha512-z06pQNZ18FvoK+ZDW50hOf0uOySo0Hhd7H4y0MLyk/tBCwpUKGBeULosORBVhipUaWihNLpLJxwH5f+85Qt5XA==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index d61a614..4ed312c 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "@heroicons/react": "^2.1.3", "next": "14.2.3", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-use-wizard": "^2.3.0" }, "devDependencies": { "@types/node": "^20",