Add basic search functionality

Author: GreenMan36

src/App.tsx

@@ -1,27 +1,20 @@
-import { useAppContext } from "./contexts/AppContext";
-
+import { Routes, Route } from "react-router-dom";
 import Header from "./layouts/Header";
 import Banner from "./layouts/Banner";
-import Sidebar from "./layouts/Sidebar";
 import Footer from "./layouts/Footer";
-
-import SnippetList from "./components/SnippetList";
+import HomePage from "./pages/HomePage.tsx";
+import SearchPage from "./pages/SearchPage.tsx";
 
 const App = () => {
-  const { category } = useAppContext();
-
   return (
     <div className="container flow">
       <Header />
       <Banner />
       <main className="main">
-        <Sidebar />
-        <section className="flow">
-          <h2 className="section-title">
-            {category ? category : "Select a category"}
-          </h2>
-          <SnippetList />
-        </section>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/search" element={<SearchPage />} />
+        </Routes>
       </main>
       <Footer />
     </div>

src/components/SearchFilters.tsx

@@ -0,0 +1,22 @@
+import { useCategories } from "../hooks/useCategories";
+import { useAppContext } from "../contexts/AppContext";
+
+const SearchFilters = () => {
+  const { category, setCategory } = useAppContext();
+  const { fetchedCategories } = useCategories();
+
+  return (
+    <div className="search-filters">
+      <select value={category} onChange={(e) => setCategory(e.target.value)}>
+        <option value="">All Categories</option>
+        {fetchedCategories.map((cat, idx) => (
+          <option key={idx} value={cat}>
+            {cat}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default SearchFilters;

src/components/SearchInput.tsx

@@ -1,6 +1,31 @@
 import { SearchIcon } from "./Icons";
+import { useState, useCallback } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
 
 const SearchInput = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchValue, setSearchValue] = useState(searchParams.get("q") || "");
+
+  const debouncedSearch = useCallback(
+    debounce((query: string) => {
+      if (query) {
+        setSearchParams({ q: query });
+        navigate(`/search?q=${encodeURIComponent(query.trim().toLowerCase())}`);
+      } else {
+        setSearchParams({});
+        navigate("/");
+      }
+    }, 200),
+    [setSearchParams, navigate]
+  );
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    debouncedSearch(value);
+  };
+
   return (
     <div className="search-field">
       <label htmlFor="search">
@@ -9,11 +34,25 @@ const SearchInput = () => {
       <input
         type="search"
         id="search"
+        value={searchValue}
+        onChange={handleSearch}
         placeholder="Search here..."
         autoComplete="off"
       />
     </div>
   );
 };
 
+// Debounce utility function
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
 export default SearchInput;

src/components/SearchSnippetList.tsx

@@ -0,0 +1,64 @@
+import { useState, useMemo } from "react";
+import { SnippetType } from "../types";
+import { useAppContext } from "../contexts/AppContext";
+import { useSnippets } from "../hooks/useSnippets";
+import SnippetModal from "./SnippetModal";
+
+const SearchSnippetList = ({ query }: { query: string | null }) => {
+  const { language, snippet, setSnippet } = useAppContext();
+  const { fetchedSnippets, loading } = useSnippets();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const filteredSnippets = useMemo(() => {
+    if (!query) return [];
+    return fetchedSnippets.filter((snippet) =>
+      snippet.title.toLowerCase().includes(query.toLowerCase())
+    );
+  }, [fetchedSnippets, query]);
+
+  const handleOpenModal = (activeSnippet: SnippetType) => {
+    setIsModalOpen(true);
+    setSnippet(activeSnippet);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSnippet(null);
+  };
+
+  if (loading) return <div>Searching...</div>;
+  if (filteredSnippets.length === 0)
+    return <div>No results found for "{query}"</div>;
+
+  return (
+    <>
+      <ul role="list" className="snippets">
+        {filteredSnippets.map((snippet, idx) => (
+          <li key={idx}>
+            <button
+              className="snippet | flow"
+              data-flow-space="sm"
+              onClick={() => handleOpenModal(snippet)}
+            >
+              <div className="snippet__preview">
+                <img src={language.icon} alt={language.lang} />
+              </div>
+              <h3 className="snippet__title">{snippet.title}</h3>
+              <p className="snippet__description">{snippet.description}</p>
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      {isModalOpen && snippet && (
+        <SnippetModal
+          snippet={snippet}
+          handleCloseModal={handleCloseModal}
+          language={language.lang}
+        />
+      )}
+    </>
+  );
+};
+
+export default SearchSnippetList;

src/hooks/useCategories.ts

@@ -16,7 +16,8 @@ export const useCategories = () => {
   );
 
   const fetchedCategories = useMemo(() => {
-    return data ? data.map((item) => item.categoryName) : [];
+    const categories = data ? data.map((item) => item.categoryName) : [];
+    return ["All snippets", ...categories];
   }, [data]);
 
   return { fetchedCategories, loading, error };

src/hooks/useSnippets.ts

@@ -14,8 +14,10 @@ export const useSnippets = () => {
     `/data/${slugify(language.lang)}.json`
   );
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.categoryName === category)?.snippets
+  const fetchedSnippets: SnippetType[] = data
+    ? category === "All snippets"
+      ? data.flatMap((item) => item.snippets)
+      : (data.find((item) => item.categoryName === category)?.snippets ?? [])
     : [];
 
   return { fetchedSnippets, loading, error };

src/main.tsx

@@ -3,11 +3,14 @@ import { createRoot } from "react-dom/client";
 import "./styles/main.css";
 import App from "./App";
 import { AppProvider } from "./contexts/AppContext";
+import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <AppProvider>
-      <App />
-    </AppProvider>
+    <BrowserRouter>
+      <AppProvider>
+        <App />
+      </AppProvider>
+    </BrowserRouter>
   </StrictMode>
 );

src/pages/HomePage.tsx

@@ -0,0 +1,21 @@
+import { useAppContext } from "../contexts/AppContext";
+import SnippetList from "../components/SnippetList";
+import Sidebar from "../layouts/Sidebar";
+
+const HomePage = () => {
+  const { category } = useAppContext();
+
+  return (
+    <>
+      <Sidebar />
+      <section className="flow">
+        <h2 className="section-title">
+          {category ? category : "Select a category"}
+        </h2>
+        <SnippetList />
+      </section>
+    </>
+  );
+};
+
+export default HomePage;

src/pages/SearchPage.tsx

@@ -0,0 +1,20 @@
+import { useSearchParams } from "react-router-dom";
+import SearchSnippetList from "../components/SearchSnippetList";
+import Sidebar from "../layouts/Sidebar";
+
+const SearchPage = () => {
+  const [searchParams] = useSearchParams();
+  const query = searchParams.get("q");
+
+  return (
+    <>
+      <Sidebar />
+      <section className="flow">
+        <h2 className="section-title">Search Results for: {query}</h2>
+        <SearchSnippetList query={query} />
+      </section>
+    </>
+  );
+};
+
+export default SearchPage;