From a84a75476ec4c2e14d3aa1044ab6ca881b1c2ba3 Mon Sep 17 00:00:00 2001
From: Nimit Haria <nimitharia007@gmail.com>
Date: Wed, 27 Mar 2024 12:56:39 +0530
Subject: [PATCH 1/2] feat: added video search

---
 package.json                                 |   1 +
 src/app/api/search/route.ts                  |  65 ++++++++++
 src/components/Appbar.tsx                    |  62 ++++++----
 src/components/search/MobileScreenSearch.tsx |  25 ++++
 src/components/search/SearchBar.tsx          | 118 +++++++++++++++++++
 src/components/search/VideoSearchCard.tsx    |  31 +++++
 src/components/search/VideoSearchInfo.tsx    |  15 +++
 src/components/search/VideoSearchLoading.tsx |  18 +++
 src/hooks/useClickOutside.ts                 |  21 ++++
 9 files changed, 331 insertions(+), 25 deletions(-)
 create mode 100644 src/app/api/search/route.ts
 create mode 100644 src/components/search/MobileScreenSearch.tsx
 create mode 100644 src/components/search/SearchBar.tsx
 create mode 100644 src/components/search/VideoSearchCard.tsx
 create mode 100644 src/components/search/VideoSearchInfo.tsx
 create mode 100644 src/components/search/VideoSearchLoading.tsx
 create mode 100644 src/hooks/useClickOutside.ts

diff --git a/package.json b/package.json
index 2b0e2cf96..90466cf0b 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "dayjs": "^1.11.10",
     "discord-oauth2": "^2.11.0",
     "discord.js": "^14.14.1",
+    "fuse.js": "^7.0.0",
     "jose": "^5.2.2",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.321.0",
diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
new file mode 100644
index 000000000..a8cc2938e
--- /dev/null
+++ b/src/app/api/search/route.ts
@@ -0,0 +1,65 @@
+import { Cache } from '@/db/Cache';
+import db from '@/db';
+import { CourseContent } from '@prisma/client';
+import Fuse from 'fuse.js';
+import { NextResponse } from 'next/server';
+
+export type TSearchedVideos = {
+  id: number;
+  parentId: number | null;
+  title: string;
+} & {
+  parent: { courses: CourseContent[] } | null;
+};
+
+const fuzzySearch = (videos: TSearchedVideos[], searchQuery: string) => {
+  const searchedVideos = new Fuse(videos, {
+    keys: ['title'],
+  }).search(searchQuery);
+
+  return searchedVideos.map((video) => video.item);
+};
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const searchQuery = searchParams.get('q');
+
+  if (searchQuery && searchQuery.length > 2) {
+    const value: TSearchedVideos[] = await Cache.getInstance().get(
+      'getAllVideosForSearch',
+      [],
+    );
+
+    if (value) {
+      return NextResponse.json(fuzzySearch(value, searchQuery));
+    }
+
+    const allVideos = await db.content.findMany({
+      where: {
+        type: 'video',
+        hidden: false,
+      },
+      select: {
+        id: true,
+        parentId: true,
+        title: true,
+        parent: {
+          select: {
+            courses: true,
+          },
+        },
+      },
+    });
+
+    Cache.getInstance().set(
+      'getAllVideosForSearch',
+      [],
+      allVideos,
+      24 * 60 * 60,
+    );
+
+    return NextResponse.json(fuzzySearch(allVideos, searchQuery));
+  }
+
+  return NextResponse.json({}, { status: 400 });
+}
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
index 369e7863b..30a62d316 100644
--- a/src/components/Appbar.tsx
+++ b/src/components/Appbar.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import Link from 'next/link';
-import React from 'react';
 import { JoinDiscord } from './JoinDiscord';
 import { AppbarAuth } from './AppbarAuth';
 import { useSession } from 'next-auth/react';
@@ -14,11 +13,14 @@ import { Button } from './ui/button';
 import { Sparkles } from 'lucide-react';
 import { ThemeToggler } from './ThemeToggler';
 import { NavigationMenu } from './landing/appbar/nav-menu';
+import SearchBar from './search/SearchBar';
+import MobileScreenSearch from './search/MobileScreenSearch';
 
 export const Appbar = () => {
   const session = useSession();
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
   const currentPath = usePathname();
+
   return (
     <>
       <nav className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2">
@@ -34,36 +36,46 @@ export const Appbar = () => {
           <Logo onFooter={false} />
 
           {session?.data?.user ? (
-            <div className="flex items-center space-x-2">
-              <div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-2">
-                <Button variant={'link'} size={'sm'} asChild>
-                  <JoinDiscord isNavigated={false} />
-                </Button>
+            <>
+              <div className="hidden md:block">
+                <SearchBar />
+              </div>
+              <div className="flex items-center space-x-2">
+                {/* Search Bar for smaller devices */}
+                <MobileScreenSearch />
+                <div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-2">
+                  <Button variant={'link'} size={'sm'} asChild>
+                    <JoinDiscord isNavigated={false} />
+                  </Button>
 
-                <Button size={'sm'} variant={'link'} asChild>
-                  <Link href={'https://projects.100xdevs.com/'} target="_blank">
-                    Slides
-                  </Link>
-                </Button>
+                  <Button size={'sm'} variant={'link'} asChild>
+                    <Link
+                      href={'https://projects.100xdevs.com/'}
+                      target="_blank"
+                    >
+                      Slides
+                    </Link>
+                  </Button>
 
-                <Button size={'sm'} variant={'link'} asChild>
-                  <Link
-                    href={'https://github.com/100xdevs-cohort-2/assignments'}
-                    target="_blank"
-                  >
-                    Assignments
-                  </Link>
-                </Button>
+                  <Button size={'sm'} variant={'link'} asChild>
+                    <Link
+                      href={'https://github.com/100xdevs-cohort-2/assignments'}
+                      target="_blank"
+                    >
+                      Assignments
+                    </Link>
+                  </Button>
 
-                <AppbarAuth />
-              </div>
+                  <AppbarAuth />
+                </div>
 
-              <ThemeToggler />
+                <ThemeToggler />
 
-              <div className="block sm:hidden">
-                <NavigationMenu />
+                <div className="block sm:hidden">
+                  <NavigationMenu />
+                </div>
               </div>
-            </div>
+            </>
           ) : (
             <div className="flex items-center space-x-2">
               <div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-3">
diff --git a/src/components/search/MobileScreenSearch.tsx b/src/components/search/MobileScreenSearch.tsx
new file mode 100644
index 000000000..daebf81ad
--- /dev/null
+++ b/src/components/search/MobileScreenSearch.tsx
@@ -0,0 +1,25 @@
+import { SearchIcon, XCircleIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import SearchBar from './SearchBar';
+
+const MobileScreenSearch = () => {
+  const [showSearchBar, setShowSearchBar] = useState(false);
+
+  const toggleSearchBar = () => {
+    setShowSearchBar((prev) => !prev);
+  };
+  return (
+    <div className="md:hidden">
+      {showSearchBar ? (
+        <div className="absolute top-0 px-3 left-0 h-16 bg-white dark:bg-[#020817] border-b z-[100] w-full flex items-center gap-3">
+          <SearchBar />
+          <XCircleIcon onClick={toggleSearchBar} />
+        </div>
+      ) : (
+        <SearchIcon onClick={toggleSearchBar} size={18} />
+      )}
+    </div>
+  );
+};
+
+export default MobileScreenSearch;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
new file mode 100644
index 000000000..72d63e7f3
--- /dev/null
+++ b/src/components/search/SearchBar.tsx
@@ -0,0 +1,118 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { SearchIcon, XIcon } from 'lucide-react';
+import { TSearchedVideos } from '@/app/api/search/route';
+import { useRouter } from 'next/navigation';
+import useClickOutside from '@/hooks/useClickOutside';
+import VideoSearchCard from './VideoSearchCard';
+import VideoSearchInfo from './VideoSearchInfo';
+import { toast } from 'sonner';
+import VideoSearchLoading from './VideoSearchLoading';
+
+const SearchBar = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchedVideos, setSearchedVideos] = useState<
+    TSearchedVideos[] | null
+  >(null);
+  const [isInputFocused, setIsInputFocused] = useState<boolean>(false);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useClickOutside(ref, () => {
+    setSearchedVideos(null);
+  });
+
+  const fetchData = useCallback(async (searchTerm: string) => {
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/search?q=${searchTerm}`);
+      const data = await response.json();
+      setSearchedVideos(data);
+    } catch (err) {
+      toast.error('Something went wrong while searching for videos');
+      setSearchTerm('');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (searchTerm.length > 2) {
+      const timeoutId = setTimeout(() => {
+        fetchData(searchTerm);
+      }, 300);
+
+      return () => clearTimeout(timeoutId);
+    }
+    setSearchedVideos(null);
+  }, [searchTerm, fetchData]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const clearSearchTerm = () => {
+    setSearchTerm('');
+  };
+
+  const handleCardClick = (videoUrl: string) => {
+    clearSearchTerm();
+    router.push(videoUrl);
+  };
+
+  const renderSearchResults = () => {
+    if (searchTerm.length < 3) {
+      return (
+        <VideoSearchInfo text="Please enter at least 3 characters to search" />
+      );
+    } else if (loading) {
+      return <VideoSearchLoading />;
+    } else if (!searchedVideos || searchedVideos.length === 0) {
+      return <VideoSearchInfo text="No videos found" />;
+    }
+    return searchedVideos.map((video) => (
+      <VideoSearchCard
+        key={video.id}
+        video={video}
+        onCardClick={handleCardClick}
+      />
+    ));
+  };
+
+  return (
+    <div
+      className="relative flex items-center w-full lg:w-[400px] xl:w-[500px] h-10"
+      ref={ref}
+    >
+      {/* Search Input Bar */}
+      <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-500" />
+      <Input
+        placeholder="Search for videos..."
+        className="px-10 border-2 focus-visible:ring-transparent rounded-full"
+        value={searchTerm}
+        onChange={handleInputChange}
+        onFocus={() => setIsInputFocused(true)}
+        onBlur={() => {
+          setIsInputFocused(false);
+        }}
+      />
+      {searchTerm.length > 0 && (
+        <XIcon
+          className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 transform cursor-pointer"
+          onClick={() => setSearchTerm('')}
+        />
+      )}
+
+      {/* Search Results */}
+      {isInputFocused && searchTerm.length > 0 && (
+        <div className="absolute top-12 bg-white dark:bg-[#020817] rounded-lg border-2 shadow-lg w-full py-2 max-h-[40vh] overflow-y-auto">
+          {renderSearchResults()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/src/components/search/VideoSearchCard.tsx b/src/components/search/VideoSearchCard.tsx
new file mode 100644
index 000000000..f50dd37d2
--- /dev/null
+++ b/src/components/search/VideoSearchCard.tsx
@@ -0,0 +1,31 @@
+import { TSearchedVideos } from '@/app/api/search/route';
+import { PlayCircleIcon } from 'lucide-react';
+import React from 'react';
+
+const VideoSearchCard = ({
+  video,
+  onCardClick,
+}: {
+  video: TSearchedVideos;
+  onCardClick: (videoUrl: string) => void;
+}) => {
+  const { id: videoId, parentId, parent } = video;
+
+  if (parentId && parent) {
+    const courseId = parent.courses[0].courseId;
+    const videoUrl = `/courses/${courseId}/${parentId}/${videoId}`;
+    return (
+      <div
+        className="px-3 py-2 hover:bg-gray-200 hover:dark:bg-gray-700 cursor-pointer flex items-center gap-3"
+        onClick={() => onCardClick(videoUrl)}
+      >
+        <div className="min-w-content">
+          <PlayCircleIcon className="w-4 h-4" />
+        </div>
+        <span className="w-4/5">{video.title}</span>
+      </div>
+    );
+  }
+};
+
+export default VideoSearchCard;
diff --git a/src/components/search/VideoSearchInfo.tsx b/src/components/search/VideoSearchInfo.tsx
new file mode 100644
index 000000000..1a8d66584
--- /dev/null
+++ b/src/components/search/VideoSearchInfo.tsx
@@ -0,0 +1,15 @@
+import { InfoIcon } from 'lucide-react';
+import React from 'react';
+
+const VideoSearchInfo = ({ text }: { text: string }) => {
+  return (
+    <div className="flex items-center gap-3 px-3 text-gray-700 dark:text-gray-500 text-sm">
+      <div className="min-w-content">
+        <InfoIcon className="w-4 h-4" />
+      </div>
+      <span className="w-4/5">{text}</span>
+    </div>
+  );
+};
+
+export default VideoSearchInfo;
diff --git a/src/components/search/VideoSearchLoading.tsx b/src/components/search/VideoSearchLoading.tsx
new file mode 100644
index 000000000..ee0d2d1d5
--- /dev/null
+++ b/src/components/search/VideoSearchLoading.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const VideoSearchLoading = () => {
+  return (
+    <div className="animate-pulse flex flex-col gap-4 py-2 ">
+      {[1, 2, 3].map((value) => (
+        <div className="flex items-center gap-3 px-3 " key={value}>
+          <div className="min-w-content bg-slate-50 dark:bg-slate-900 rounded">
+            <div className="w-4 h-4" />
+          </div>
+          <span className="w-full h-6 bg-slate-50 dark:bg-slate-900 rounded"></span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default VideoSearchLoading;
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
new file mode 100644
index 000000000..a6fed8f77
--- /dev/null
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,21 @@
+import { RefObject, useEffect } from 'react';
+
+const useClickOutside = (
+  ref: RefObject<HTMLElement>,
+  handler: (event: MouseEvent) => void,
+) => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler(event);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, handler]);
+};
+
+export default useClickOutside;

From 6feb8abce7d16288984ce53e64b87103594ac07a Mon Sep 17 00:00:00 2001
From: Nimit Haria <nimitharia007@gmail.com>
Date: Wed, 27 Mar 2024 14:01:46 +0530
Subject: [PATCH 2/2] fix: video url click wasn't working

---
 src/components/search/MobileScreenSearch.tsx |  8 +++----
 src/components/search/SearchBar.tsx          | 25 +++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/search/MobileScreenSearch.tsx b/src/components/search/MobileScreenSearch.tsx
index daebf81ad..64e3ac3cd 100644
--- a/src/components/search/MobileScreenSearch.tsx
+++ b/src/components/search/MobileScreenSearch.tsx
@@ -1,5 +1,5 @@
-import { SearchIcon, XCircleIcon } from 'lucide-react';
-import React, { useState } from 'react';
+import { SearchIcon, XIcon } from 'lucide-react';
+import { useState } from 'react';
 import SearchBar from './SearchBar';
 
 const MobileScreenSearch = () => {
@@ -12,8 +12,8 @@ const MobileScreenSearch = () => {
     <div className="md:hidden">
       {showSearchBar ? (
         <div className="absolute top-0 px-3 left-0 h-16 bg-white dark:bg-[#020817] border-b z-[100] w-full flex items-center gap-3">
-          <SearchBar />
-          <XCircleIcon onClick={toggleSearchBar} />
+          <SearchBar onCardClick={toggleSearchBar} />
+          <XIcon onClick={toggleSearchBar} />
         </div>
       ) : (
         <SearchIcon onClick={toggleSearchBar} size={18} />
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 72d63e7f3..6be5e6acc 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from '@/components/ui/input';
-import { SearchIcon, XIcon } from 'lucide-react';
+import { SearchIcon, XCircleIcon } from 'lucide-react';
 import { TSearchedVideos } from '@/app/api/search/route';
 import { useRouter } from 'next/navigation';
 import useClickOutside from '@/hooks/useClickOutside';
@@ -9,7 +9,7 @@ import VideoSearchInfo from './VideoSearchInfo';
 import { toast } from 'sonner';
 import VideoSearchLoading from './VideoSearchLoading';
 
-const SearchBar = () => {
+const SearchBar = ({ onCardClick }: { onCardClick?: () => void }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [searchedVideos, setSearchedVideos] = useState<
     TSearchedVideos[] | null
@@ -19,9 +19,10 @@ const SearchBar = () => {
   const router = useRouter();
 
   const ref = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   useClickOutside(ref, () => {
-    setSearchedVideos(null);
+    setIsInputFocused(false);
   });
 
   const fetchData = useCallback(async (searchTerm: string) => {
@@ -58,10 +59,20 @@ const SearchBar = () => {
   };
 
   const handleCardClick = (videoUrl: string) => {
+    if (onCardClick !== undefined) {
+      onCardClick();
+    }
     clearSearchTerm();
     router.push(videoUrl);
   };
 
+  const handleClearInput = () => {
+    clearSearchTerm();
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  };
+
   const renderSearchResults = () => {
     if (searchTerm.length < 3) {
       return (
@@ -94,14 +105,12 @@ const SearchBar = () => {
         value={searchTerm}
         onChange={handleInputChange}
         onFocus={() => setIsInputFocused(true)}
-        onBlur={() => {
-          setIsInputFocused(false);
-        }}
+        ref={searchInputRef}
       />
       {searchTerm.length > 0 && (
-        <XIcon
+        <XCircleIcon
           className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 transform cursor-pointer"
-          onClick={() => setSearchTerm('')}
+          onClick={handleClearInput}
         />
       )}