feat(#576)/added search on frontend with fuse.js

apps/web/components/ContentSearch.tsx

@@ -1,30 +1,89 @@
 "use client";
-import { useEffect, useRef, useState, useDeferredValue } from "react";
-import Link from "next/link";
+
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { Dialog, DialogClose, DialogContent, Input, Card, CardDescription, CardHeader, CardTitle } from "@repo/ui";
-import { getSearchResults } from "../lib/search";
-import Image from "next/image";
+import { Dialog, DialogClose, DialogContent, Button, Input, Card, CardHeader, CardTitle, CardDescription } from "@repo/ui";
+import { useEffect, useRef, useState } from "react";
+import { Track, Problem } from "@prisma/client";
+import Fuse from "fuse.js";
+import Link from "next/link";
 
-export function ContentSearch() {
+declare global {
+  interface Window {
+    SpeechRecognition: any;
+  }
+}
+
+export function ContentSearch({ tracks }: { tracks: (Track & { problems: Problem[] })[] }) {
   const [dialogOpen, setDialogOpen] = useState(false);
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState("");
-  const [searchTracks, setSearchTracks] = useState<any[]>([]);
+  const [searchTracks, setSearchTracks] = useState<(Track & { problems: Problem[] })[]>(tracks);
   const [selectedIndex, setSelectedIndex] = useState(-1);
-  const scrollableContainerRef = useRef<HTMLDivElement>(null);
-  const deferredInput = useDeferredValue(input);
+  const [shortcut, setShortcut] = useState("Ctrl K");
+  const [isListening, setIsListening] = useState(false);
+  const speechRecognitionRef = useRef<any | null>(null);
 
   useEffect(() => {
-    async function fetchSearchResults() {
-      if (deferredInput.length > 0) {
-        const data = await getSearchResults(deferredInput);
-        setSearchTracks(data);
-      } else {
-        setSearchTracks([]);
-      }
+    const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      speechRecognitionRef.current = new SpeechRecognition();
+      speechRecognitionRef.current.continuous = false; 
+      speechRecognitionRef.current.interimResults = false; 
+      speechRecognitionRef.current.lang = 'en-US'; 
+
+      speechRecognitionRef.current.onresult = (event: any) => {
+        const transcript = event.results[0][0].transcript;
+        setInput(transcript); 
+        setIsListening(false); 
+      };
+
+      speechRecognitionRef.current.onstart = () => setIsListening(true);
+      speechRecognitionRef.current.onend = () => setIsListening(false);
+    }
+  }, []);
+
+  const startListening = () => {
+    if (speechRecognitionRef.current) {
+      speechRecognitionRef.current.start();
+    }
+  };
+
+  const endListening = () =>{
+    if(speechRecognitionRef.current){
+      speechRecognitionRef.current.stop();
     }
-    fetchSearchResults();
-  }, [deferredInput]);
+  }
+
+  useEffect(() => {
+    const fuse = new Fuse(tracks, {
+      keys: ["title", "description"], // searching for the title and description, remove the description if needed
+      includeScore: true,
+      threshold: 0.4,
+      minMatchCharLength: 2,
+      shouldSort: true,
+      isCaseSensitive: false,
+      includeMatches: true
+    });
+
+    if (input.length > 0) {
+      const result = fuse.search(input);
+      setSearchTracks(result.map(({ item }) => item));
+    } else {
+      setSearchTracks(tracks);
+    }
+    setSelectedIndex(-1);
+  }, [input, tracks]);
+
+  useEffect(() => {
+    const isMacOS = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+    setShortcut(isMacOS ? "Cmd + K" : "Ctrl + K");
+  }, []);
+
+  function handleClose(open: boolean) {
+    if (!open) setDialogOpen(false);
+    setInput("");
+    endListening();
+  }
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -47,7 +106,7 @@ export function ContentSearch() {
           if (selectedIndex !== -1) {
             event.preventDefault();
             const selectedTrack = searchTracks[selectedIndex];
-            window.open(`/tracks/${selectedTrack?.payload.trackId}/${selectedTrack?.payload.problemId}`, "_blank");
+            window.open(`/tracks/${selectedTrack?.id}/${selectedTrack?.id}`, "_blank");
           }
           break;
         default:
@@ -68,25 +127,18 @@ export function ContentSearch() {
     }
   }, [selectedIndex]);
 
-  const handleClose = (open: boolean) => {
-    if (!open) {
-      setDialogOpen(false);
-      setInput("");
-    }
-  };
-
   return (
     <Dialog open={dialogOpen} onOpenChange={handleClose}>
       <div
         className="md:max-w-screen border border-primary/15 p-3 rounded-lg cursor-text w-full mx-auto"
         onClick={() => setDialogOpen(true)}
       >
-        <div className="md:flex gap-2 items-center hidden justify-between ">
+        <div className="md:flex gap-2 items-center hidden justify-between">
           <div className="flex gap-2 items-center">
             <MagnifyingGlassIcon className="size-4" />
             Search
           </div>
-          <kbd className="bg-white/15 p-2 rounded-sm text-sm leading-3">Ctrl + K</kbd>
+          <kbd className="bg-white/15 p-2 rounded-sm text-sm leading-3">{shortcut}</kbd>
         </div>
         <div className="block md:hidden">
           <MagnifyingGlassIcon className="size-4" />
@@ -102,6 +154,13 @@ export function ContentSearch() {
             value={input}
             onChange={(e) => setInput(e.target.value)}
           />
+          <button onClick={isListening ? endListening : startListening}>
+            <div className={`h-8 w-8 mr-2 ${isListening ? `bg-red-600` : `bg-black`} rounded-full flex items-center justify-center`}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 304 408">
+                <path fill="white" d="M149.5 259q-26.5 0-45.5-19t-19-45V67q0-27 19-45.5T149.5 3t45 18.5T213 67v128q0 26-18.5 45t-45 19zM262 195h37q0 54-37.5 94.5T171 338v70h-43v-70q-53-8-90.5-49T0 195h36q0 46 34 77t79.5 31t79-31t33.5-77z" />
+              </svg>
+            </div>
+          </button>
           <DialogClose>
             <Cross2Icon className="h-4 w-4" />
             <span className="sr-only">Close</span>
@@ -110,25 +169,24 @@ export function ContentSearch() {
         <div className="h-[400px] py-4 space-y-4 overflow-y-scroll" ref={scrollableContainerRef}>
           {searchTracks.length > 0 &&
             searchTracks.map((track, index) => (
-              <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
+              <div key={track.id} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
                 <Link
                   className="flex"
-                  href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
+                  href={`/tracks/${track.id}`}
                   target="_blank"
                   passHref
                 >
                   <Card className="p-2 w-full mx-2">
                     <div className="flex my-2">
-                      <Image
-                        alt={track.payload.problemTitle}
-                        src={track.payload.image}
-                        className="flex mx-2 w-1/6 rounded-xl"
+                      <img
+                        alt={track.title}
+                        src={track.image}
+                        className="flex mx-2 w-1/6 h-1/6 rounded-xl"
                       />
-
                       <div>
                         <CardHeader>
-                          <CardTitle>{track.payload.problemTitle}</CardTitle>
-                          <CardDescription>{track.payload.trackTitle}</CardDescription>
+                          <CardTitle>{track.title}</CardTitle>
+                          <CardDescription>{track.description}</CardDescription>
                         </CardHeader>
                       </div>
                     </div>

apps/web/components/Hero.tsx

@@ -1,10 +1,11 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { ContentSearch } from "../components/ContentSearch";
 import { motion } from "framer-motion";
+import { Track, Problem } from "@prisma/client";
 import { Spotlight } from "@repo/ui";
+import { ContentSearch } from "./ContentSearch";
 
-export default function Hero() {
+export default function Hero({ tracks }: { tracks: (Track & { problems: Problem[] })[] }) {
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
   const handleMouseMove = (event: MouseEvent) => {
@@ -165,7 +166,7 @@ export default function Hero() {
         <p className="text-primary/80 max-w-lg text-center tracking-tight md:text-lg font-light">
           A platform where you'll find the right content to help you improve your skills and grow your knowledge.
         </p>
-        <ContentSearch />
+        <ContentSearch tracks={tracks}/>
       </motion.div>
       <Spotlight className="-top-40 left-0 md:left-60 md:-top-20 -z-10" fill="blue" />
     </div>

apps/web/package.json

@@ -22,6 +22,7 @@
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.30",
+    "fuse.js": "^7.0.0",
     "next": "^14.0.4",
     "next-auth": "^4.24.7",
     "next-themes": "^0.2.1",

apps/web/screens/Landing.tsx

@@ -13,7 +13,7 @@ export async function Landing() {
   return (
     <div className="flex flex-col">
       <AppbarClient />
-      <Hero />
+      <Hero tracks={tracks}/>
       <Tracks tracks={tracks} categories={categories} />
       <FooterCTA />
       <Footer />

yarn.lock

@@ -3461,6 +3461,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuse.js@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
+  integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -6832,16 +6837,7 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6945,14 +6941,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7761,7 +7750,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -7779,15 +7768,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"