topics added

Rakibhasaniu · Oct 11, 2022 · 0e5021d · 0e5021d
1 parent 9a3d55a
commit 0e5021d
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 16 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,12 +4,15 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Main from './layout/Main';
 import Home from './components/Home/Home'
 import Topics from './components/Topics/Topics'
-import Statictics from './components/Statistics/Statictics';
+import Statictics from './components/Statictics/Statictics';
 import Question from './components/Question/Question';
+import ErrorPage from './components/ErrorPage/Errorpage';
 
 const router = createBrowserRouter([
   {
     path:'/',
+    errorElement: <ErrorPage></ErrorPage>,
+    loader: () => fetch('https://openapi.programming-hero.com/api/quiz'),
     element:<Main></Main>,
     children: [
       {
@@ -20,17 +23,18 @@ const router = createBrowserRouter([
         path:'/home',
         element: <Home></Home>
       },
-      {
-        path:'/topics',
-        element: <Topics></Topics>
-      },
       {
         path:'/statictics',
         element: <Statictics></Statictics>
       },
       {
         path:'/question',
         element: <Question></Question>
+      },
+      {
+        path:'/quiz/:id',
+        loader: async({params}) => fetch(`https://openapi.programming-hero.com/api/quiz/${params.id}`),
+        element: <Topics></Topics>
       }
     ]
   },

diff --git a/src/components/Display/Display.js b/src/components/Display/Display.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Display = ({quiz}) => {
+    // console.log(quiz);
+    const {id,name,logo,total} = quiz;
+    return (
+        <div>
+        <img
+          className='bg-slate-900	'
+          src={logo}
+          alt=''
+        />
+        <p className='mb-2 text-xl font-bold leading-none sm:text-2xl'>{name}</p>
+       <Link to={`/quiz/${id}`}><button 
+        >
+          Start Quiz
+        </button></Link>
+
+      </div>
+    );
+};
+
+export default Display;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,9 +1,19 @@
-import React from 'react';
-
+import React, { useContext } from 'react';
+import { DataContext } from '../../layout/Main';
+import Display from '../Display/Display';
+
 const Home = () => {
+
+    const datas= useContext(DataContext);
+    const dt = datas.data
+    // console.log(dt);
+
+
     return (
         <div>
-            <h2>This Is Home Area</h2>
+            {
+                dt.map(quiz => <Display key={quiz.id} quiz={quiz}></Display> )
+            }
         </div>
     );
 };

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -1,9 +1,14 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Navbar = () => {
     return (
-        <div>
-            <h2>This is Navbar</h2>
+        <div className='text-center p-8'>
+            <Link className='mr-4' to='/home'> Home</Link>
+            <Link className='mr-4' to='/topics'>Quiz</Link>
+            <Link className='mr-4' to='/statictics'>Chart</Link>
+            <Link className='mr-4' to='/question'>Question</Link>
+
         </div>
     );
 };

diff --git a/src/components/Statistics/Statictics.js → src/components/Statictics/Statictics.js b/src/components/Statistics/Statictics.js → src/components/Statictics/Statictics.js
diff --git a/src/components/Statistics/Statistics.css → src/components/Statictics/Statistics.css b/src/components/Statistics/Statistics.css → src/components/Statictics/Statistics.css
diff --git a/src/components/Topics/Topics.js b/src/components/Topics/Topics.js
@@ -1,6 +1,12 @@
 import React from 'react';
+import { useLoaderData } from 'react-router-dom';
 
 const Topics = () => {
+
+    const allData = useLoaderData();
+    const {data} = allData;
+    // const quiz = data.question
+    console.log(data);
     return (
         <div>
             <h2>This is Quiz Area</h2>

diff --git a/src/layout/Main.js b/src/layout/Main.js
@@ -1,15 +1,21 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import Footer from '../components/Footer/Footer';
+import React, { createContext } from 'react';
+import { Outlet, useLoaderData } from 'react-router-dom';
+
 import Navbar from '../components/Navbar/Navbar';
+
 
+export const DataContext = createContext([])
 const Main = () => {
+    const datas = useLoaderData();
+    // console.log(datas);
+
+    // const{data} = datas;
+
     return (
-        <div>
+        <DataContext.Provider value={datas}>
             <Navbar></Navbar>
             <Outlet></Outlet>
-            <Footer></Footer>
-        </div>
+        </DataContext.Provider>
     );
 };