add loading state

khabzox · Aug 28, 2024 · e3b714f · e3b714f · khabzox · Sep 15, 2024
1 parent d5ada2d
commit e3b714f
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 19 deletions.
diff --git a/apps/nextjs-app/app/search/page.jsx b/apps/nextjs-app/app/search/page.jsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import useSearch from "@/hooks/useSearch";
-import { File, SquareArrowOutUpRight, Loader, Loader2 } from "lucide-react";
+import { File, SquareArrowOutUpRight, Loader2 } from "lucide-react";
 import Link from "next/link";
 
 export const LoadingCard = () => (

diff --git a/apps/nextjs-app/components/landing-page/levels.jsx b/apps/nextjs-app/components/landing-page/levels.jsx
@@ -1,21 +1,29 @@
 import Link from "next/link";
-import { Folder, SquareArrowOutUpRight } from "lucide-react";
+import { useState } from 'react';
+import { Folder, SquareArrowOutUpRight, Loader2 } from "lucide-react";
 
 const Levels = () => {
+  const [loadingLevel, setLoadingLevel] = useState(null);
+
+  const handleLevelClick = (index) => {
+    setLoadingLevel(index);
+    setTimeout(() => setLoadingLevel(null), 3000);
+  };
+
   const getLink = (title) => {
     switch (title) {
       case "1 AC":
         return "/tutorials/1ac";
       case "2 AC":
         return "/tutorials/2ac";
-        case "3 AC":
-          return "/tutorials/3ac";
-        case "TC":
-          return "/tutorials/tc";
-          case "1 BAC":
-            return "/tutorials/1bac";
-          case "2 BAC":
-            return "/tutorials/2bac";
+      case "3 AC":
+        return "/tutorials/3ac";
+      case "TC":
+        return "/tutorials/tc";
+      case "1 BAC":
+        return "/tutorials/1bac";
+      case "2 BAC":
+        return "/tutorials/2bac";
       default:
         return "/";
     }
@@ -25,15 +33,24 @@ const Levels = () => {
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-white pb-4">
       {["1 AC", "2 AC", "3 AC", "TC", "1 BAC", "2 BAC"].map(
         (title, index) => (
-          <Link href={getLink(title)} key={index}>
-            <div className="flex justify-between items-center bg-primary p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
+          <Link href={getLink(title)} key={index} passHref>
+            <div
+              onClick={() => handleLevelClick(index)}
+              className="flex justify-between items-center bg-primary p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer"
+            >
               <div className="flex items-center space-x-3 text-base md:text-lg lg:text-xl">
                 <div className="bg-white/20 rounded-sm p-2">
                   <Folder />
                 </div>
                 <h3>{title}</h3>
               </div>
-              <SquareArrowOutUpRight />
+              <div className="flex items-center space-x-2">
+                {loadingLevel === index ? (
+                  <Loader2 className="animate-spin" />
+                ): (
+                <SquareArrowOutUpRight />
+                )}
+              </div>
             </div>
           </Link>
         )
@@ -43,4 +60,3 @@ const Levels = () => {
 };
 
 export default Levels;
-
diff --git a/apps/nextjs-app/components/landing-page/tutorials.jsx b/apps/nextjs-app/components/landing-page/tutorials.jsx
@@ -1,10 +1,44 @@
+"use client";
+
 import { UbuntuFont } from "@/config/fonts";
 
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import Levels from "./levels";
 
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2 } from "lucide-react";
+
 const Tutorials = () => {
+  const [loadingSearch, setLoadingSearch] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const router = useRouter();
+
+  useEffect(() => {
+    // Extract search query from the URL
+    const params = new URLSearchParams(window.location.search);
+    const query = params.get("q");
+    if (query) {
+      setSearchQuery(query);
+    }
+  }, []);
+
+  const handleSearch = () => {
+    setLoadingSearch(true);
+    setTimeout(() => setLoadingSearch(null), 3000);
+    if (searchQuery.trim()) {
+      router.push(`/search?q=${encodeURIComponent(searchQuery)}`);
+    }
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSearch();
+    }
+  };
+
   return (
     <section className="bg-secondary my-44" id="Tutoriels">
       <div className="flex flex-col max-w-[95rem] mx-auto px-5 md:px-24 py-20">
@@ -21,8 +55,20 @@ const Tutorials = () => {
             <Input
               className="bg-transparent border-4 border-primary active:border-primary active:focus:ring-black py-6 placeholder:text-xl placeholder:text-white/50 text-white"
               placeholder="Recherche..."
+              value={searchQuery}
+              onKeyDown={handleKeyDown}
+              onChange={(e) => setSearchQuery(e.target.value)}
             />
-            <Button className="h-15 px-8 text-xl font-bold">Search</Button>
+            <Button
+              onClick={handleSearch}
+              className="h-15 px-8 text-xl font-bold"
+            >
+              {loadingSearch ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                "Rechercher"
+              )}
+            </Button>
           </div>
         </div>
         <Levels />

diff --git a/apps/nextjs-app/components/tutorials/levels.jsx b/apps/nextjs-app/components/tutorials/levels.jsx
@@ -1,8 +1,14 @@
 import Link from "next/link";
-import { Folder, SquareArrowOutUpRight } from "lucide-react";
+import { useState } from 'react';
+import { Folder, SquareArrowOutUpRight, Loader2 } from "lucide-react";
 
 const Levels = () => {
-  // Define an array of objects, each with a name and path
+  const [loadingLevel, setLoadingLevel] = useState(null);
+
+  const handleLevelClick = (index) => {
+    setLoadingLevel(index);
+  };
+
   const levelArr = [
     { name: "1 AC", path: "/tutorials/1ac" },
     { name: "2 AC", path: "/tutorials/2ac" },
@@ -16,14 +22,23 @@ const Levels = () => {
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-white pb-4">
       {levelArr.map((level, index) => (
         <Link href={level.path} key={index}>
-          <div className="flex justify-between items-center bg-primary p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
+          <div
+            onClick={() => handleLevelClick(index)}
+            className="flex justify-between items-center bg-primary p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer"
+          >
             <div className="flex items-center space-x-3 text-base md:text-lg lg:text-xl">
               <div className="bg-white/20 rounded-sm p-2">
                 <Folder />
               </div>
               <h3>{level.name}</h3>
             </div>
-            <SquareArrowOutUpRight />
+            <div className="flex items-center space-x-2">
+              {loadingLevel === index ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                <SquareArrowOutUpRight />
+              )}
+            </div>
           </div>
         </Link>
       ))}