move chapter rendering to page

GTBitsOfGood · Nov 19, 2024 · 894914c · 894914c
1 parent deb8731
commit 894914c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 33 deletions.
diff --git a/src/app/(management-portal)/patient/search/page.tsx b/src/app/(management-portal)/patient/search/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import Search from "@src/components/Search/Search";
 
@@ -12,6 +12,7 @@ import {
   HttpMethod,
   IPatientTableEntry,
   SearchResponseBody,
+  IChapter,
 } from "@/common_utils/types";
 import LoadingBox from "@src/components/LoadingBox/LoadingBox";
 import Modal from "@src/components/Modal/Modal";
@@ -47,6 +48,8 @@ export default function Page() {
   const [pageCount, setPageCount] = useState(0);
   const [loading, setLoading] = useState(false);
 
+  const [chapters, setChapters] = useState<IChapter[] | null>([]);
+
   useEffect(() => {
     setLoading(true);
     internalRequest<SearchResponseBody<IPatientTableEntry>>({
@@ -110,6 +113,22 @@ export default function Page() {
     sortField,
   ]);
 
+  const loadChapters = useCallback(() => {
+    setLoading(true);
+    internalRequest<IChapter[] | null>({
+      url: "/api/chapter/get-chapters",
+      method: HttpMethod.GET,
+      body: {},
+    }).then((res) => {
+      setChapters(res);
+      setLoading(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    loadChapters();
+  }, [loadChapters]);
+
   return (
     <div className={styles.container}>
       <title>Patient Search | Brain Exercise Initiative</title>
@@ -124,7 +143,7 @@ export default function Page() {
       <div className={classes(styles["search-container"])}>
         <p className={styles["intro-text"]}>Here are Your Patient Finds!</p>
         <div className={styles["search-wrapper"]}>
-          <Search />
+          <Search chapters={chapters} />
         </div>
       </div>
       <div

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -45,8 +45,6 @@ const Pagination = (params: DataParams) => {
     return [...backwardPages, ...forwardPages];
   }, [params.currentPage, params.pageCount]);
 
-  console.log(pages);
-
   const goToPreviousPage = () => {
     if (params.currentPage > 0) {
       params.setCurrentPage(params.currentPage - 1);

diff --git a/src/components/Search/AdvancedSearch/AdvancedSearch.tsx b/src/components/Search/AdvancedSearch/AdvancedSearch.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, {
   useState,
   useCallback,
@@ -16,12 +14,7 @@ import { classes, transformDate, transformPhoneNumber } from "@src/utils/utils";
 import { ClearTagIcon } from "@src/app/icons";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@src/redux/rootReducer";
-import {
-  IPatientSearchReducer,
-  IChapter,
-  HttpMethod,
-} from "@/common_utils/types";
-import { internalRequest } from "@src/utils/requests";
+import { IPatientSearchReducer, IChapter } from "@/common_utils/types";
 
 import { update, clear } from "@src/redux/reducers/patientSearchReducer";
 import Dropdown, {
@@ -96,6 +89,7 @@ interface UpdateParamProp {
   style?: CSSProperties;
   onSubmit?: () => void;
   className?: string;
+  chapters: IChapter[] | null;
 }
 
 export const AdvancedSearch = (props: UpdateParamProp) => {
@@ -309,26 +303,15 @@ export const AdvancedSearch = (props: UpdateParamProp) => {
 
   const [chapters, setChapters] = useState<DropdownOption<string>[]>([]);
 
-  const loadChapters = useCallback(() => {
-    internalRequest<IChapter[] | null>({
-      url: "/api/chapter/get-chapters",
-      method: HttpMethod.GET,
-      body: {},
-    }).then((res) => {
-      const chapterDropdown = res
-        ? res.map((chapter) => ({
-            value: chapter.name,
-            displayValue: chapter.name,
-          }))
-        : [];
-      setChapters(chapterDropdown);
-      console.log(chapters);
-    });
-  }, []);
-
   useEffect(() => {
-    loadChapters();
-  }, [loadChapters]);
+    const chapterDropdown = props.chapters
+      ? props.chapters.map((chapter) => ({
+          value: chapter.name,
+          displayValue: chapter.name,
+        }))
+      : [];
+    setChapters(chapterDropdown);
+  }, []);
 
   return (
     <div className={styles.body} style={props.style}>

diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -16,16 +16,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FilterAltIcon from "@mui/icons-material/FilterAlt";
 import FilterAltOffIcon from "@mui/icons-material/FilterAltOff";
 import { classes } from "@src/utils/utils";
+import { IChapter } from "@/common_utils/types";
 import styles from "./Search.module.css";
 import { AdvancedSearch } from "./AdvancedSearch/AdvancedSearch";
 import InputField from "../InputField/InputField";
 
 interface SearchProps {
   className?: string;
   onSubmit?: () => void;
+  chapters: IChapter[] | null;
 }
 
-export default function Search({ className, onSubmit }: SearchProps) {
+export default function Search({ className, onSubmit, chapters }: SearchProps) {
   const dispatch = useDispatch();
 
   const { fullName } = useSelector((state: RootState) => state.patientSearch);
@@ -105,7 +107,7 @@ export default function Search({ className, onSubmit }: SearchProps) {
             showAdvancedSearch && styles["advanced-search-container-show"],
           )}
         >
-          <AdvancedSearch />
+          <AdvancedSearch chapters={chapters} />
         </div>
       </div>
     </div>