refractor frontend and add pronunciation

Author: kevinbu233

csm_web/frontend/src/components/UserProfile.tsx

@@ -1,45 +1,54 @@
 import React, { useState } from "react";
 import { useUserInfo } from "../utils/queries/base";
-import { UserInfo } from "../utils/types";
+import { RawUserInfo, UserInfo } from "../utils/types";
 import { useUserInfoUpdateMutation } from "../utils/queries/profiles";
+import { DateTime } from "luxon";
 
 import "../css/profile.scss";
 
 export const UserProfile = (): React.ReactElement => {
   const { data: jsonUserInfo, isSuccess: userInfoLoaded } = useUserInfo();
 
-  let userInfo: UserInfo | null;
-  if (userInfoLoaded) {
-    let priorityEnrollment = undefined;
-    if (jsonUserInfo.priorityEnrollment) {
-      priorityEnrollment = new Date(Date.parse(jsonUserInfo.priorityEnrollment));
-    }
-    const convertedUserInfo: UserInfo = {
-      ...jsonUserInfo,
-      priorityEnrollment
-    };
-    userInfo = convertedUserInfo;
-  } else {
-    // not done loading yet
-    userInfo = null;
-  }
+  // let userInfo: UserInfo;
+  // if (userInfoLoaded) {
+  //   let priorityEnrollment = undefined;
+  //   if (jsonUserInfo.priorityEnrollment) {
+  //     priorityEnrollment = DateTime.fromISO(jsonUserInfo.priorityEnrollment);
+  //   }
+  //   const convertedUserInfo: UserInfo = {
+  //     ...jsonUserInfo,
+  //     priorityEnrollment
+  //   };
+  //   userInfo = convertedUserInfo;
+  // }
+  // else {
+  //   // not done loading yet
+  //   userInfo = null;
+  // }
 
   return (
     <React.Fragment>
-      <div>{userInfoLoaded ? <DisplayUser userInfo={userInfo} /> : <></>}</div>
+      <div>
+        {userInfoLoaded ? (
+          <DisplayUser userInfo={jsonUserInfo} priorityEnrollment={jsonUserInfo.priorityEnrollment} />
+        ) : (
+          <></>
+        )}
+      </div>
     </React.Fragment>
   );
 };
 
 interface UserInfoProps {
-  userInfo: UserInfo | null;
+  userInfo: RawUserInfo;
+  priorityEnrollment?: string;
 }
 
-const DisplayUser = ({ userInfo }: UserInfoProps) => {
+const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
   /**
    * Mutation to create a new section.
    */
-  const createSectionMutation = useUserInfoUpdateMutation(userInfo.id);
+  const createSectionMutation = useUserInfoUpdateMutation(userInfo?.id);
 
   const [editing, setEditing] = useState(false);
   /**
@@ -63,6 +72,17 @@ const DisplayUser = ({ userInfo }: UserInfoProps) => {
    * User Bio
    */
   const [bio, setBio] = useState<string>("");
+  /**
+   * Pronunciation
+   */
+  const [pronunciation, setPronunciation] = useState<string>("");
+  /**
+   * Pronunciation
+   */
+  let priority: DateTime | undefined;
+  if (priorityEnrollment) {
+    priority = DateTime.fromISO(priorityEnrollment);
+  }
 
   const handleEditing = () => {
     setEditing(true);
@@ -79,13 +99,17 @@ const DisplayUser = ({ userInfo }: UserInfoProps) => {
   const handleSave = (event: React.MouseEvent<HTMLButtonElement>): void => {
     event.preventDefault();
     const data = {
-      userFirstName,
-      userLastName,
-      userEmail,
+      id: userInfo.id,
+      firstName: userFirstName,
+      lastName: userLastName,
+      email: userEmail,
+      isPrivate: userInfo.isPrivate,
       bio,
-      userPronoun
+      priorityEnrollment: priority,
+      pronouns: userPronoun,
+      pronunciation
     };
-
+    console.log(data);
     createSectionMutation.mutate(data, {
       onSuccess: () => {
         setEditing(false);
@@ -113,6 +137,9 @@ const DisplayUser = ({ userInfo }: UserInfoProps) => {
       case "bio":
         setBio(value);
         break;
+      case "pronunciation":
+        setPronunciation(value);
+        break;
       default:
         console.error("Unknown input name: " + name);
         break;
@@ -179,7 +206,16 @@ const DisplayUser = ({ userInfo }: UserInfoProps) => {
                   <label className="formbold-form-label"> Pronouns </label>
                 </div>
               </div>
-
+              <div className="formbold-textarea">
+                <textarea
+                  name="pronunciation"
+                  id="pronunciation"
+                  placeholder="How to pronounce your name"
+                  className="formbold-form-input"
+                  disabled={true}
+                ></textarea>
+                <label className="formbold-form-label"> Pronunciation </label>
+              </div>
               <div className="formbold-textarea">
                 <textarea
                   name="bio"

csm_web/frontend/src/components/section/ProfileModal.tsx

@@ -91,6 +91,16 @@ const ProfileModal = ({ id, closeModal }: ProfileModalProps): React.ReactElement
                   </div>
                 </div>
 
+                <div className="formbold-textarea">
+                  <textarea
+                    name="pronunciation"
+                    id="pronunciation"
+                    placeholder="How to pronounce your name"
+                    className="formbold-form-input"
+                    disabled={true}
+                  ></textarea>
+                  <label className="formbold-form-label"> Pronunciation </label>
+                </div>
                 <div className="formbold-textarea">
                   <textarea
                     name="bio"

csm_web/frontend/src/utils/queries/profiles.tsx

@@ -7,6 +7,7 @@ import { fetchNormalized, fetchWithMethod, HTTP_METHODS } from "../api";
 import { handleError, handlePermissionsError, handleRetry, PermissionError, ServerError } from "./helpers";
 import { DateTime } from "luxon";
 import { RawUserInfo } from "../types";
+import { isNull } from "lodash";
 
 /* ===== Mutation ===== */
 /**
@@ -21,6 +22,7 @@ export interface UpdateUserInfo {
   isPrivate: boolean;
   bio: string;
   pronouns: string;
+  pronunciation: string;
 }
 
 /**
@@ -45,11 +47,13 @@ export const useStudentsInfo = (): UseQueryResult<RawUserInfo, Error> => {
   return queryResult;
 };
 
-export const useUserInfoUpdateMutation = (userId: number): UseMutationResult<void, ServerError, UpdateUserInfo> => {
+export const useUserInfoUpdateMutation = (
+  userId: number | undefined
+): UseMutationResult<void, ServerError, UpdateUserInfo> => {
   const queryClient = useQueryClient();
   const mutationResult = useMutation<void, Error, UpdateUserInfo>(
     async (body: UpdateUserInfo) => {
-      if (isNaN(userId)) {
+      if (isNull(userId)) {
         throw new PermissionError("Invalid user id");
       }
       const response = await fetchWithMethod(`/user/${userId}/profile`, HTTP_METHODS.PUT, body);

csm_web/frontend/src/utils/types.tsx

@@ -33,6 +33,7 @@ export interface UserInfo {
   isPrivate: boolean;
   bio: string;
   pronouns: string;
+  pronunciation: string;
 }
 
 /**