feat(266): Create a general component for search

UnlockedLabs · Jul 7, 2024 · 02d2f26 · 02d2f26
1 parent 0ced622
commit 02d2f26
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 28 deletions.
diff --git a/frontend/src/Components/inputs/DropdownControl.tsx b/frontend/src/Components/inputs/DropdownControl.tsx
@@ -11,19 +11,21 @@ export function DropdownControl({
   enumType,
 }: DropdownControlProps) {
   return (
-    <label className="form-control w-full">
-      {label && (
-        <div className="label">
-          <span className="label-text">{label}</span>
-        </div>
-      )}
+    <label className="form-control">
       <select
         className="select select-bordered"
         onChange={(e) => callback(e.target.value)}
       >
+        {label ? (
+          <option value="" disabled selected>
+            {label}
+          </option>
+        ) : (
+          ""
+        )}
         {Object.entries(enumType).map(([key, value]) => (
           <option key={key} value={value}>
-            {value}
+            {key}
           </option>
         ))}
       </select>

diff --git a/frontend/src/Components/inputs/SearchBar.tsx b/frontend/src/Components/inputs/SearchBar.tsx
@@ -0,0 +1,24 @@
+import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+
+export default function SearchBar({
+  searchTerm,
+  changeCallback,
+}: {
+  searchTerm: string;
+  changeCallback: (arg: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+  return (
+    <label className="form-control">
+      <div className="relative">
+        <MagnifyingGlassIcon className="absolute top-1/2 right-2 transform -translate-y-1/2 w-5 h-5 text-secondary" />
+        <input
+          type="text"
+          placeholder="Search..."
+          className="input input-bordered w-full max-w-xs"
+          value={searchTerm}
+          onChange={(e) => changeCallback(e.target.value)}
+        />
+      </div>
+    </label>
+  );
+}
diff --git a/frontend/src/Pages/CourseCatalog.tsx b/frontend/src/Pages/CourseCatalog.tsx
@@ -4,6 +4,7 @@ import ToggleView, { ViewType } from "@/Components/ToggleView";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { useEffect, useState } from "react";
 import CatalogCourseCard from "@/Components/CatalogCourseCard";
+import SearchBar from "@/Components/inputs/SearchBar";
 import { Program, ServerResponse } from "@/common";
 import useSWR from "swr";
 
@@ -13,6 +14,7 @@ import useSWR from "swr";
 export default function CourseCatalog() {
   const { user } = useAuth();
   const [activeView, setActiveView] = useState<ViewType>(ViewType.Grid);
+  const [searchTerm, setSearchTerm] = useState("");
 
   const { data, mutate } = useSWR<ServerResponse<Program>>(
     `/api/users/${user.id}/catalogue`,
@@ -27,6 +29,11 @@ export default function CourseCatalog() {
     mutate();
   }
 
+  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
+    setSearchTerm(e.target.value);
+    // setPageQuery(1);
+  }
+
   if (!data) return <div></div>;
 
   return (
@@ -38,17 +45,7 @@ export default function CourseCatalog() {
           <ToggleView activeView={activeView} setActiveView={setActiveView} />
         </div>
         <div className="flex flex-row items-center mt-4 justify-between">
-          {/* TO DO: REPLACE WITH MADE SEARCH BAR */}
-          <input
-            type="text"
-            placeholder="Search..."
-            className="input input-bordered w-full max-w-xs input-sm"
-            // value={searchTerm}
-            // onChange={(e) => {
-            // setSearchTerm(e.target.value);
-            // setPageQuery(1);
-            // }}
-          />
+          <SearchBar searchTerm={searchTerm} changeCallback={handleSearch} />
         </div>
         {/* render on gallery or list view */}
         <div

diff --git a/frontend/src/Pages/Users.tsx b/frontend/src/Pages/Users.tsx
@@ -21,6 +21,7 @@ import Modal, { ModalType } from "../Components/Modal";
 import DeleteForm from "../Components/DeleteForm";
 import ResetPasswordForm from "../Components/forms/ResetPasswordForm";
 import ShowTempPasswordForm from "../Components/forms/ShowTempPasswordForm";
+import SearchBar from "../Components/inputs/SearchBar";
 import { useAuth } from "../AuthContext";
 import { useDebounceValue } from "usehooks-ts";
 import Pagination from "@/Components/Pagination";
@@ -142,21 +143,17 @@ export default function Users() {
     resetModal();
   };
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    setPageQuery(1);
+  };
+
   return (
     <AuthenticatedLayout title="Users">
       <PageNav user={auth.user!} path={["Settings", "Users"]} />
       <div className="flex flex-col space-y-6 overflow-x-auto rounded-lg p-4">
         <div className="flex justify-between">
-          <input
-            type="text"
-            placeholder="Search..."
-            className="input input-bordered w-full max-w-xs input-sm"
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              setPageQuery(1);
-            }}
-          />
+          <SearchBar searchTerm={searchTerm} changeCallback={handleChange} />
           <div className="tooltip tooltip-left" data-tip="Add User">
             <button
               className="btn btn-primary btn-sm"