Sushant branch connect backend

frontend/src/components/SearchBrowse/SearchBrowse.js

+import React, { useState } from "react";
+import axios from "axios";
+import styles from "./SearchBrowse.module.css";
+
+/*
+Page to search users by multiple fields.
+Once the search results are found, users can click into an
+edit user details page.
+*/
+const SearchBrowse = () => {
+  const [searchParams, setSearchParams] = useState({
+    firstName: "",
+    middleName: "",
+    lastName: "",
+    nickName: "",
+    classYear: "",
+    gradYear: "",
+    gender: "",
+    techAlumniChapter: "",
+    degreeType: "",
+    degreeDepartment: "",
+    degreeCollege: "",
+    degreeYear: "",
+    involvement: "",
+  });
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setSearchParams((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSearch = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_API_URL}/person/searchByName`,
+        {
+          ...searchParams, // send all searchParams in the request payload
+        }
+      );
+
+      const filteredResults = filterAndSortResults(response.data.people, searchParams);
+      setResults(filteredResults);
+    } catch (err) {
+      setError(
+        err.response?.data?.message || "An error occurred during the search."
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterAndSortResults = (data, searchParams) => {
+    return data
+      .filter((person) => {
+        // Only keep results that match at least one non-empty field in searchParams
+        return Object.keys(searchParams).every((key) => {
+          return !searchParams[key] || person[key] === searchParams[key];
+        });
+      })
+      .sort((a, b) => {
+        // Sort by relevance based on number of matching fields
+        const relevanceA = calculateRelevance(a, searchParams);
+        const relevanceB = calculateRelevance(b, searchParams);
+        return relevanceB - relevanceA;
+      });
+  };
+
+  const calculateRelevance = (person, searchParams) => {
+    let relevance = 0;
+    Object.keys(searchParams).forEach((key) => {
+      if (searchParams[key] && person[key] === searchParams[key]) {
+        relevance += 1;
+      }
+    });
+    return relevance;
+  };
+
+  const handleDetailView = (personId) => {
+    window.location.href = `/admin/edit-person/${personId}`;
+  };
+
+  return (
+    <div className={styles.container}>
+      <h2>Search for person to edit</h2>
+
+      {/* Search Form */}
+      <div className={styles.searchForm}>
+        <label>
+          First Name:
+          <input
+            type="text"
+            name="firstName"
+            value={searchParams.firstName}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Middle Name:
+          <input
+            type="text"
+            name="middleName"
+            value={searchParams.middleName}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Last Name:
+          <input
+            type="text"
+            name="lastName"
+            value={searchParams.lastName}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Nickname:
+          <input
+            type="text"
+            name="nickName"
+            value={searchParams.nickName}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Class Year:
+          <input
+            type="text"
+            name="classYear"
+            value={searchParams.classYear}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Graduation Year:
+          <input
+            type="text"
+            name="gradYear"
+            value={searchParams.gradYear}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Gender:
+          <input
+            type="text"
+            name="gender"
+            value={searchParams.gender}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Tech Alumni Chapter:
+          <input
+            type="text"
+            name="techAlumniChapter"
+            value={searchParams.techAlumniChapter}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Degree Type:
+          <input
+            type="text"
+            name="degreeType"
+            value={searchParams.degreeType}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Degree Department:
+          <input
+            type="text"
+            name="degreeDepartment"
+            value={searchParams.degreeDepartment}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Degree College:
+          <input
+            type="text"
+            name="degreeCollege"
+            value={searchParams.degreeCollege}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Degree Year:
+          <input
+            type="text"
+            name="degreeYear"
+            value={searchParams.degreeYear}
+            onChange={handleInputChange}
+          />
+        </label>
+        <label>
+          Involvement:
+          <input
+            type="text"
+            name="involvement"
+            value={searchParams.involvement}
+            onChange={handleInputChange}
+          />
+        </label>
+
+        <button onClick={handleSearch} disabled={loading}>
+          {loading ? "Searching..." : "Search"}
+        </button>
+      </div>
+
+      {/* Results Section */}
+      {error && <p className={styles.error}>{error}</p>}
+      {!error && results.length === 0 && !loading && <p>No results found.</p>}
+      <ul className={styles.resultsList}>
+        {results.map((person) => (
+          <li
+            key={person.id}
+            className={styles.resultItem}
+            onClick={() => handleDetailView(person.peopleId)}
+          >
+            Name: {person.firstName} {person.middleName} {person.lastName} - Nickname: {person.nickName} - Chapter:{" "}
+            {person.techAlumniChapter} - Class year: {person.classYear} - Graduation Year: {person.gradYear} - Gender:{" "}
+            {person.gender} - Degree Type: {person.degreeType} - Degree Department: {person.degreeDepartment} - Degree College:{" "}
+            {person.degreeCollege} - Degree Year: {person.degreeYear} - Involvement: {person.involvement}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default SearchBrowse;