Refactor QuestionContext inside App

- WIP due to error Uncaught TypeError: create is not a function

Author: techieeliot

src/App.jsx

@@ -1,16 +1,20 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, createContext } from 'react';
 import './App.css';
 import Home from './components/Home'
 import Quiz from './components/Quiz'
 import Results from './components/Results'
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import axios from 'axios'
-import { TriviaGameProvider, QuestionsContext } from './context/TriviaGameContext'
+// import { TriviaGameProvider } from './context/TriviaGameContext'
 
+const QuestionsContext = createContext({
+  question: [],
+  setQuestions: () => []
+});
 
 const App = () => {
 
-  const [questions, setQuestions] = useContext(QuestionsContext)
+  const [questions, setQuestions] = useState([])
 
   // useEffect make axios request to fetch the quesiton data
   useEffect(() => {
@@ -22,10 +26,12 @@ const App = () => {
         })
         .catch( err => console.error(err))
   }, [])
+
+  console.log(questions)
 
   return (
-    <Router>
-      <TriviaGameProvider>
+    <QuestionsContext.Provider value={{questions, setQuestions}}>
+      <Router>
         <main className="App">
           <Switch>
             <Route path="/quiz">
@@ -39,9 +45,9 @@ const App = () => {
             </Route>
           </Switch>
         </main>
-      </TriviaGameProvider>
-    </Router>
+      </Router>
+    </QuestionsContext.Provider>
   );
 }
 
-export default App
+export { App, QuestionsContext}

src/components/ButtonBox.jsx

@@ -1,35 +1,35 @@
 import React, { useState, useEffect, useContext} from 'react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
-import { QuestionsContext } from '../context/TriviaGameContext'
+import { QuestionsContext } from '../App'
 
 export default ({handleTrueClick, handleFalseClick, allClicks}) => {
     const [isComplete, setIsComplete] = useState(false)
     const questions = useContext(QuestionsContext)
     const [selected, setSelected] = useState(0)
 
+    
+    const calculateScore = (answers) => {
+        questions[selected].map(item => {
+            return console.log(item)
+        })
+        console.log('You ran the calculate score effect')
+    }
     useEffect(
         (allClicks.length > 9) ? 
             setIsComplete(true)
             .then(calculateScore(allClicks))
         : ''
 
     , [allClicks])
-    
-    const calculateScore = (answers) => {
-        questions[selected].map(item => {
-            console.log(item)
-        })
-        console.log('You ran the calculate score effect')
-    }
     return(
         <>
             <ButtonBox>
                 {/* ternary checks if completed quiz through question 10 yet*/}
                 {(isComplete) ?
                     // if question 10 complete show results button
                     <>
-                        <Link to="/results?answers=${scoreCard}">
+                        <Link to="/results">
                             <Button>results</Button>
                         </Link>
                     </>

src/components/Quiz.jsx

@@ -2,7 +2,7 @@ import React, { useState, useContext } from 'react'
 import Header from './Header'
 import Card from './Card'
 import ButtonBox from './ButtonBox'
-import { QuestionsContext } from '../context/TriviaGameContext'
+import { QuestionsContext } from '../App'
 
 const Quiz = () => {
    const [selected, setSelected] = useState(0)
@@ -14,6 +14,7 @@ const Quiz = () => {
         - create True or False in the allClicks store array
         - increment to the next question's data
     **/
+   
     const handleTrueClick = () => {
         setAllClicks(allClicks.concat('True'))
         if(allClicks.length < 9){

src/components/Results.jsx

@@ -2,7 +2,7 @@ import React, { useState, useContext } from 'react'
 import Header from './Header'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
-import { QuestionsContext } from '../context/TriviaGameContext'
+import { QuestionsContext } from '../App'
 
 
 const Results = ({ allClicks}) => {

src/context/TriviaGameContext.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import { App } from './App';
 
 ReactDOM.render(
   <React.StrictMode>