finished profile form

ElaineShu0312 · ElaineShu0312 · commit e8e16ad80100 · 2024-08-20T18:56:24.000-07:00
diff --git a/csm_web/frontend/src/components/CourseMenu.tsx b/csm_web/frontend/src/components/CourseMenu.tsx
@@ -4,7 +4,7 @@ import { Link, Route, Routes } from "react-router-dom";
 
 import { DEFAULT_LONG_LOCALE_OPTIONS, DEFAULT_TIMEZONE } from "../utils/datetime";
 import { useCourses } from "../utils/queries/courses";
-import { useUserInfo } from "../utils/queries/user";
+import { useUserInfo } from "../utils/queries/profiles";
 import { Course as CourseType, UserInfo } from "../utils/types";
 import LoadingSpinner from "./LoadingSpinner";
 import Course from "./course/Course";
diff --git a/csm_web/frontend/src/components/UserProfile.tsx b/csm_web/frontend/src/components/UserProfile.tsx
@@ -1,68 +1,226 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { useUser } from "../utils/queries/user";
+import { PermissionError } from "../utils/queries/helpers";
+import { useUserInfo, useUserInfoUpdateMutation } from "../utils/queries/profiles";
 import LoadingSpinner from "./LoadingSpinner";
-import "../css/base/form.scss"; // Import the base.scss file for styling
+
+import "../css/base/form.scss";
 import "../css/base/table.scss";
 
 const UserProfile: React.FC = () => {
-  const { id } = useParams(); // Type the id parameter
-  const { data, error, isLoading } = useUser(Number(id));
+  const { id } = useParams();
+  let userId = Number(id);
+  const { data: currUserData, isError: isCurrUserError, isLoading: currUserIsLoading } = useUserInfo();
+  const { data: requestedData, error: requestedError, isLoading: requestedIsLoading } = useUserInfo(userId);
+  const updateMutation = useUserInfoUpdateMutation(userId);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    bio: "",
+    pronouns: "",
+    pronunciation: ""
+  });
+
+  const [showSaveSpinner, setShowSaveSpinner] = useState(false);
+  const [validationText, setValidationText] = useState("");
+
+  // Populate form data with fetched user data
+  useEffect(() => {
+    if (requestedData) {
+      setFormData({
+        firstName: requestedData.firstName || "",
+        lastName: requestedData.lastName || "",
+        bio: requestedData.bio || "",
+        pronouns: requestedData.pronouns || "",
+        pronunciation: requestedData.pronunciation || ""
+      });
+    }
+  }, [requestedData]);
 
-  // Handle loading and error states
-  if (isLoading) {
+  if (requestedIsLoading || currUserIsLoading) {
     return <LoadingSpinner className="spinner-centered" />;
   }
-  if (error) {
-    return <div>Error: {error.message}</div>;
+
+  if (requestedError || isCurrUserError) {
+    if (requestedError instanceof PermissionError) {
+      return <h3>Permission Denied</h3>;
+    } else {
+      return <h3>Failed to fetch user data</h3>;
+    }
+  }
+
+  if (id === undefined && requestedData) {
+    userId = requestedData.id;
   }
 
+  // Handle input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  // Validate current form data
+  const validateFormData = (): boolean => {
+    if (!formData.firstName || !formData.lastName) {
+      setValidationText("First and last names must be specified.");
+      return false;
+    }
+
+    setValidationText("");
+    return true;
+  };
+
+  // Handle form submission
+  const handleFormSubmit = () => {
+    if (!validateFormData()) {
+      return;
+    }
+
+    setShowSaveSpinner(true);
+
+    updateMutation.mutate(
+      {
+        id: userId,
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        bio: formData.bio,
+        pronouns: formData.pronouns,
+        pronunciation: formData.pronunciation
+      },
+      {
+        onSuccess: () => {
+          setIsEditing(false); // Exit edit mode after successful save
+          console.log("Profile updated successfully");
+          setShowSaveSpinner(false);
+        },
+        onError: () => {
+          setValidationText("Error occurred on save.");
+          setShowSaveSpinner(false);
+        }
+      }
+    );
+  };
+
+  const isCurrUser = currUserData?.id === requestedData?.id || requestedData.isEditable;
+
+  // Toggle edit mode
+  const handleEditToggle = () => {
+    setIsEditing(true);
+  };
+
   return (
-    <div className="csm-form">
-      <h2>User Profile</h2>
-      <form>
-        <div className="form-label">
-          <label htmlFor="firstName">First Name:</label>
-          <p id="firstName" className="form-input">
-            {data?.firstName}
-          </p>
+    <div id="user-profile-form">
+      <h2 className="form-title">User Profile</h2>
+      <div className="csm-form">
+        <div className="form-item">
+          <label htmlFor="firstName" className="form-label">
+            First Name:
+          </label>
+          {isEditing ? (
+            <input
+              type="text"
+              id="firstName"
+              name="firstName"
+              className="form-input"
+              value={formData.firstName}
+              onChange={handleInputChange}
+              required
+            />
+          ) : (
+            <p className="form-static">{formData.firstName}</p>
+          )}
         </div>
-        <div className="form-label">
-          <label htmlFor="lastName">Last Name:</label>
-          <p id="lastName" className="form-input">
-            {data?.lastName}
-          </p>
+        <div className="form-item">
+          <label htmlFor="lastName" className="form-label">
+            Last Name:
+          </label>
+          {isEditing ? (
+            <input
+              type="text"
+              id="lastName"
+              name="lastName"
+              className="form-input"
+              value={formData.lastName}
+              onChange={handleInputChange}
+              required
+            />
+          ) : (
+            <p className="form-static">{formData.lastName}</p>
+          )}
         </div>
-        <div className="form-label">
-          <label htmlFor="email">Email:</label>
-          <p id="email" className="form-input">
-            {data?.email}
-          </p>
+        <div className="form-item">
+          <label htmlFor="pronunciation" className="form-label">
+            Pronunciation:
+          </label>
+          {isEditing ? (
+            <input
+              type="text"
+              id="pronunciation"
+              name="pronunciation"
+              className="form-input"
+              value={formData.pronunciation}
+              onChange={handleInputChange}
+            />
+          ) : (
+            <p className="form-static">{formData.pronunciation}</p>
+          )}
         </div>
-        <div className="form-label">
-          <label htmlFor="bio">Bio:</label>
-          <p id="bio" className="form-input">
-            {data?.bio || "N/A"}
-          </p>
+        <div className="form-item">
+          <label htmlFor="pronouns" className="form-label">
+            Pronouns:
+          </label>
+          {isEditing ? (
+            <input
+              type="text"
+              id="pronouns"
+              name="pronouns"
+              className="form-input"
+              value={formData.pronouns}
+              onChange={handleInputChange}
+            />
+          ) : (
+            <p className="form-static">{formData.pronouns}</p>
+          )}
         </div>
-        <div className="form-label">
-          <label htmlFor="pronouns">Pronouns:</label>
-          <p id="pronouns" className="form-input">
-            {data?.pronouns || "N/A"}
-          </p>
+        <div className="form-item">
+          <label htmlFor="email" className="form-label">
+            Email:
+          </label>
+          <p className="form-static">{requestedData?.email}</p>
         </div>
-        <div className="form-label">
-          <label htmlFor="pronunciation">Pronunciation:</label>
-          <p id="pronunciation" className="form-input">
-            {data?.pronunciation || "N/A"}
-          </p>
+        <div className="form-item">
+          <label htmlFor="bio" className="form-label">
+            Bio:
+          </label>
+          {isEditing ? (
+            <textarea id="bio" name="bio" className="form-input" value={formData.bio} onChange={handleInputChange} />
+          ) : (
+            <p className="form-static">{formData.bio}</p>
+          )}
         </div>
         <div className="form-actions">
-          <button type="button" className="form-select" onClick={() => console.log("Edit profile")}>
-            Edit
-          </button>
+          {validationText && (
+            <div className="form-validation-container">
+              <span className="form-validation-text">{validationText}</span>
+            </div>
+          )}
+          {isCurrUser &&
+            (isEditing ? (
+              <button className="primary-btn" onClick={handleFormSubmit} disabled={showSaveSpinner}>
+                {showSaveSpinner ? <LoadingSpinner /> : "Save"}
+              </button>
+            ) : (
+              <button className="primary-btn" onClick={handleEditToggle}>
+                Edit
+              </button>
+            ))}
         </div>
-      </form>
+      </div>
     </div>
   );
 };
diff --git a/csm_web/frontend/src/components/course/CreateSectionModal.tsx b/csm_web/frontend/src/components/course/CreateSectionModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { DAYS_OF_WEEK } from "../../utils/datetime";
-import { useUserEmails } from "../../utils/queries/base";
+import { useUserEmails } from "../../utils/queries/profiles";
 import { useSectionCreateMutation } from "../../utils/queries/sections";
 import { Spacetime } from "../../utils/types";
 import Modal from "../Modal";
diff --git a/csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx b/csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx
@@ -1,8 +1,7 @@
 import { DateTime } from "luxon";
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-
-import { useUserEmails } from "../../utils/queries/base";
+import { useUserEmails } from "../../utils/queries/profiles";
 import { useEnrollStudentMutation } from "../../utils/queries/sections";
 import LoadingSpinner from "../LoadingSpinner";
 import Modal from "../Modal";
diff --git a/csm_web/frontend/src/css/base/form.scss b/csm_web/frontend/src/css/base/form.scss
@@ -71,7 +71,7 @@
   border: none;
 }
 
-/* Neccessary for options to be legible on Windows */
+/* Necessary for options to be legible on Windows */
 .form-select > option {
   color: black;
 
diff --git a/csm_web/frontend/src/utils/queries/profiles.tsx b/csm_web/frontend/src/utils/queries/profiles.tsx
@@ -0,0 +1,85 @@
+import { useMutation, UseMutationResult, useQuery, useQueryClient, UseQueryResult } from "@tanstack/react-query";
+
+import { fetchNormalized, fetchWithMethod, HTTP_METHODS } from "../api";
+import { RawUserInfo } from "../types";
+import { handleError, handlePermissionsError, handleRetry, ServerError } from "./helpers";
+
+/**
+ * Hook to get a list of all user emails.
+ */
+export const useUserEmails = (): UseQueryResult<string[], Error> => {
+  const queryResult = useQuery<string[], Error>(
+    ["users"],
+    async () => {
+      const response = await fetchNormalized("/users");
+      if (response.ok) {
+        return await response.json();
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError("Failed to fetch user info");
+      }
+    },
+    { retry: handleRetry }
+  );
+
+  handleError(queryResult);
+  return queryResult;
+};
+
+/**
+ * Hook to get user info. If userId is provided, fetches details for that user;
+ * otherwise, fetches current user's info.
+ */
+export const useUserInfo = (userId?: number): UseQueryResult<RawUserInfo, Error> => {
+  const queryKey = userId ? ["userDetails", userId] : ["user"];
+
+  const queryResult = useQuery<RawUserInfo, Error>(
+    queryKey,
+    async () => {
+      const endpoint = userId ? `/user/${userId}` : "/user";
+      const response = await fetchNormalized(endpoint);
+      if (response.ok) {
+        return await response.json();
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError(userId ? "Failed to fetch user details" : "Failed to fetch user info");
+      }
+    },
+    {
+      retry: handleRetry
+    }
+  );
+
+  handleError(queryResult);
+  return queryResult;
+};
+
+/**
+ * Hook to update a user's profile information.
+ */
+export const useUserInfoUpdateMutation = (
+  userId: number
+): UseMutationResult<void, ServerError, Partial<RawUserInfo>> => {
+  const queryClient = useQueryClient();
+  const mutationResult = useMutation<void, Error, Partial<RawUserInfo>>(
+    async (body: Partial<RawUserInfo>) => {
+      const response = await fetchWithMethod(`/user/${userId}/update`, HTTP_METHODS.PUT, body);
+      if (response.ok) {
+        return;
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError(`Failed to update user profile with ID ${userId}`);
+      }
+    },
+    {
+      onSuccess: () => {
+        // Invalidate queries related to the user's profile to ensure fresh data
+        queryClient.invalidateQueries(["userProfile", userId]);
+      },
+      retry: handleRetry
+    }
+  );
+
+  handleError(mutationResult);
+  return mutationResult;
+};
diff --git a/csm_web/frontend/src/utils/queries/user.tsx b/csm_web/frontend/src/utils/queries/user.tsx
diff --git a/csm_web/frontend/src/utils/types.tsx b/csm_web/frontend/src/utils/types.tsx
diff --git a/csm_web/scheduler/views/user.py b/csm_web/scheduler/views/user.py

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@`
`71`	`71`	`border: none;`
`72`	`72`	`}`
`73`	`73`
`74`		`-/* Neccessary for options to be legible on Windows */`
	`74`	`+/* Necessary for options to be legible on Windows */`
`75`	`75`	`.form-select > option {`
`76`	`76`	`color: black;`
`77`	`77`