Routes feat and roles

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -2,42 +2,48 @@ import { HomePage, PostForm, NotFoundPage } from "./pages/index";
 import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
-import Signup from './components/Signup';
-import Login from './components/Login';
+import Signup from "./components/Signup";
+import Login from "./components/Login";
 import RequiresAuth from "./components/RequiresAuth";
-
+import { HomePageUser } from "./pages/HomePageUser";
+import Navbar from "./components/Navbar/Navbar";
+import { useLocation } from "react-router-dom";
+import ContactForm from "./pages/Contact";
 function App() {
-
+  const location = useLocation();
+  const isLoginPage = location.pathname === "/login";
 
   return (
-
+    <div
+      className="bg-cover h-screen w-screen overflow-y-scroll"
+      style={{
+        backgroundImage: isLoginPage
+          ? "none"
+          : "url(https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80)",
+      }}
+    >
       <PostProvider>
-
+        <Navbar />
         <Routes>
           {/* Public routes */}
-          <Route path="signup" exact element={ <Signup/> }/>
-          <Route path ="login" exact element={ <Login/> }/>
-
-          {/* Private routes */}
-          <Route element={<RequiresAuth allowedRoles={["admin"]}/>}>
-            <Route path="/" exact element={ <HomePage/>} />
-            <Route path="/posts/:id" element={ <PostForm />} />
-            <Route path="/new" exact element={ <PostForm/>} />
-          </Route>
+          <Route path="signup" exact element={<Signup />} />
+          <Route path="login" exact element={<Login />} />
+          <Route path="/homeuser" exact element={<HomePageUser />} />
+          <Route path="/contact" exact element={<ContactForm />} />
 
-
-          <Route element={<RequiresAuth allowedRoles={["user"]}/>}>
-
-
+          {/* Private routes */}
+          <Route element={<RequiresAuth allowedRoles={["admin"]} />}>
+            <Route path="/" exact element={<HomePage />} />
+            <Route path="/posts/:id" element={<PostForm />} />
+            <Route path="/new" exact element={<PostForm />} />
           </Route>
 
           {/* Catch all */}
           <Route path="*" element={<NotFoundPage />} />
-
         </Routes>
-        <Toaster/>
+        <Toaster />
       </PostProvider>
-
+    </div>
   );
 }
 

src/api/posts.js

@@ -1,28 +1,37 @@
-import axios from 'axios';
-
-export const getPostsRequest = async () => await axios.get('http://localhost:4000/api/posts',{
-
-})
-
-export const createPostRequest = async (post) => {
-    const token = localStorage.getItem('auth')
-    const form = new FormData()
-
-    for (let key in post){
-        form.append(key, post[key])
-    }
-
-    return await axios.post('http://localhost:4000/api/posts', form, {
-        headers: {
-            "Content-Type": "multipart/form-data",
-            // eslint-disable-next-line no-template-curly-in-string
-            'Authorization': `Bearer ${token}`
-        }
-    });
-}
-
-export const deletePostRequest = async id => await axios.delete("http://localhost:4000/api/posts/" + id)
-
-export const getPostRequest = async id => await axios.get("http://localhost:4000/api/posts/" + id)
-
-export const updatePostRequest = async (id, newFields) => await axios.put(`http://localhost:4000/api/posts/${id}`, newFields)
+import axios from "axios";
+
+export const getPostsRequest = async () =>
+  await axios.get("http://localhost:4000/api/posts", {});
+
+export const createPostRequest = async (post, token) => {
+  const form = new FormData();
+
+  for (let key in post) {
+    form.append(key, post[key]);
+  }
+
+  return await axios.post("http://localhost:4000/api/posts", form, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+      // eslint-disable-next-line no-template-curly-in-string
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
+
+export const deletePostRequest = async (id, token) =>
+  await axios.delete("http://localhost:4000/api/posts/" + id, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+export const getPostRequest = async (id) =>
+  await axios.get("http://localhost:4000/api/posts/" + id);
+
+export const updatePostRequest = async (id, newFields, token) =>
+  await axios.put(`http://localhost:4000/api/posts/${id}`, newFields, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });