Merge pull request #2 from iQbe-Quiz/quiz_store

Quiz store

src/axios.ts

@@ -33,7 +33,7 @@ axios.interceptors.request.use((request) => {
 
  if (!idToken) return;
 
- request.headers.common['Authorization'] = idToken
+ request.headers.Authorization = idToken
  }) 
  return request
 },(error) => {

src/components/QuizCardList.tsx

@@ -1,37 +1,28 @@
 import QuizCard from "./QuizCard"
-import axios from "../axios"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
+import useQuizzesStore from "../store/quiz"
+import { Center, Loader } from "@mantine/core"
 // import { useFetch } from "../hooks"
 
-interface Quizzes {
- id: number,
- question: string,
- answer: string,
- workbook: string,
- level: string,
- date: Date,
- total: number,
- right: number,
- isFavorite: boolean,
- registerdMylist: number[],
-}
-
 export default function QuizCardList() {
- const userId = 8
- const [ quizList, setList ] = useState<Quizzes[]>()
- // const { data: quizList } = useFetch<Quizzes[]>(`/quizzes/${userId}`)
+ const quizzes = useQuizzesStore(state => state.quizzes)
+ const getQuizzes = useQuizzesStore(state => state.getQuiz)
 
  useEffect(() => {
- axios.get<Quizzes[]>(`/quizzes/${userId}`)
- .then(res => res.data)
- .then(setList)
+ getQuizzes()
  }, [])
 
- if (!quizList) return <div>loading</div>
+ if (!quizzes) { 
+ return (
+ <Center>
+ <Loader/>
+ </Center>
+ )
+ }
 
  return (
  <>
- {quizList?.map(({question, answer}, idx) => (
+ {quizzes?.map(({question, answer}, idx) => (
  <QuizCard 
  key={idx}
  index={idx+1}

src/store/quiz.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand'
+import axios from '../axios'
+import { AxiosRequestConfig } from 'axios'
+
+export type Quiz = {
+ id: number,
+ question: string,
+ answer: string,
+ workbook: string,
+ level: string,
+ date: Date,
+ total: number,
+ right: number,
+ isFavorite: boolean,
+ registerdMylist: number[],
+}
+
+export type QuizRequestParams = {
+ page: number,
+ maxView: number,
+ seed: number,
+ workbooks: number[],
+ levels: number[],
+ queWord: string,
+ ansWord: string,
+ start?: string,
+ end?: string,
+ judgement?: string,
+}
+
+export type QuizState = {
+ quizzes: Quiz[] | null,
+ getQuiz: (params?: AxiosRequestConfig<QuizRequestParams>) => void
+}
+
+const useQuizzesStore = create<QuizState>((set) => ({
+ quizzes: null,
+ getQuiz: async (params) => {
+ const quizzes = await axios.get<Quiz[]>('/quizzes/8', params).then(res => res.data)
+ set({ quizzes })
+ }
+}))
+
+export default useQuizzesStore