Strongly type all Quiz data types [refactor]

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

@@ -8,7 +8,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"
 
@@ -25,7 +25,7 @@ import { QuizSummary } from "./QuizSummary"
 import { useQuizWidget } from "./useQuizWidget"
 
 type CommonProps = {
-  quizKey: string
+  quizKey: QuizKey
   updateUserStats: Dispatch<SetStateAction<UserStats>>
 }
 
@@ -36,7 +36,7 @@ type StandaloneQuizProps = CommonProps & {
 }
 
 type QuizPageProps = CommonProps & {
-  currentHandler: (nextKey: string) => void
+  currentHandler: (nextKey: QuizKey) => void
   statusHandler: (status: QuizStatus) => void
   isStandaloneQuiz?: false
 }
@@ -71,7 +71,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

@@ -10,12 +10,16 @@ import {
 
 import { QuizStatus } from "@/lib/types"
 
-interface IProps extends Omit<ModalProps, "isCentered" | "scrollBehavior"> {
+type QuizzesModalProps = Omit<ModalProps, "isCentered" | "scrollBehavior"> & {
   children: React.ReactNode
   quizStatus: QuizStatus
 }
 
-const QuizzesModal: React.FC<IProps> = ({ children, quizStatus, ...rest }) => {
+const QuizzesModal = ({
+  children,
+  quizStatus,
+  ...props
+}: QuizzesModalProps) => {
   const getStatusColor = (): ModalContentProps["bg"] => {
     if (quizStatus === "neutral") {
       return "neutral"
@@ -31,7 +35,7 @@ const QuizzesModal: React.FC<IProps> = ({ children, quizStatus, ...rest }) => {
       isCentered
       size={{ base: "full", md: "xl" }}
       scrollBehavior="inside"
-      {...rest}
+      {...props}
     >
       <ModalOverlay bg="blackAlpha.700" />
 

src/components/Quiz/useLocalQuizData.ts

@@ -1,28 +1,13 @@
 import { CompletedQuizzes, UserStats } from "@/lib/types"
 
-import allQuizzesData from "@/data/quizzes"
-
 import { USER_STATS_KEY } from "@/lib/constants"
 
 import { useLocalStorage } from "@/hooks/useLocalStorage"
 
-/**
- * Contains each quiz id as key and <boolean, number> to indicate if its completed and the highest score in that quiz
- *
- * Initialize all quizzes as not completed
- */
-const INITIAL_COMPLETED_QUIZZES: CompletedQuizzes = Object.keys(
-  allQuizzesData
-).reduce((object, key) => ({ ...object, [key]: [false, 0] }), {})
-
 export const INITIAL_USER_STATS: UserStats = {
   score: 0,
   average: [],
-  completed: INITIAL_COMPLETED_QUIZZES,
+  completed: {} as CompletedQuizzes,
 }
 
-export const useLocalQuizData = () => {
-  const data = useLocalStorage(USER_STATS_KEY, INITIAL_USER_STATS)
-
-  return data
-}
+export const useLocalQuizData = () => useLocalStorage<UserStats>(USER_STATS_KEY, INITIAL_USER_STATS)

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"],
@@ -36,7 +34,7 @@ const quizzes: RawQuizzes = {
     title: "learn-quizzes:page-assets-merge",
     questions: ["h001", "h002", "h003", "h004", "h005"],
   },
-}
+} 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",
@@ -887,6 +887,6 @@ const questionBank: QuestionBank = {
     ],
     correctAnswerId: "h005-b",
   },
-}
+} as const satisfies QuestionBank
 
 export default questionBank

src/lib/interfaces.ts

@@ -1,5 +1,4 @@
 import { StaticImageData } from "next/image"
-import type { ReactNode } from "react"
 
 import type {
   CrowdinContributor,
@@ -10,50 +9,6 @@ import type {
   TranslationKey,
 } from "@/lib/types"
 
-/**
- * Quiz data interfaces
- */
-export interface AnswerChoice {
-  answerId: string
-  isCorrect: boolean
-}
-
-export interface Answer {
-  id: string
-  label: TranslationKey
-  explanation: TranslationKey
-  moreInfoLabel?: string
-  moreInfoUrl?: string
-}
-
-export interface RawQuestion {
-  prompt: TranslationKey
-  answers: Answer[]
-  correctAnswerId: string
-}
-
-export interface Question extends RawQuestion {
-  id: string
-}
-
-export interface QuestionBank {
-  [key: string]: RawQuestion
-}
-
-export interface RawQuiz {
-  title: TranslationKey
-  questions: string[] // TODO: Force to be an array of questionID's
-}
-
-export interface Quiz {
-  title: string
-  questions: Question[]
-}
-
-export interface RawQuizzes {
-  [key: string]: RawQuiz
-}
-
 export interface DeveloperDocsLink {
   id: TranslationKey
   to: string