Merge pull request #11992 from ethereum/quiz-types

Strongly type all Quiz data types [refactor]

Author: pettinarip

src/components/Quiz/QuizWidget/AnswerIcon.tsx

@@ -7,7 +7,7 @@ import { CorrectIcon, IncorrectIcon, TrophyIcon } from "../../icons/quiz"
 
 import { AnswerStatus } from "./useQuizWidget"
 
-interface AnswerIconProps {
+type AnswerIconProps = {
   answerStatus: AnswerStatus
 }
 

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -15,7 +15,7 @@ import {
   VisuallyHidden,
 } from "@chakra-ui/react"
 
-import { TranslationKey } from "@/lib/types"
+import type { AnswerKey, TranslationKey } from "@/lib/types"
 
 import { useQuizWidgetContext } from "./context"
 
@@ -28,7 +28,7 @@ export const QuizRadioGroup = () => {
   } = useQuizWidgetContext()
   const { t } = useTranslation("learn-quizzes")
 
-  const handleSelection = (answerId: string) => {
+  const handleSelection = (answerId: AnswerKey) => {
     const isCorrect =
       answerId === questions[currentQuestionIndex].correctAnswerId
     setCurrentQuestionAnswerChoice({ answerId, isCorrect })

src/components/Quiz/QuizWidget/context.ts

@@ -1,7 +1,6 @@
 import { createContext, Dispatch, SetStateAction, useContext } from "react"
 
-import { QuizStatus, UserStats } from "@/lib/types"
-import { AnswerChoice, Quiz } from "@/lib/interfaces"
+import { AnswerChoice, Quiz, QuizKey, QuizStatus, UserStats } from "@/lib/types"
 
 import { AnswerStatus } from "./useQuizWidget"
 
@@ -12,12 +11,12 @@ type QuizWidgetContextType = Quiz & {
   showResults: boolean
   currentQuestionAnswerChoice: AnswerChoice | null
   quizPageProps:
-    | {
-        currentHandler: (nextKey: string) => void
-        statusHandler: (status: QuizStatus) => void
-        nextQuiz: string | undefined
-      }
-    | false
+  | {
+    currentHandler: (nextKey: QuizKey) => void
+    statusHandler: (status: QuizStatus) => void
+    nextQuiz: QuizKey | undefined
+  }
+  | false
   numberOfCorrectAnswers: number
   quizScore: number
   ratioCorrect: number

src/components/Quiz/QuizWidget/index.tsx

@@ -9,7 +9,7 @@ import {
   VStack,
 } from "@chakra-ui/react"
 
-import { QuizStatus, UserStats } from "@/lib/types"
+import type { QuizKey, QuizStatus, UserStats } from "@/lib/types"
 
 import Translation from "@/components/Translation"
 
@@ -28,7 +28,7 @@ import { useQuizWidget } from "./useQuizWidget"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 type CommonProps = {
-  quizKey: string
+  quizKey: QuizKey
   updateUserStats: Dispatch<SetStateAction<UserStats>>
 }
 
@@ -39,7 +39,7 @@ type StandaloneQuizProps = CommonProps & {
 }
 
 type QuizPageProps = CommonProps & {
-  currentHandler: (nextKey: string) => void
+  currentHandler: (nextKey: QuizKey) => void
   statusHandler: (status: QuizStatus) => void
   isStandaloneQuiz?: false
 }
@@ -76,7 +76,7 @@ const QuizWidget = ({
 
   const quizPageProps = useRef<
     | (Required<Pick<QuizWidgetProps, "currentHandler" | "statusHandler">> & {
-        nextQuiz: string | undefined
+        nextQuiz: QuizKey | undefined
       })
     | false
   >(false)

src/components/Quiz/QuizWidget/useQuizWidget.tsx

@@ -1,14 +1,15 @@
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { shuffle } from "lodash"
 import { useTranslation } from "next-i18next"
 
-import {
+import type {
   AnswerChoice,
   Question,
   Quiz,
+  QuizKey,
   RawQuestion,
   RawQuiz,
-} from "@/lib/interfaces"
+} from "@/lib/types"
 
 import allQuizzesData from "@/data/quizzes"
 import questionBank from "@/data/quizzes/questionBank"
@@ -28,11 +29,9 @@ export const useQuizWidget = ({
   const { t } = useTranslation()
 
   const [quizData, setQuizData] = useState<Quiz | null>(null)
-  const [nextQuiz, setNextQuiz] = useState<string | undefined>(undefined)
-  const [userQuizProgress, setUserQuizProgress] = useState<Array<AnswerChoice>>(
-    []
-  )
-  const [showAnswer, setShowAnswer] = useState<boolean>(false)
+  const [nextQuiz, setNextQuiz] = useState<QuizKey | undefined>(undefined)
+  const [userQuizProgress, setUserQuizProgress] = useState<AnswerChoice[]>([])
+  const [showAnswer, setShowAnswer] = useState(false)
   const [currentQuestionAnswerChoice, setCurrentQuestionAnswerChoice] =
     useState<AnswerChoice | null>(null)
 
@@ -46,18 +45,9 @@ export const useQuizWidget = ({
     setUserQuizProgress([])
     setShowAnswer(false)
 
-    const currentQuizKey =
-      quizKey ||
-      Object.keys(allQuizzesData).filter((quizUri) =>
-        window?.location.href.includes(quizUri)
-      )[0] ||
-      null
-
-    if (!currentQuizKey) return
-
     // Get quiz data from key, shuffle, then truncate if necessary
-    const rawQuiz: RawQuiz = allQuizzesData[currentQuizKey]
-    const questions: Array<Question> = rawQuiz.questions.map((id) => {
+    const rawQuiz: RawQuiz = allQuizzesData[quizKey]
+    const questions: Question[] = rawQuiz.questions.map((id) => {
       const rawQuestion: RawQuestion = questionBank[id]
       return { id, ...rawQuestion }
     })
@@ -99,10 +89,7 @@ export const useQuizWidget = ({
   const quizScore = Math.floor(ratioCorrect * 100)
   const isPassingScore = quizScore > PASSING_QUIZ_SCORE
 
-  const showConfetti = useMemo<boolean>(
-    () => !!quizData && showResults && isPassingScore,
-    [quizData, showResults, isPassingScore]
-  )
+  const showConfetti = !!quizData && showResults && isPassingScore
 
   useEffect(() => {
     if (!showResults) return

src/components/Quiz/QuizzesList.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Heading, OrderedList, Stack, Text } from "@chakra-ui/react"
 
-import type { QuizzesSection, UserStats } from "@/lib/types"
+import type { QuizKey, QuizzesSection, UserStats } from "@/lib/types"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -11,12 +11,12 @@ import Translation from "../Translation"
 
 import QuizItem from "./QuizItem"
 
-export interface QuizzesListProps {
+type QuizzesListProps = {
   userStats: UserStats
-  content: Array<QuizzesSection>
+  content: QuizzesSection[]
   headingId: string
   descriptionId: string
-  quizHandler: (id: string) => void
+  quizHandler: (id: QuizKey) => void
   modalHandler: (isModalOpen: boolean) => void
 }
 

src/components/Quiz/QuizzesModal.tsx

@@ -15,7 +15,11 @@ type QuizzesModalProps = Omit<ModalProps, "isCentered" | "scrollBehavior"> & {
   quizStatus: QuizStatus
 }
 
-const QuizzesModal = ({ children, quizStatus, ...rest }: QuizzesModalProps) => {
+const QuizzesModal = ({
+  children,
+  quizStatus,
+  ...props
+}: QuizzesModalProps) => {
   const getStatusColor = (): ModalContentProps["bg"] => {
     if (quizStatus === "neutral") {
       return "neutral"
@@ -31,7 +35,7 @@ const QuizzesModal = ({ children, quizStatus, ...rest }: QuizzesModalProps) => {
       isCentered
       size={{ base: "full", md: "xl" }}
       scrollBehavior="inside"
-      {...rest}
+      {...props}
     >
       <ModalOverlay bg="blackAlpha.700" />
 

src/components/Quiz/useLocalQuizData.ts

@@ -1,4 +1,4 @@
-import { UserStats } from "@/lib/types"
+import type { CompletedQuizzes, UserStats } from "@/lib/types"
 
 import { USER_STATS_KEY } from "@/lib/constants"
 
@@ -7,7 +7,7 @@ import { useLocalStorage } from "@/hooks/useLocalStorage"
 export const INITIAL_USER_STATS: UserStats = {
   score: 0,
   average: [],
-  completed: {},
+  completed: {} as CompletedQuizzes,
 }
 
 export const useLocalQuizData = () => {

src/data/quizzes/index.ts

@@ -1,9 +1,7 @@
-// Import data types
-import type { QuizzesSection } from "@/lib/types"
-import type { RawQuizzes } from "@/lib/interfaces"
+import type { QuizzesSection, RawQuizzes } from "@/lib/types"
 
 // Declare hash-map of quizzes based on slug key
-const quizzes: RawQuizzes = {
+const quizzes = {
   "what-is-ethereum": {
     title: "what-is-ethereum",
     questions: ["a001", "a002", "a003", "a004", "a005"],
@@ -48,7 +46,7 @@ const quizzes: RawQuizzes = {
     title: "run-a-node",
     questions: ["l001", "l002", "l003", "l004", "l005", "l006"],
   },
-}
+} satisfies RawQuizzes
 
 export const ethereumBasicsQuizzes: QuizzesSection[] = [
   {

src/data/quizzes/questionBank.ts

@@ -1,8 +1,8 @@
 // Import data types
-import type { QuestionBank } from "@/lib/interfaces"
+import type { QuestionBank } from "@/lib/types"
 
 // Declare hash map of question bank
-const questionBank: QuestionBank = {
+const questionBank = {
   // What is Ethereum?
   a001: {
     prompt: "a001-prompt",
@@ -1348,6 +1348,6 @@ const questionBank: QuestionBank = {
     ],
     correctAnswerId: "l006-b",
   },
-}
+} as const satisfies QuestionBank
 
 export default questionBank