category page

src/App.tsx

@@ -1,6 +1,6 @@
 // Modules
 import { useMemo, useState, useEffect } from "react";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useNavigate } from "react-router-dom";
 import { UserContext } from "./context/UserContext";
 import { PostContext } from "./context/PostContext";
 
@@ -17,8 +17,10 @@ import Dashboard from "./pages/Dashboard";
 import Posts from "./pages/Posts";
 import Details from "./pages/Details";
 import Post from "./pages/Post";
+import Category from "./pages/Category";
 
 const App = () => {
+  const navigate = useNavigate();
   const date = new Date("0.0.0000");
   const [posts, setPosts] = useState<PostType[]>([
     {
@@ -40,7 +42,6 @@ const App = () => {
 
   useEffect(() => {
     const userData = localStorage.getItem("userData");
-
     if (userData) {
       setUser(JSON.parse(userData));
     }
@@ -49,6 +50,14 @@ const App = () => {
   const userValue = useMemo(() => ({ user, setUser }), [user, setUser]);
   const postValue = useMemo(() => ({ posts, setPosts }), [posts, setPosts]);
 
+  useEffect(() => {
+    if (!user.username) {
+      navigate("/login");
+    } else {
+      navigate(localStorage.getItem("lastLocation") || "/dashboard");
+    }
+  }, [user]);
+
   return (
     <PostContext.Provider value={postValue}>
       <UserContext.Provider value={userValue}>
@@ -57,6 +66,7 @@ const App = () => {
             <Route path="/" element={<Main />} />
             <Route path="/dashboard" element={<Main child={<Dashboard />} />} />
             <Route path="/posts" element={<Main child={<Posts />} />} />
+            <Route path="/category" element={<Main child={<Category />} />} />
             <Route path="/posts/:id" element={<Main child={<Post />} />} />
             <Route
               path="/user_details"

src/assets/styles/_category.scss

@@ -0,0 +1,61 @@
+.category {
+  &.inner {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+    padding-bottom: 3rem;
+  }
+  &__head {
+    svg {
+      width: 4rem;
+      height: 4rem;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4rem;
+
+    &__block {
+      width: 100%;
+      max-width: 40rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+
+      label {
+        font-size: 2rem;
+      }
+
+      input {
+        padding: 0.7rem 1rem;
+        border: 0.1rem solid #cccccc;
+        border-radius: 0.5rem;
+      }
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      max-width: 30rem;
+      border-radius: 0.2rem;
+      cursor: pointer;
+      width: 100%;
+      padding: 1rem 1.8rem;
+      color: #fff;
+      font-size: 1.6rem;
+      background-color: #7c69ef;
+      border: 0.1rem solid #7c69ef;
+      @include transition-std;
+      &:hover {
+        @include transition-std;
+        background-color: #705ed6;
+        border: 0.1rem solid #705ed6;
+      }
+    }
+  }
+}

src/assets/styles/style.scss

@@ -6,3 +6,4 @@
 @import "./dashboard";
 @import "./posts";
 @import "./details";
+@import "./category";

src/components/Aside.tsx

@@ -10,6 +10,7 @@ import { AiOutlineBlock } from "react-icons/ai";
 import { MdOutlineManageAccounts } from "react-icons/md";
 import { CgDetailsLess } from "react-icons/cg";
 import { BiLogOut } from "react-icons/bi";
+import { IoIosCreate } from "react-icons/io";
 
 // Types
 import { userContextType } from "../types/user";
@@ -36,6 +37,15 @@ const Aside = ({ aside, setAside }: Props) => {
             <span>Posts</span>
           </Link>
         </li>
+        <li className="aside__list__element">
+          <Link
+            to={"/category"}
+            onClick={() => localStorage.setItem("lastLocation", "/category")}
+          >
+            <IoIosCreate className="aside__list__element__img" />
+            <span>Category</span>
+          </Link>
+        </li>
         <li className="aside__list__element aside__list__element--title">
           <MdOutlineManageAccounts className="aside__img" />
           <h2>Account</h2>

src/components/Nav.tsx

@@ -27,7 +27,9 @@ const Nav = ({ aside, setAside }: Props) => {
             <Link
               to={"/dashboard"}
               className="nav__img"
-              onClick={() => localStorage.setItem("lastLocation", "/dashboard")}
+              onClick={() => {
+                localStorage.setItem("lastLocation", "/dashboard");
+              }}
             >
               <ImStatsDots />
             </Link>

src/pages/Category.tsx

@@ -0,0 +1,35 @@
+// Icons
+import { IoIosCreate } from "react-icons/io";
+
+const Category = () => {
+  return (
+    <main className="category">
+      <div className="container">
+        <div className="category inner">
+          <div className="dashboard__head category__head">
+            <IoIosCreate />
+            <h1>Category</h1>
+          </div>
+          <form
+            className="category__form"
+            onSubmit={(e: React.FormEvent<HTMLFormElement>) =>
+              e.preventDefault()
+            }
+          >
+            <div className="category__form__block">
+              <label htmlFor="category">Category</label>
+              <input
+                type="text"
+                id="category"
+                placeholder="Enter category name"
+              />
+            </div>
+            <button type="submit">Add category</button>
+          </form>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Category;

src/pages/Login.tsx

@@ -7,7 +7,6 @@ import { useNavigate } from "react-router-dom";
 import { cred } from "../user";
 
 const Login = () => {
-  const lastLocation = localStorage.getItem("lastLocation");
   const [valid, setValid] = useState({
     username: "",
     password: "",
@@ -17,7 +16,6 @@ const Login = () => {
   });
 
   const { user, setUser } = useContext<any>(UserContext);
-  const navigate = useNavigate();
 
   useEffect(() => {
     if (valid.username === cred.username && valid.password === cred.password) {
@@ -27,12 +25,6 @@ const Login = () => {
     }
   }, [valid.username, valid.password]);
 
-  useEffect(() => {
-    if (user.username) {
-      navigate(lastLocation || "/dashboard");
-    }
-  }, [user]);
-
   return (
     <main className="login">
       <div className="container">

src/pages/Main.tsx

@@ -1,26 +1,13 @@
 // Modules
-import { useState, useContext, useEffect } from "react";
+import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { UserContext } from "../context/UserContext";
 
 // Components
 import Nav from "../components/Nav";
 import Aside from "../components/Aside";
 
-// Types
-import { userContextType } from "../types/user";
-
 const Main = ({ child }: any) => {
-  const navigate = useNavigate();
-  const { user, setUser }: userContextType = useContext(UserContext);
   const [aside, setAside] = useState(true);
 
-  useEffect(() => {
-    if (!user.username) {
-      navigate("/login");
-    }
-  }, [user]);
-
   return (
     <main className="main">
       <div className="main__top">