Add bios page for courses, fix word wrapping

Author: edwardneo

csm_web/frontend/src/components/App.tsx

@@ -44,7 +44,6 @@ const App = () => {
           <Route path="policies/*" element={<Policies />} />
           <Route path="export/*" element={<DataExport />} />
           <Route path="profile/*" element={<UserProfile />} />
-          <Route path="profile/:id/*" element={<UserProfile />} />
           <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>

csm_web/frontend/src/components/UserProfile.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useParams } from "react-router-dom";
+import { Routes, Route, useParams } from "react-router-dom";
 import { PermissionError } from "../utils/queries/helpers";
 import { UpdateUserMutationResponse, useUserInfo, useUserInfoUpdateMutation } from "../utils/queries/profiles";
 import LoadingSpinner from "./LoadingSpinner";
@@ -26,6 +26,15 @@ const MAX_SIZE_MB = 2;
 const MAX_FILE_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
 
 const UserProfile: React.FC = () => {
+  return (
+    <Routes>
+      <Route path=":id/*" element={<UserProfileContent />} />
+      <Route index element={<UserProfileContent />} />
+    </Routes>
+  );
+};
+
+const UserProfileContent: React.FC = () => {
   let userId = Number(useParams().id);
 
   // We always need to get the current user and the viewed profile to check if the current profile page being viewed is the current user (and therefore editable)
@@ -101,6 +110,25 @@ const UserProfile: React.FC = () => {
   const handleFormSubmit = () => {
     setShowSaveSpinner(true);
 
+    // Length checks
+    if (formData["preferredName"].length > 100) {
+      setValidationText("Preferred name is over 100 characters.");
+      setShowSaveSpinner(false);
+      return;
+    } else if (formData["pronouns"].length > 50) {
+      setValidationText("Pronouns are over 50 characters.");
+      setShowSaveSpinner(false);
+      return;
+    } else if (formData["pronunciation"].length > 100) {
+      setValidationText("Pronounciation is over 100 characters.");
+      setShowSaveSpinner(false);
+      return;
+    } else if (formData["bio"].length > 700) {
+      setValidationText("Bio is over 700 characters.");
+      setShowSaveSpinner(false);
+      return;
+    }
+
     const userInfo = new FormData();
     userInfo.append("id", userId.toString());
 
@@ -126,7 +154,8 @@ const UserProfile: React.FC = () => {
     updateMutation.mutate(userInfo, {
       onSuccess: () => {
         setFile("");
-        setViewing(true); // Exit edit mode after successful save
+        setValidationText("");
+        setViewing(true);
         setShowSaveSpinner(false);
       },
       onError: ({ detail }: UpdateUserMutationResponse) => {
@@ -166,9 +195,9 @@ const UserProfile: React.FC = () => {
             className="user-profile-tooltip"
           >
             <div>
-              Edit your profile so others can get to know you. <br /> <br />
-              Students: your profile is visible to mentors and coordinators. <br />
-              Mentors: your profile is publicly viewable.
+              Edit your profile so others can learn about you. <br /> <br />
+              Students: visible to your mentors and coordinators. <br />
+              Mentors: visible to everyone.
             </div>
           </Tooltip>
         )}
@@ -214,7 +243,7 @@ const UserProfile: React.FC = () => {
               </div>
             </div>
             <div className="user-profile-bio">
-              {requestedData.bio?.trim() && <p className="form-static">{requestedData.bio}</p>}
+              {requestedData.bio?.trim() && <p className="user-profile-text">{requestedData.bio}</p>}
             </div>
 
             <div className="form-actions">
@@ -286,6 +315,7 @@ const UserProfile: React.FC = () => {
                 type="text"
                 id="preferredName"
                 name="preferredName"
+                maxLength={100}
                 className="form-input user-profile-input-field"
                 value={formData.preferredName}
                 onChange={handleInputChange}
@@ -299,7 +329,7 @@ const UserProfile: React.FC = () => {
                 type="text"
                 id="pronouns"
                 name="pronouns"
-                maxLength={20}
+                maxLength={50}
                 className="form-input user-profile-input-field"
                 value={formData.pronouns}
                 onChange={handleInputChange}
@@ -313,7 +343,7 @@ const UserProfile: React.FC = () => {
                 type="text"
                 id="pronunciation"
                 name="pronunciation"
-                maxLength={50}
+                maxLength={100}
                 className="form-input user-profile-input-field"
                 value={formData.pronunciation}
                 onChange={handleInputChange}

csm_web/frontend/src/components/course/BioEntry.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { formatSpacetimeInterval } from "../../utils/datetime";
+import { RawUserInfo, Spacetime } from "../../utils/types";
+import ClockIcon from "../../../static/frontend/img/clock.svg";
+import LogoNoText from "../../../static/frontend/img/logo_no_text.svg";
+
+interface BioEntryProps {
+  user: RawUserInfo;
+  sectionTimes: Spacetime[][];
+}
+
+const BioEntry = ({ user, sectionTimes }: BioEntryProps) => {
+  return (
+    <div key={user.id} className="profile-container">
+      <Link to={`/profile/${user.id}`}>
+        <div className={"profile-item profile-image-container" + (user.profileImage?.trim() ? "" : " profile-border")}>
+          {user.profileImage?.trim() ? (
+            <img src={user.profileImage} className="profile-image" />
+          ) : (
+            <LogoNoText id="logo" className="profile-image profile-placeholder" />
+          )}
+        </div>
+      </Link>
+      <div className="profile-info">
+        <div className="profile-item">
+          <p className="profile-text profile-name">
+            {user.preferredName}
+            {user.pronouns.trim() && (
+              <>
+                &nbsp;
+                <small>[{user.pronouns.toLowerCase()}]</small>
+              </>
+            )}
+          </p>
+        </div>
+
+        <div className="profile-item">
+          {user.pronunciation.trim() && (
+            <>
+              <p className="profile-text profile-pronunciation">{user.pronunciation}</p>
+            </>
+          )}
+        </div>
+
+        <div className="profile-item">
+          <p className="profile-text profile-email">{user.email}</p>
+        </div>
+
+        <div className="profile-section-times">
+          {sectionTimes.map((spacetimes, index) => (
+            <div key={index} className="profile-section-time">
+              <ClockIcon /> <span>{spacetimes.map(formatSpacetimeInterval).join(" + ")}</span>
+            </div>
+          ))}
+        </div>
+        {user.bio.trim() && <p>{user.bio}</p>}
+      </div>
+    </div>
+  );
+};
+export default BioEntry;