Sushant branch connect backend

frontend/src/components/UserSearchResults/UserSearchResults.js

@@ -5,7 +5,9 @@ import styles from "./UserSearchResults.module.css";
 
 const UserSearchResults = () => {
   const { personId } = useParams();
-  const [personDetails, setPersonDetails] = useState(null); 
+  const [personInfo, setPersonInfo] = useState(null);
+  const [degrees, setDegrees] = useState([]);
+  const [involvements, setInvolvements] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
@@ -18,11 +20,14 @@ const UserSearchResults = () => {
         const response = await axios.get(
           `${process.env.REACT_APP_API_URL}/person/fullInfo/${personId}`
         );
-        setPersonDetails(response.data.person);
+
+        const { personInfo, degrees, involvements } = response.data.person;
+
+        setPersonInfo(personInfo);
+        setDegrees(degrees);
+        setInvolvements(involvements);
       } catch (err) {
-        setError(
-          err.response?.data?.message || "Failed to fetch user details."
-        );
+        setError(err.response?.data?.message || "Failed to fetch user details.");
       } finally {
         setLoading(false);
       }
@@ -37,29 +42,39 @@ const UserSearchResults = () => {
   return (
     <div className={styles.container}>
       <h2>User Details</h2>
-      <p><strong>Person ID:</strong> {personId}</p>
-      <div className={styles.details}>
-        <p><strong>First Name:</strong> {personDetails.personalInformation.firstName}</p>
-        <p><strong>Last Name:</strong> {personDetails.personalInformation.lastName}</p>
-        <p><strong>Middle Name:</strong> {personDetails.personalInformation.middleName || "N/A"}</p>
-        <p><strong>Nick Name:</strong> {personDetails.personalInformation.nickName || "N/A"}</p>
-        <p><strong>Class Year:</strong> {personDetails.personalInformation.classYear}</p>
-        <p><strong>Graduation Year:</strong> {personDetails.personalInformation.gradYear}</p>
-        <p><strong>Gender:</strong> {personDetails.personalInformation.gender}</p>
-        <p><strong>Tech Alumni Chapter:</strong> {personDetails.personalInformation.techAlumniChapter}</p>
+      <div>
+        <h3>Personal Information</h3>
+        {Object.entries(personInfo || {}).map(([key, value]) =>
+          key.toLowerCase().includes("id") ? null : (
+            <p key={key}>
+              <strong>{key.replace(/([A-Z])/g, " $1")}:</strong> {value || "N/A"}
+            </p>
+          )
+        )}
+      </div>
+
+      <div>
+        <h3>Degrees</h3>
+        {degrees.map((degree, index) => (
+          <div key={index} className={styles.listItem}>
+            {Object.entries(degree).map(([key, value]) =>
+              key.toLowerCase().includes("id") ? null : (
+                <p key={key}>
+                  <strong>{key.replace(/([A-Z])/g, " $1")}:</strong> {value || "N/A"}
+                </p>
+              )
+            )}
+          </div>
+        ))}
+      </div>
 
-        {/* Degrees Section */}
-        <div>
-          {personDetails.degreeInformation.map((degree, index) => (
-            <div key={index}>
-              <p><strong>Degree Type:</strong> {degree.degreeType}</p>
-              <p><strong>Degree Department:</strong> {degree.degreeDepartment}</p>
-              <p><strong>Degree College:</strong> {degree.degreeCollege}</p>
-              <p><strong>Degree Year:</strong> {degree.degreeYear}</p>
-              <p><strong>Degree Description:</strong> {degree.degreeDescription}</p>
-            </div>
-          ))}
-        </div>
+      <div>
+        <h3>Involvements</h3>
+        {involvements.map((involvement, index) => (
+          <div key={index} className={styles.listItem}>
+            <p>{involvement || "N/A"}</p>
+          </div>
+        ))}
       </div>
     </div>
   );