separete requests

src/App.js

@@ -1,23 +1,14 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useQuery } from 'react-query'
-import axios from 'axios'
 import QuizBox from './Module/QuizBox/QuizBox'
 import StartBox from './Module/StartBox/StartBox'
+import { getAllQuiz } from './requests'
 import './index.scss'
-import { URL } from './index'
 
 export default function App() {
   const [runningQuiz, setRunningQuiz] = useState()
 
-  useEffect(async () => {
-    const { data } = await axios.get(`${URL}/all`)
-  }, [])
-
-  const {
-    isLoading,
-    error,
-    data: quizzes
-  } = useQuery('repoData', () => axios.get(`${URL}/all`).then(({ data }) => data))
+  const { isLoading, error, data: quizzes } = useQuery('repoData', () => getAllQuiz())
 
   if (isLoading)
     return (

src/Module/QuizBox/QuizBox.js

@@ -4,8 +4,7 @@ import './QuizBox.scss'
 import QuestionBox from '../QuestionBox/QuestionBox'
 import Button from '../../components/Button/Button'
 import ResponseBox from '../ResponseBox/ResponseBox'
-import axios from 'axios'
-import { URL } from '../../index'
+import { postAnswer, getNextQuestion } from '../../requests'
 
 export default function QuizBox({ quiz, restart }) {
   const [results, setResults] = useState([]) // contains list of object with userAnswer, score, info about question (text, answer, value, type)
@@ -14,11 +13,7 @@ export default function QuizBox({ quiz, restart }) {
   const [disabledClick, setDisabledClick] = useState(true)
 
   const goNextQuestion = async (answer, question) => {
-    const { data: response } = await axios.post(`${URL}/answer`, {
-      quizId: quiz.id,
-      questionId: question.id,
-      answer: answer
-    })
+    const response = await postAnswer(quiz.id, question.id, answer)
 
     const newResult = {
       userAnswer: answer,
@@ -32,14 +27,10 @@ export default function QuizBox({ quiz, restart }) {
     if (response.next !== null) setCurrentQuestion(response.next)
   }
 
-  const { isLoading, error } = useQuery(
-    'repoDataQuiz',
-    () => axios.get(`${URL}/start/${quiz.id}`).then(({ data }) => data),
-    {
-      onSuccess: data => setCurrentQuestion(data),
-      refetchOnWindowFocus: false
-    }
-  )
+  const { isLoading, error } = useQuery('repoDataQuiz', () => getNextQuestion(quiz.id), {
+    onSuccess: data => setCurrentQuestion(data),
+    refetchOnWindowFocus: false
+  })
 
   if (error) return <div className="error">An error has occurred: {error.message}</div>
 

src/index.js

@@ -5,7 +5,6 @@ import './index.scss'
 import App from './App'
 
 const queryClient = new QueryClient()
-export const URL = 'http://localhost:7777'
 
 ReactDOM.render(
   <QueryClientProvider client={queryClient}>

src/requests.js

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+const URL = 'http://localhost:7777'
+
+export const getAllQuiz = () => axios.get(`${URL}/all`).then(({ data }) => data)
+
+export const postAnswer = (quizId, questionId, answer) =>
+  axios
+    .post(`${URL}/answer`, {
+      quizId,
+      questionId,
+      answer
+    })
+    .then(({ data }) => data)
+
+export const getNextQuestion = quizId => axios.get(`${URL}/start/${quizId}`).then(({ data }) => data)