QuesListInQuiz.tsx

import { useGetSingleDailyQuizQuery } from '@/features/admin/daily-quizzes/dailyQuizzes'
import { useEffect } from 'react'
import { RxCross2 } from 'react-icons/rx'
import { Loader, Modal, Title } from 'rizzui'
import { Question } from '../../live-quizzes/components/QuestionTable'

type props = {
  modalState: boolean
  setModalState: React.Dispatch<React.SetStateAction<boolean>>
  quizId: string | null
  quizTitle: string | null
}

export default function QuesListInQuiz({ modalState, setModalState, quizId, quizTitle }: props) {
  const { data: dailyQuiz, isLoading } = useGetSingleDailyQuizQuery(quizId, {
    skip: !quizId,
  })

  useEffect(() => {
    if (!isLoading) {
      console.log('dailyQuiz: ', dailyQuiz)
    }
  }, [isLoading, dailyQuiz, quizTitle])

  return (
    <Modal isOpen={modalState} onClose={() => setModalState(false)} size="xl">
      <div className="m-auto px-7 pb-8 pt-6">
        <div className=" flex items-end justify-end">
          <button className="pl-5 text-3xl" onClick={() => setModalState(false)}>
            <RxCross2 size={20} />
          </button>
        </div>

        <Title as="h3" className="pb-2">
          Quiz Name: {quizTitle}
        </Title>
        <Title as="h6" className="mb-4">
          Question List
        </Title>

        <div className="h-96 overflow-x-hidden overflow-y-scroll ">
          {isLoading && (
            <div className="flex items-center justify-center">
              <Loader variant="pulse" />
              <Loader variant="pulse" />
              <Loader variant="pulse" />
            </div>
          )}
          {!isLoading &&
            dailyQuiz?.data?.questionDetails?.map((question: { question: string; _id: string }, index: number) => (
              <label
                key={question._id}
                className={(index % 2 == 0 ? 'bg-gray-50' : '') + ' ' + 'flex w-full cursor-pointer select-none items-center gap-7 border px-3 py-0'}
              >
                <span>{index + 1}</span>
                <Question data={question} />
              </label>
            ))}
        </div>
      </div>
    </Modal>
  )
}