Added: Expired token, config debounce. Update: ProductController Query

Author: fhmiibrhimdev

backend/app/Http/Controllers/ProductController.php

@@ -19,15 +19,10 @@ public function index(Request $request)
             $perPage = $request->get('showing', 10);
             $search = $request->get('search', '');
 
-            $query = Product::query();
-
-            if (!empty($search)) {
-                $query->where('name', 'like', "%{$search}%")
-                      ->orWhere('description', 'like', "%{$search}%");
-            }
-
-            $data = $query->latest()->paginate($perPage);
-
+            $data = Product::where(function($query) use ($search) {
+                        $query->where('name', 'LIKE', "%{$search}%");
+                        $query->orWhere('description', 'LIKE', "%{$search}%");
+                    })->latest()->paginate($perPage);
 
             return response()->json([
                 'data'      => $data,
@@ -44,39 +39,25 @@ public function index(Request $request)
         }
     }
 
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create()
-    {
-        try 
-        {
-            
-        } 
-        catch (Exception $e) 
-        {
-            return response()->json([
-                'data'      => [],
-                'success'   => false,
-                'message'   => $e->getMessage()
-            ], JsonResponse::HTTP_INTERNAL_SERVER_ERROR);    
-        }
-    }
-
     /**
      * Store a newly created resource in storage.
      */
     public function store(Request $request)
     {
+        $validatedData = $request->validate([
+            'name' => 'required|max:5',
+            'price' => 'numeric'
+        ]);
+
         try 
         {
-            $data   = Product::create($request->all());
+            $data   = Product::create($validatedData);
 
             return response()->json([
                 'data'      => $data,
                 'success'   => true,
                 'message'   => 'Data created successfully'
-            ], JsonResponse::HTTP_OK);
+            ], JsonResponse::HTTP_CREATED);
         } 
         catch (Exception $e) 
         {

frontend/src/components/Navigation.jsx

@@ -1,16 +1,16 @@
+import axios from "axios";
+import NavLink from "./NavLink";
 import React, { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
-import NavLink from "./NavLink";
-
-import axios from "axios";
+import { getTokenWithExpiration } from "../pages/Auth/Session";
 
 export default function Navigation() {
     const [user, setUser] = useState({});
     const baseURL = "http://127.0.0.1:8000/api";
 
     const navigate = useNavigate();
-    const token = localStorage.getItem("token");
+    const token = getTokenWithExpiration("token");
 
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const dropdownRef = useRef(null);
@@ -88,14 +88,14 @@ export default function Navigation() {
                         </a>
                         <div className="dropdown-menu dropdown-menu-right">
                             <div className="dropdown-title">
-                                Logged in 5 min ago
+                                ROLE: {user.role}
                             </div>
-                            <a
-                                href="features-profile.html"
+                            <Link
+                                to="/profile"
                                 className="dropdown-item has-icon"
                             >
                                 <i className="far fa-user"></i> Profile
-                            </a>
+                            </Link>
                             <div className="dropdown-divider"></div>
                             <a
                                 onClick={logoutHandler}

frontend/src/components/Router.jsx

@@ -10,6 +10,7 @@ import AuthLayout from "../pages/Layout/AuthLayout";
 import MainLayout from "../pages/Layout/MainLayout";
 import Error403 from "../pages/Error/403";
 import Error404 from "../pages/Error/404";
+
 export default function Router() {
     return (
         <Routes>

frontend/src/config/appConfig.js

@@ -0,0 +1,5 @@
+const appConfig = {
+    debounceTimeout: 750,
+};
+
+export default appConfig;

frontend/src/pages/AdvancedFeature.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Case from "../components/Case";
 import { useEffect } from "react";
-import MainLayout from "./Layout/MainLayout";
 
 export default function AdvancedFeature() {
     useEffect(() => {

frontend/src/pages/Auth/Login.jsx

@@ -1,11 +1,10 @@
+import axios from "axios";
+import Swal from "sweetalert2";
 import React, { useEffect, useState } from "react";
-
 import { Link, useNavigate } from "react-router-dom";
-import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 
-import axios from "axios";
-import AuthLayout from "../Layout/AuthLayout";
+import { setTokenWithExpiration, getTokenWithExpiration } from "./Session";
 
 export default function Login() {
     const baseURL = "http://127.0.0.1:8000/api";
@@ -15,7 +14,7 @@ export default function Login() {
 
     useEffect(() => {
         document.title = "Login";
-        if (localStorage.getItem("token")) {
+        if (getTokenWithExpiration("token")) {
             //redirect page dashboard
             window.location.href = "/dashboard";
         }
@@ -73,7 +72,7 @@ export default function Login() {
                 })
                 .then((response) => {
                     if (response.status === 200) {
-                        localStorage.setItem("token", response.data.token);
+                        setTokenWithExpiration("token", response.data.token);
                         MySwal.fire({
                             title: "Success!",
                             text: "Login successfully",

frontend/src/pages/Auth/Register.jsx

@@ -1,12 +1,9 @@
+import axios from "axios";
+import Swal from "sweetalert2";
 import React, { useEffect, useState } from "react";
-
 import { Link, useNavigate } from "react-router-dom";
-import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 
-import axios from "axios";
-import AuthLayout from "../Layout/AuthLayout";
-
 export default function Register() {
     const baseURL = "http://127.0.0.1:8000/api";
 

frontend/src/pages/Auth/Session.js

@@ -0,0 +1,33 @@
+export function setTokenWithExpiration(key, token) {
+    const now = new Date();
+    const expirationTime = now.getTime() + 60 * 60 * 1000;
+    const item = token + "|" + expirationTime;
+    localStorage.setItem(key, item);
+}
+
+export function getTokenWithExpiration(key) {
+    const item = localStorage.getItem(key);
+    if (!item) {
+        return null;
+    }
+    const [token, expirationTime] = item.split("|");
+    const now = new Date();
+    if (now.getTime() > expirationTime) {
+        localStorage.removeItem(key);
+        return null;
+    }
+    return token;
+}
+
+export function getTokenExpirationTime(key) {
+    const item = localStorage.getItem(key);
+    if (!item) {
+        return null;
+    }
+    const [_, expirationTime] = item.split("|");
+    const now = new Date();
+    const remainingSeconds = Math.round(
+        (expirationTime - now.getTime()) / 1000
+    );
+    return remainingSeconds > 0 ? remainingSeconds : null;
+}

frontend/src/pages/Dashboard.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Case from "../components/Case";
-
 import { useEffect } from "react";
 
 export default function Dashboard() {

frontend/src/pages/Layout/MainLayout.jsx

@@ -1,6 +1,4 @@
 import React from "react";
-import Navbar from "../../components/Navbar";
-import Sidebar from "../../components/Sidebar";
 import Footer from "../../components/Footer";
 import Navigation from "../../components/Navigation";