Dev

package.json

@@ -3,12 +3,19 @@
   "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",
     "axios": "^1.3.5",
+    "eslint": "^8.43.0",
+    "eslint-config-react-app": "^7.0.1",
     "formik": "^2.2.9",
     "jsonwebtoken": "^9.0.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
@@ -25,10 +32,18 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
+    "plugins": [
+      "react",
+      "react-hooks"
+    ],
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "warn",
+      "react-hooks/exhaustive-deps": "warn"
+    }
   },
   "browserslist": {
     "production": [
@@ -44,6 +59,8 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.14",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.1"
   }

src/App.js

@@ -1,31 +1,48 @@
 import { HomePage, PostForm, NotFoundPage } from "./pages/index";
-import { Routes, Route, Navigate } from "react-router-dom";
+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 token = localStorage.getItem("token")
+  const location = useLocation();
+  const isLoginPage = location.pathname === "/login";
+
   return (
-    <div className="bg-neutral-900 min-h-screen flex items-center">
-      <div className="px-10  m-auto">
-        <PostProvider>
-      <Routes>
-        {token && <Route path="/" exact element={<HomePage/>}/>}
-        <Route path="/signup" exact element={<Signup/>}/>
-        <Route path ="/login" exact element={<Login/>}/>
-        {token && <Route path="/new" element={<PostForm /> }/>}
-      <Route path="/posts/:id" element={<PostForm />} />
-      <Route path="*" element={<NotFoundPage />} />
-      <Route path="/" exact element ={<Navigate replace to ="/login"/>}/>
-    </Routes>
-    <Toaster/>
-    </PostProvider>
-
-      </div>
+    <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 />} />
+          <Route path="/homeuser" exact element={<HomePageUser />} />
+          <Route path="/contact" exact element={<ContactForm />} />
+
+          {/* 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 />
+      </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('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 => 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}`,
+    },
+  });