Qorrax week14

package.json

@@ -12,7 +12,10 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
+    "cookie": "^0.5.0",
     "formik": "^2.2.9",
+    "js": "^0.1.0",
+    "js-cookie": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",

src/App.jsx

@@ -1,29 +1,98 @@
+import React, {useEffect, useState} from "react";
+
 import AddNote from "./components/AddNote";
 import Notes from "./components/Notes";
 import EditNote from "./components/EditNote";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Link, useNavigate, useLocation} from "react-router-dom";
+import  Register from "./components/user/Register";
+import Login from "./components/user/Login";
+import Profile  from "./components/user/Profile";
+import Cookies from "js-cookie";
+import PrivateRoute from "./PrivateRoute";
 
 function App() {
 
+
+
+  const [userInfo, setUserInfo] = React.useState(null);
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    const token = Cookies.get('token');
+    if (token) {
+      setUserInfo(token);
+    }
+  }, [userInfo]);
+
+  const handleLogout = () => {
+    try {
+      Cookies.remove('token');
+      setUserInfo(null);
+      window.location.reload();
+      navigate('/user/login');
+    } catch (error) {
+      console.log('Logout error:', error);
+      // Handle error case if needed
+    }
+  };
+
   return (
-    <div className="bg-blue-600 min-h-screen flex">
-      <div className="w-full">
-        <div className="flex flex-col items-center">
-          <h3 className="text-3xl text-white mb-5 mt-5">My Notes</h3>
-          <Routes>
-          {window.location.pathname === "/" && (
-            <Route path="/" element={<AddNote />} />
-          ) } else {
-            <Route path="/edit/:id" element={<EditNote />} />
-          }
-          </Routes>
-
-
-          <Notes />
-        </div>
-      </div>
+    <div className="bg-slate-600">
+      <header className="bg-white py-10">
+        <nav className="h-full">
+          <div className="container mx-auto flex justify-between items-center">
+            <h3 className="text-2xl font-bold">My Notes</h3>
+            <ul className="hidden md:flex space-x-6">
+              <li>
+                  <Link to="/" className="bg-red-400 px-4 py-2 rounded-3xl hover:bg-red-500 text-white"> Home </Link>
+              </li>
+              {userInfo && (
+            <>
+              <li>
+                  <Link to="/books/add_book" className="bg-red-400 px-4 py-2 rounded-3xl hover:bg-red-500 text-white" > Add Note </Link>
+              </li>
+              <li> 
+                 <Link to="/profile" className="bg-red-400 px-4 py-2 rounded-3xl hover:bg-red-500 text-white" > Profile </Link>
+              </li>
+              <li>
+                  <Link onClick={handleLogout} className="bg-red-600 px-4 py-2 rounded-3xl hover:bg-red-500 text-white"> Logout </Link>
+               </li>
+                </>
+              )}
+              {!userInfo && (
+            <>
+                  <li> 
+                    <Link  to="/user/login" className="bg-red-400 px-4 py-2 rounded-3xl hover:bg-red-500 text-white" > Login </Link>
+                  </li>
+
+                  <li>
+                    <Link to="/user/register" className="bg-red-400 px-4 py-2 rounded-3xl hover:bg-red-500 text-white" > Register </Link>
+                  </li>
+            </>
+              )}
+            </ul>
+          </div>
+        </nav>
+      </header>
+
+      <Routes>
+            <Route path="/user/login" element={<Login />} />
+            <Route path="/user/register" element={<Register />} />
+            <Route path="/books/edit_book/:id" element={<PrivateRoute />}>
+                <Route path="/books/edit_book/:id" element={<EditNote />} />
+            </Route>
+            <Route path="/books/add_book" element={<PrivateRoute />}>
+                <Route path="/books/add_book" element={<AddNote />} />
+            </Route>
+            <Route path="/profile" element={<PrivateRoute />}>
+                <Route path="/profile" element={<Profile />} />
+            </Route>
+            <Route path="/" element={<Notes />} />
+      </Routes>
     </div>
   );
 }
+
+
 
 export default App;

src/PrivateRoute.jsx

@@ -0,0 +1,18 @@
+
+import React from 'react'
+import Cookies from 'js-cookie'
+import { Navigate, Outlet } from 'react-router-dom'
+
+
+function PrivateRoute() {
+    const token = Cookies.get('token')
+    if (!token) {
+        return <Navigate to="/user/login" />
+    }
+
+  return ( 
+   <Outlet/> 
+  )
+}
+
+export default PrivateRoute

src/components/Notes.jsx

@@ -4,11 +4,12 @@ import React, { useEffect } from "react";
 import { FaEdit, FaTrash } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { useGetNotesQuery, useDeleteNoteMutation } from "../store/api/NoteSlice";
-
+import { useGetUserQuery } from "../store/api/UserSlice";
 function Notes() {
 
   const { data: notes = [], status, error } = useGetNotesQuery();
   const [deleteNote] = useDeleteNoteMutation();
+  const  {data: user= {}} = useGetUserQuery()
 
   const deleteNoteHandler = (id) => {
     deleteNote(id);
@@ -29,6 +30,7 @@ function Notes() {
             <p>{note.content}</p>
           </div>
           <div className="absolute bg-yellow-400 w-12 h-12 rotate-45 -top-6 -left-6" />
+          {user.id === note.user_id && (
           <div className="absolute bottom-0 left-0 right-0 flex justify-center p-4">
           <Link to={`/edit/${note.id}`}>
             <button className="mr-2">
@@ -39,6 +41,7 @@ function Notes() {
               <FaTrash size={20} onClick={() => deleteNoteHandler(note.id)} />
             </button>
           </div>
+          )}
         </div>
       ))}
     </div>