336 profile page

client/src/components/composite/Profile/ProfileCalendarCard/ProfileCalendarCard.tsx

@@ -0,0 +1,31 @@
+import { Card, Typography, CardContent, Stack, Box } from "@mui/material"
+
+function ProfileCalendarCard() {
+  return (
+    <div>
+      <Card
+        sx={{
+          boxShadow: "0px 8px 44px 0px rgba(0, 0, 0, 0.14)",
+          backgroundColor: "white",
+          borderRadius: "15px"
+        }}
+      >
+        <CardContent sx={{ padding: "36px" }}>
+          <Stack spacing={2}>
+            <Typography
+              variant="h5"
+              align="left"
+              color="#457CC3"
+              sx={{ fontWeight: "900" }}
+            >
+              Calendar
+            </Typography>
+            <Box></Box>
+          </Stack>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default ProfileCalendarCard

client/src/components/composite/Profile/UserInformation/UserInformationDisplay.tsx

@@ -0,0 +1,40 @@
+import Button from "components/generic/FigmaButtons/FigmaButton"
+import { UserAdditionalInfo } from "models/User"
+
+interface IUserInformationDisplay {
+  userData?: UserAdditionalInfo
+  editHandler?: () => void
+}
+
+const UserInformationDisplay = ({
+  userData,
+  editHandler
+}: IUserInformationDisplay) => {
+  if (userData) {
+    const { date_of_birth, ...displayableFields } = userData
+    return (
+      <>
+        <Button variant="default-sm" onClick={editHandler}>
+          Edit
+        </Button>
+        <div>
+          {/* TODO: Properly style and name fields */}
+          {Object.keys(displayableFields).map((key) => {
+            const _key = key as keyof typeof displayableFields
+            return (
+              <>
+                <h5>
+                  {_key}: {displayableFields[_key]}
+                </h5>
+              </>
+            )
+          })}
+          <h5>{new Date(date_of_birth.seconds * 1000).toDateString()}</h5>
+        </div>
+      </>
+    )
+  }
+  return <>No Data found</>
+}
+
+export default UserInformationDisplay

client/src/components/composite/Profile/UserInformation/UserInformationEdit.tsx

@@ -0,0 +1,40 @@
+import Button from "components/generic/FigmaButtons/FigmaButton"
+import TextInput from "components/generic/TextInputComponent/TextInput"
+import { UserAdditionalInfo } from "models/User"
+
+interface IUserInformationEdit {
+  userData?: UserAdditionalInfo
+  saveHandler?: () => void
+}
+
+const UserInformationEdit = ({
+  userData,
+  saveHandler
+}: IUserInformationEdit) => {
+  if (userData) {
+    const { date_of_birth, ...displayableFields } = userData
+    return (
+      <>
+        <Button variant="default-sm" onClick={saveHandler}>
+          Save
+        </Button>
+        <div>
+          {/* TODO: Properly style and name fields */}
+          {Object.keys(displayableFields).map((key) => {
+            const _key = key as keyof typeof displayableFields
+            return (
+              <>
+                <h5>{_key}</h5>
+                <TextInput value={(displayableFields[_key] as string) || ""} />
+              </>
+            )
+          })}
+          <h5>{new Date(date_of_birth.seconds * 1000).toDateString()}</h5>
+        </div>
+      </>
+    )
+  }
+  return <>No Data found</>
+}
+
+export default UserInformationEdit

client/src/components/composite/Profile/UserInformation/UserInformationSection.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react"
+import { useSearchParams } from "react-router-dom"
+import UserInformationEdit from "./UserInformationEdit"
+import UserInformationDisplay from "./UserInformationDisplay"
+import { UserAdditionalInfo } from "models/User"
+
+interface IUserInformationSection {
+  userData?: UserAdditionalInfo
+}
+
+const UserInformationSection = ({ userData }: IUserInformationSection) => {
+  const [searchParams] = useSearchParams()
+  const [isEdit, setIsEdit] = useState<boolean>(!!searchParams.get("edit"))
+
+  return (
+    <>
+      {isEdit ? (
+        <UserInformationEdit
+          saveHandler={() => setIsEdit(false)}
+          userData={userData}
+        />
+      ) : (
+        <UserInformationDisplay
+          editHandler={() => setIsEdit(true)}
+          userData={userData}
+        />
+      )}
+    </>
+  )
+}
+
+export default UserInformationSection