Add search and sort support

lukevukovich · Nov 7, 2024 · 7cb0704 · 7cb0704
1 parent 13d5888
commit 7cb0704
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 7 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,4 +1,4 @@
 icon.svg,1730496763544,3d7bb3bfba2affe9fb7b5615c2456c5136ba584b57e187ae954484d362fa397f
-index.html,1730931090780,3625082f818ada9adf417db61a56a942cffea235fce31a839112cc51a3dd738d
-assets/index-wjjpGfmU.css,1730931090780,9584bb703e2905a126db47dd32547a30ede3d25df3d3cf4d9cfa8e5562144e97
-assets/index-D23wurlf.js,1730931090811,2bb37702fede1441db52f1e057c363b07fc9903f4d220213753d73898d1e28bb
+index.html,1730944629206,d29e832cbe83e3c9601eccde3c5c3732816de296dd4d713a4a1b8695cd89f22d
+assets/index-BWUh0Xae.css,1730944629206,0e9b3a61927b827eb82174d2f0f5a958927663a761cec682bb4c87f9ec2fe108
+assets/index-DCjzwP8T.js,1730944629232,fe824978444d203ad4cf7d459bb5011a1f4507563ee3239f096b7624e8e26aee
diff --git a/src/App.css b/src/App.css
@@ -31,6 +31,19 @@ input {
   padding-right: 15px;
 }
 
+select {
+  font-size: 18px;
+  background-color: white;
+  flex-grow: 1;
+  padding: 10px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  outline: none;
+  border: none;
+  padding-right: 15px;
+  color: gray;
+}
+
 button {
   font-size: 18px;
   color: black;
@@ -58,7 +71,7 @@ button:active {
 
 .button-icon {
   margin-right: 10px;
-  margin-left: 3px;  
+  margin-left: 3px;
   margin-top: 1px;
 }
 

diff --git a/src/assets/TreatmentRecordTile/TreatmentRecordTile.jsx b/src/assets/TreatmentRecordTile/TreatmentRecordTile.jsx
@@ -12,6 +12,7 @@ export default function TreatmentRecordTile({
   treatmentRecord,
   treatmentRecords,
   setTreatmentRecords,
+  setAllTreatmentRecords,
 }) {
   const navigate = useNavigate();
 
@@ -31,6 +32,7 @@ export default function TreatmentRecordTile({
       const newRecords = treatmentRecords.filter(
         (record) => record.recordId !== treatmentRecord.recordId
       );
+      setAllTreatmentRecords(newRecords);
       setTreatmentRecords(newRecords);
     } catch (error) {}
   }

diff --git a/src/pages/Profile/Profile.css b/src/pages/Profile/Profile.css
@@ -90,4 +90,30 @@
   background-color: rgb(255, 177, 167);
   font-size: 60px;
   color: white;
+}
+
+.search-sort-pane {
+  width: 90vw;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 16px;
+  display: none;
+}
+
+.search-sort-pane input {
+  flex-grow: 1;
+  width: 100%;
+  font-size: 16px;
+}
+
+.search-sort-pane select {
+  font-size: 16px;
+  text-align: end;
+  padding-right: 4px;
+  padding-left: 10px;
+}
+
+.search-sort-pane option {
+  color: black;
 }
diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx
@@ -1,7 +1,11 @@
 import "./Profile.css";
 import "../../App.css";
 import Header from "../../assets/Header/Header";
-import { faUser, faCheckCircle, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUser,
+  faCheckCircle,
+  faSpinner,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useRef, useState } from "react";
 import { checkSignInStatus, signIn, signOut } from "../../utils/Auth";
@@ -13,8 +17,11 @@ export default function Profile() {
   const [signedIn, setSignedIn] = useState(null);
   const [user, setUser] = useState(null);
   const [username, setUsername] = useState("");
+  const [allTreatmentRecords, setAllTreatmentRecords] = useState([]);
   const [treatmentRecords, setTreatmentRecords] = useState([]);
   const [loadingPage, setLoadingPage] = useState(true);
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState("");
 
   // Refs
   const loadingPageRef = useRef(null);
@@ -23,6 +30,8 @@ export default function Profile() {
   const userTextRef = useRef(null);
   const noRecordsSignInRef = useRef(null);
   const noRecordsRef = useRef(null);
+  const searchSortPaneRef = useRef(null);
+  const sortRef = useRef(null);
 
   // Handle sign in auth and element display
   async function handleSignIn() {
@@ -74,7 +83,9 @@ export default function Profile() {
       userTextRef.current.style.display = "none";
       noRecordsRef.current.style.display = "none";
       noRecordsSignInRef.current.style.display = "flex";
+      searchSortPaneRef.current.style.display = "none";
       setUser(null);
+      setAllTreatmentRecords([]);
       setTreatmentRecords([]);
     }
 
@@ -107,6 +118,14 @@ export default function Profile() {
     }
   }, [treatmentRecords]);
 
+  useEffect(() => {
+    if (allTreatmentRecords.length > 0) {
+      searchSortPaneRef.current.style.display = "flex";
+    } else {
+      searchSortPaneRef.current.style.display = "none";
+    }
+  }, [allTreatmentRecords]);
+
   useEffect(() => {
     if (loadingPage) {
       loadingPageRef.current.style.display = "flex";
@@ -117,16 +136,81 @@ export default function Profile() {
 
   async function loadTreatmentRecords() {
     const records = await getTreatmentRecords();
+    setAllTreatmentRecords(records);
     setTreatmentRecords(records);
   }
 
   useEffect(() => {
     handleAuth();
   }, []);
 
+  function searchRecords() {
+    if (search === "") {
+      if (sort !== "") {
+        sortRecords(allTreatmentRecords);
+      } else {
+        setTreatmentRecords(allTreatmentRecords);
+      }
+    } else {
+      let records = allTreatmentRecords;
+      let searchRecords = records.filter((record) => {
+        return record.name.toLowerCase().includes(search.toLowerCase());
+      });
+
+      if (sort !== "") {
+        sortRecords(searchRecords);
+      } else {
+        setTreatmentRecords(searchRecords);
+      }
+    }
+  }
+
+  function sortRecords(existingRecords) {
+    let records = [...(existingRecords || treatmentRecords)];
+
+    if (sort === "name-ascending") {
+      records = records.sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      });
+    } else if (sort === "name-descending") {
+      records = records.sort((a, b) => {
+        return b.name.localeCompare(a.name);
+      });
+    } else if (sort === "newest") {
+      records = records.sort((a, b) => {
+        return new Date(b.date) - new Date(a.date);
+      });
+    } else if (sort === "oldest") {
+      records = records.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date);
+      });
+    }
+
+    setTreatmentRecords(records);
+  }
+
+  useEffect(() => {
+    searchRecords();
+  }, [search]);
+
+  useEffect(() => {
+    if (sort !== "") {
+      sortRef.current.style.color = "black";
+    } else {
+      sortRef.current.style.color = "gray";
+    }
+
+    sortRecords();
+  }, [sort]);
+
   return (
     <div className="profile-page">
-      <div className="loading-page" ref={loadingPageRef}><FontAwesomeIcon icon={faSpinner} className="button-icon spinner"></FontAwesomeIcon></div>
+      <div className="loading-page" ref={loadingPageRef}>
+        <FontAwesomeIcon
+          icon={faSpinner}
+          className="button-icon spinner"
+        ></FontAwesomeIcon>
+      </div>
       <Header />
       <div className="profile-content">
         <div className="profile-section">
@@ -167,11 +251,36 @@ export default function Profile() {
         </div>
         <div className="profile-section treatment-records">
           <label className="profile-label">Treatment Records</label>
+          <div className="search-sort-pane" ref={searchSortPaneRef}>
+            <input
+              placeholder="Search client"
+              className="record-search"
+              type="text"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+              }}
+            ></input>
+            <select
+              className="record-sort"
+              ref={sortRef}
+              value={sort}
+              onChange={(e) => {
+                setSort(e.target.value);
+              }}
+            >
+              <option value="">Sort</option>
+              <option value="name-ascending">A to Z</option>
+              <option value="name-descending">Z to A</option>
+              <option value="newest">Newest</option>
+              <option value="oldest">Oldest</option>
+            </select>
+          </div>
           <label className="no-records" ref={noRecordsSignInRef}>
             Sign in to save treatment records
           </label>
           <label className="no-records" ref={noRecordsRef}>
-            No saved treamtent records
+            No saved treatment records found
           </label>
           <div className="treatment-records-pane">
             {treatmentRecords.map((record, index) => (
@@ -180,6 +289,7 @@ export default function Profile() {
                 treatmentRecord={record}
                 treatmentRecords={treatmentRecords}
                 setTreatmentRecords={setTreatmentRecords}
+                setAllTreatmentRecords={setAllTreatmentRecords}
               ></TreatmentRecordTile>
             ))}
           </div>