From 40affbecaa5ced8b65c9ecd0936caf48517bb1d9 Mon Sep 17 00:00:00 2001
From: Jay <jdragon2050@gmail.com>
Date: Wed, 3 Jul 2024 09:51:19 -0700
Subject: [PATCH] add search function for boards

---
 client/src/context/BoardContext.tsx | 10 ++++++
 client/src/pages/Home.tsx           | 50 ++++++++++++++++++++++-------
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/client/src/context/BoardContext.tsx b/client/src/context/BoardContext.tsx
index 4c92676..2a880ec 100644
--- a/client/src/context/BoardContext.tsx
+++ b/client/src/context/BoardContext.tsx
@@ -37,6 +37,10 @@ interface BoardContextType {
   isToastSuccess: string;
   setIsToastSuccess: (isToastSuccess: string) => void;
   handleDownloadTemplate: (board: Board) => void;
+  searchInput: string;
+  setSearchInput: (searchInput: string) => void;
+  searchedBoards: Board[];
+  setSearchedBoards: (boards: Board[]) => void;
 }
 
 // Create the context with a default undefined value
@@ -54,6 +58,8 @@ export const BoardProvider = ({ children }: { children: ReactNode }) => {
   const { editCard } = useEditCard();
   const { deleteCard } = useDeleteCard();
   const [isToastSuccess, setIsToastSuccess] = useState<string>("");
+  const [searchInput, setSearchInput] = useState<string>("");
+  const [searchedBoards, setSearchedBoards] = useState<Board[]>([]);
 
   const updateTitleText = () => {
     if (selectedCard) {
@@ -202,6 +208,10 @@ export const BoardProvider = ({ children }: { children: ReactNode }) => {
         isToastSuccess,
         setIsToastSuccess,
         handleDownloadTemplate,
+        searchInput,
+        setSearchInput,
+        searchedBoards,
+        setSearchedBoards
       }}
     >
       {children}
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index e6b5c71..4cfeafd 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -33,6 +33,10 @@ const Home: React.FC = () => {
     setIsAddingNewBoard,
     populateDummyData,
     isToastSuccess,
+    searchInput,
+    setSearchInput,
+    searchedBoards,
+    setSearchedBoards
   } = useBoard();
 
   const { currentBoards, setCurrentBoards, currentBoardId } =
@@ -69,6 +73,7 @@ const Home: React.FC = () => {
           );
           setCurrentBoards(updatedBoards);
           setUserBoards(updatedBoards);
+          setSearchedBoards(updatedBoards);
         }
       } catch (error) {
         console.error("Error fetching boards:", error);
@@ -127,6 +132,20 @@ const Home: React.FC = () => {
     setIsAddingNewBoard(false);
   }, []);
 
+  useEffect(() => {
+    const originalBoards = userBoards;
+    let filteredBoards = userBoards;
+    if(searchInput){
+      
+      filteredBoards = userBoards.filter((board) =>
+        board.name.toLowerCase().includes(searchInput.toLowerCase())
+      );
+      setSearchedBoards(filteredBoards);
+    }else{
+      setSearchedBoards(originalBoards);
+    }
+  }, [searchInput])
+
   useEffect(() => {
     if (isToastSuccess.length > 0) {
       toast.success(isToastSuccess, {
@@ -187,11 +206,9 @@ const Home: React.FC = () => {
       {selectedBoard &&
         !selectedCard &&
         !isTemplate &&
-        !uploadedTemplateNames.includes(selectedBoard!.name) && 
+        !uploadedTemplateNames.includes(selectedBoard!.name) &&
         selectedBoard.cards?.length &&
-        selectedBoard.cards.length > 1 && (
-          <UploadBoardComponent />
-        )}
+        selectedBoard.cards.length > 1 && <UploadBoardComponent />}
       {!selectedBoard && !selectedCard && !isAddingNewBoard && (
         <>
           {!isSearching && (
@@ -224,17 +241,28 @@ const Home: React.FC = () => {
                 {isAddingNewBoard ? (
                   <CreateBoardComponent handleCancel={handleCancel} />
                 ) : (
-                  <button
-                    className=" bg-flair font-primary text-secondaryElements px-4 py-2 mb-4 rounded hover:text-white"
-                    onClick={() => setIsAddingNewBoard(true)}
-                  >
-                    Create a new board
-                  </button>
+                  <>
+                    <div className="mb-4">
+                      <input
+                        type="text"
+                        id="searchInput"
+                        placeholder="Search for boards"
+                        className="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-300 focus:border-gray-300"
+                        onChange={(e) => setSearchInput(e.target.value)}
+                      />
+                      </div>
+                      <button
+                        className=" bg-flair font-primary text-secondaryElements px-4 py-2 mb-4 rounded hover:text-white"
+                        onClick={() => setIsAddingNewBoard(true)}
+                      >
+                        Create a new board
+                      </button>
+                    </>
                 )}
 
                 <div className="text-center">
                   <ul className="flex flex-row flex-wrap gap-4 justify-center">
-                    {userBoards.map((board, i) => (
+                    {searchedBoards.map((board, i) => (
                       <li key={i} className="cursor-pointer">
                         <BoardPreview
                           handleSelectBoard={() => setSelectedBoard(board)}