implemented view only profile page

meshapp/src/models/profile.d.ts

@@ -1,6 +1,7 @@
 // TODO: Update order of fields to match order in the Profile schema
 // NOTE: Add/modify/remove fields as needed, but consider what needs to be refactored in ../profile-page.tsx
 export type Profile = {
+  viewOnly: boolean;
   name: string;
   pronouns: string;
   occupationTitle: string;
@@ -13,7 +14,7 @@ export type Profile = {
   experience: Experience;
   accountID: number;
 };
- 
+
 export type ProfileInterests = {
   currentTags: string[];
   recommendedTags: string[];
@@ -33,5 +34,3 @@ export type Experience = Array<{
 }>;
 // TODO: Include Experience and Education props as they get implemented
 //        Maybe separate these into their own types?
-
-

meshapp/src/pages/Profiles/Page.tsx

@@ -17,6 +17,7 @@ import ProfileHeader from "./ProfileHeader";
  * Displays a user's personal, professional, and educational information.
  *
  * @param props - Properties of the component
+ * @param {boolean} props.viewOnly - whether profile is view only or not
  * @param {string} props.name - Name of user
  * @param {string} props.pronouns - Pronouns used by user
  * @param {string} props.occupationTitle - Title of user's occupation
@@ -48,13 +49,15 @@ const ProfilePage = (props: Profile) => {
           text={props.name}
           charLimit={15}
           fontSize={"60px"}
+          viewOnly={props.viewOnly}
         />
         <ProfileHeader
           label={props.pronouns}
           placeholder={"Pronouns"}
           text={props.pronouns}
           charLimit={8}
           fontSize={"30px"}
+          viewOnly={props.viewOnly}
         />
       </Box>
       <Grid container sx={{ borderBottom: 1, borderColor: "divider" }}>
@@ -72,6 +75,7 @@ const ProfilePage = (props: Profile) => {
           <ProfileBiography
             biography={props.biography}
             accountID={props.accountID}
+            viewOnly={props.viewOnly}
           />
         </Grid>
         <Grid
@@ -86,18 +90,28 @@ const ProfilePage = (props: Profile) => {
             marginBottom: "-125px", // Adjusts container height to match transform
           }}
         >
-          <ProfilePicture image={props.image} accountID={props.accountID} />
+          <ProfilePicture
+            image={props.image}
+            accountID={props.accountID}
+            viewOnly={props.viewOnly}
+          />
           <ProfileRole isMentor={props.isMentor} isMentee={props.isMentee} />
         </Grid>
       </Grid>
       <Box sx={{ display: "flex", flexDirection: "row", minHeight: "100vh" }}>
         <Grid container>
           <Grid item xs={9}>
             <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-              <ProfileExperience experience={props.experience} />
+              <ProfileExperience
+                experience={props.experience}
+                viewOnly={props.viewOnly}
+              />
             </Box>
             <Box>
-              <ProfileEducation education={props.education} />
+              <ProfileEducation
+                education={props.education}
+                viewOnly={props.viewOnly}
+              />
             </Box>
           </Grid>
           <Grid
@@ -108,7 +122,7 @@ const ProfilePage = (props: Profile) => {
               borderColor: "divider",
             }}
           >
-            <ProfileInterests />
+            <ProfileInterests viewOnly={props.viewOnly} />
           </Grid>
         </Grid>
       </Box>
@@ -158,8 +172,13 @@ const ProfileOccupation = (props: {
  * @param props - Properties of the component
  * @param {string} props.biography - The initial text content of the bio
  * @param {number} props.accountID - accountID associated with the profile
+ * @param {boolean} props.viewOnly - whether profile is view only or not
  */
-const ProfileBiography = (props: { biography: string; accountID: number }) => {
+const ProfileBiography = (props: {
+  biography: string;
+  accountID: number;
+  viewOnly: boolean;
+}) => {
   const [biography, setBiography] = useState(props.biography);
   const [isLoading, setLoading] = useState(true);
 
@@ -208,6 +227,7 @@ const ProfileBiography = (props: { biography: string; accountID: number }) => {
         charLimit={300}
         handleSave={saveBiography}
         variant="outlined"
+        viewOnly={props.viewOnly}
       />
     </Box>
   );
@@ -253,9 +273,13 @@ const ProfileRole = (props: { isMentor: boolean; isMentee: boolean }) => {
  *
  * @param props - Properties of the component
  * @param {Experience} props.experience - Array of objects that each represent a single occupation
+ * @param {boolean} props.viewOnly - whether profile is view only or not
  *
  */
-const ProfileExperience = (props: { experience: Experience }) => {
+const ProfileExperience = (props: {
+  experience: Experience;
+  viewOnly: boolean;
+}) => {
   //starting error validation functions
   const isEmpty = (inputName: string) => (val: string) =>
     val.length > 0 || `${inputName} cannot be empty.`;
@@ -363,6 +387,7 @@ const ProfileExperience = (props: { experience: Experience }) => {
           charLimit("Description"),
         ]}
         addAccordHandler={addExperienceHandler}
+        viewOnly={props.viewOnly}
       />
     </Box>
   );
@@ -373,9 +398,13 @@ const ProfileExperience = (props: { experience: Experience }) => {
  *
  * @param props - Properties of the component
  * @param {Education} props.education - Array of objects that represent a single education
+ * @param {boolean} props.viewOnly - whether profile is view only or not
  *
  */
-const ProfileEducation = (props: { education: Education }) => {
+const ProfileEducation = (props: {
+  education: Education;
+  viewOnly: boolean;
+}) => {
   //starting error validation functions
   const isEmpty = (inputName: string) => (val: string) =>
     val.length > 0 || `${inputName} cannot be empty.`;
@@ -484,6 +513,7 @@ const ProfileEducation = (props: { education: Education }) => {
           charLimit("Description"),
         ]}
         addAccordHandler={AddEducationHandler}
+        viewOnly={props.viewOnly}
       />
     </Box>
   );
@@ -494,8 +524,9 @@ const ProfileEducation = (props: { education: Education }) => {
 
 /**
  * Displays the user's interest tags and supports editing them.
+ * @param {boolean} props.viewOnly - whether profile is view only or not
  */
-const ProfileInterests = () => {
+const ProfileInterests = (props: { viewOnly: boolean }) => {
   // NOTE: Used to simulate future HTTP requests - remove when API is implemented
   const [testCurrentSelected, setTestCurrentSelected] = React.useState<
     string[]
@@ -529,6 +560,7 @@ const ProfileInterests = () => {
         currentTags={testCurrentSelected}
         recommendedTags={testRecommended}
         setTags={setTestCurrentSelected}
+        viewOnly={props.viewOnly}
       />
     </Box>
   );