107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
'use client';
|
|
import { useEffect, useState } from 'react'
|
|
import { Dialog, DialogPanel } from '@headlessui/react'
|
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
|
import Logo from '../../components/logo';
|
|
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/components/results';
|
|
|
|
|
|
const Page = ({ params }: { params: { category: string }}) => {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
const [state, setState]: [SessionState, any] = useState<SessionState>( {
|
|
answered: 0,
|
|
wrong: 0,
|
|
right: 0,
|
|
category: '',
|
|
opened: [],
|
|
answer: [],
|
|
index: 0
|
|
} );
|
|
|
|
// const category = params.category;
|
|
|
|
// const [all_questions, set_all_questions] = useState<Question[]>([]);
|
|
const [questions, setQuestions] = useState<Question[]>([]);
|
|
|
|
useEffect( () => {
|
|
// console.log( params.category );
|
|
const fetch_all_questions = async () => {
|
|
let result = await getQuestions();
|
|
console.log( `all_questions: ${ JSON.stringify( result ) }` );
|
|
// set_all_questions( result );
|
|
result = result.filter( q => q.category === params.category)
|
|
.map(it=>({...it, answered: AnswerType.Unset}));
|
|
//result = result.filter
|
|
setQuestions( result );
|
|
console.log( `q12 uestions: ${ JSON.stringify( questions ) }`, result );
|
|
}
|
|
fetch_all_questions();
|
|
|
|
var ans: AnswerType[];
|
|
questions?.forEach(q => {
|
|
ans[ q.id ] = AnswerType.Unset;
|
|
});
|
|
|
|
/*
|
|
setState( (prevState: SessionState) => ({
|
|
...prevState,
|
|
answer: ans
|
|
}));
|
|
*/
|
|
}, [ params.category ]);
|
|
|
|
console.log( "questions16", questions );
|
|
|
|
|
|
console.log( "state15", state );
|
|
|
|
// alternate version (show all of them at the same time):
|
|
// {/* {questions.map( (q) => (q.answered == AnswerType.Unset) ? <QuestionView key = {q.id} question={q} state={state} setState={setState}/> : <></>)} */}
|
|
|
|
const index = state.answered;
|
|
console.log( "index18", index )
|
|
return (
|
|
<div>
|
|
|
|
<div className="relative isolate px-6 pt-14 lg:px-8">
|
|
<div style={{paddingTop: '72px'}}></div>
|
|
<Logo/>
|
|
<div
|
|
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
|
|
style={{
|
|
clipPath:
|
|
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
<div style={{paddingTop: '72px'}}></div>
|
|
|
|
{questions[ index ] ? (<QuestionView question={questions[ index ]} state = {state} setState={setState}/>) : <ResultScreen state={state}/>}
|
|
|
|
<div
|
|
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
|
|
style={{
|
|
clipPath:
|
|
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page;
|