Display formations on home page

package.json

@@ -13,7 +13,8 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "shortid": "^2.2.15"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,79 +1,89 @@
-import React, { useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
-import { useSelector, useDispatch } from 'react-redux'
+import React, { useEffect } from "react";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect,
+} from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
 import Home from "./pages/Home";
 import Login from "./pages/Login";
-import Navbar from './components/Navbar';
-import Register from './pages/Register';
-import Profile from './pages/Profile';
+import Navbar from "./components/Navbar";
+import Register from "./pages/Register";
+import Profile from "./pages/Profile";
 
-import { loadUser } from './redux/actions/authActions'
+import { loadUser } from "./redux/actions/authActions";
 
 const App = () => {
-  const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
+  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const autoLoginUser = async () => {
-      const API_URL = process.env.REACT_APP_API_URL
+      const API_URL = process.env.REACT_APP_API_URL;
       const response = await fetch(`${API_URL}/api/v1/profile`, {
-        method: 'get',
+        method: "get",
         headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${Cookies.get('token')}`
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
         },
-      })
+      });
       try {
-
-        const userToLoad = await response.json()
-        dispatch(loadUser(userToLoad))
-
+        const userToLoad = await response.json();
+        dispatch(loadUser(userToLoad));
       } catch (error) {
-        console.log(error)
+        console.log(error);
       }
+    };
+    if (Cookies.get("token")) {
+      autoLoginUser();
     }
-    if (Cookies.get('token')) {
-      autoLoginUser()
-    }
-  }, [dispatch])
+  }, [dispatch]);
 
   const UnAuthRoute = ({ component: Component, ...rest }) => (
-    <Route {...rest} render={props => (
-      isAuthenticated ? (
-        <Redirect to={{ pathname: '/' }} />
-      ) : (
+    <Route
+      {...rest}
+      render={(props) =>
+        isAuthenticated ? (
+          <Redirect to={{ pathname: "/" }} />
+        ) : (
           <Component {...props} />
         )
-    )} />
-  )
+      }
+    />
+  );
 
   const AuthRoute = ({ component: Component, ...rest }) => (
-    <Route {...rest} render={props => (
-      isAuthenticated ? (
-        <Component {...props} />
-      ) : (
-          <Redirect to={{ pathname: '/login' }} />
+    <Route
+      {...rest}
+      render={(props) =>
+        isAuthenticated ? (
+          <Component {...props} />
+        ) : (
+          <Redirect to={{ pathname: "/login" }} />
         )
-    )} />
-  )
+      }
+    />
+  );
 
   return (
     <Router basename={process.env.PUBLIC_URL}>
       <Navbar />
       <Switch>
-        <Route exact path="/" component={Home} />
-        <UnAuthRoute path="/login" component={Login} />
-        <UnAuthRoute path="/signup" component={Register} />
-        <AuthRoute path="/profile" component={Profile} />
-        <Route path="/" component={() => <div>ERREUR 404</div>} />
+        <div className="container mt-5">
+          <Route exact path="/" component={Home} />
+          <UnAuthRoute path="/login" component={Login} />
+          <UnAuthRoute path="/signup" component={Register} />
+          <AuthRoute path="/profile" component={Profile} />
+          <Route path="/" component={() => <div>ERREUR 404</div>} />
+        </div>
       </Switch>
     </Router>
-
-  )
-}
+  );
+};
 
 export default App;

src/components/Courses/CourseIndex/CourseIndex.jsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import CoursePreview from "./../CoursePreview";
+import { fakeCourses } from "./../../../fakecontent/courses";
+const CourseIndex = () => {
+  const [courselist, SetCourseList] = useState();
+  const ShortID = require("shortid");
+
+  useEffect(() => {
+    // const fetchCourses = async () => {
+    // const API_URL = process.env.REACT_APP_API_URL;
+    // const response = await fetch(`${API_URL}/courses`, {
+    //   method: "get",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    // });
+
+    // try {
+    //   const courses = await response.json();
+    //   SetCourseList(courses);
+    // } catch (error) {
+    //   console.log(error);
+    //   alert("nous ne pouvons pas afficher les cours");
+    // }
+    //}
+    SetCourseList(fakeCourses.courses);
+  }, []);
+
+  return (
+    <>
+      <h2>Toutes les formations</h2>
+      <div className="row mt-3 mb-3">
+        {courselist &&
+          courselist.map((course) => (
+            <CoursePreview key={ShortID.generate()} course={course} />
+          ))}
+      </div>
+      <h2>Mes formations</h2>
+      <div className="row mt-3 mb-3">
+        {courselist &&
+          courselist.map((course) => (
+            <CoursePreview key={ShortID.generate()} course={course} />
+          ))}
+      </div>
+    </>
+  );
+};
+
+export default CourseIndex;

src/components/Courses/CourseIndex/index.jsx

@@ -0,0 +1,3 @@
+import CourseIndex from "./CourseIndex";
+
+export default CourseIndex;

src/components/Courses/CoursePreview/CoursePreview.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const CoursePreview = ({ course }) => {
+  return (
+    <>
+      <div className="card col-md-3 m-3">
+        <div className="card-body">
+          <h5 className="card-title">{course.title}</h5>
+          <p className="card-text">{course.description}</p>
+          <a href="#" className="btn btn-primary">
+            Go somewhere
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
+export default CoursePreview;

src/components/Courses/CoursePreview/index.jsx

@@ -0,0 +1,3 @@
+import CoursePreview from "./CoursePreview";
+
+export default CoursePreview;

src/fakecontent/courses.js

@@ -0,0 +1,25 @@
+export const fakeCourses = {
+  courses: [
+    {
+      id: 1,
+      title: "react",
+      description:
+        "ce cours vous donnera les bases pour appréhender la fameuse librairie react",
+      teacher_id: 1,
+    },
+    {
+      id: 2,
+      title: "javascript",
+      description:
+        "ce cours vous donnera les bases pour appréhender le fameux language js",
+      teacher_id: 1,
+    },
+    {
+      id: 3,
+      title: "ruby",
+      description:
+        "ce cours vous donnera les bases pour appréhender le fameux old school ruby",
+      teacher_id: 1,
+    },
+  ],
+};

src/pages/Home.jsx

@@ -1,21 +1,15 @@
-import React from 'react';
-import { useSelector } from 'react-redux'
-
-
+import React from "react";
+import { useSelector } from "react-redux";
+import CourseIndex from "./../components/Courses/CourseIndex";
 const Home = () => {
-  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
-  const user = useSelector(state => state.auth.user);
+  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
+  const user = useSelector((state) => state.auth.user);
 
   return (
     <>
-      <h1>Welcome on your new website.</h1>
-      <p>This website is ready to become a really cool app !</p>
-      {isAuthenticated &&
-        <>
-          <h2>hello {user.email}</h2>
-        </>}
+      <CourseIndex />
     </>
-  )
-}
+  );
+};
 
 export default Home;