From c4ed5eb6d91a496a3d92bf05012fa340b66d3f8a Mon Sep 17 00:00:00 2001 From: tdang2180 <114024874+tdang2180@users.noreply.github.com> Date: Mon, 18 Sep 2023 16:38:27 -0700 Subject: [PATCH 1/6] fixed logged in home screen sizing --- .../components/home-logged-in/homePage.tsx | 23 ++++++++----------- meshapp/src/home/logged-in/LoggedInHome.tsx | 12 +++++----- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/meshapp/src/components/home-logged-in/homePage.tsx b/meshapp/src/components/home-logged-in/homePage.tsx index eedb0461..f39bf087 100644 --- a/meshapp/src/components/home-logged-in/homePage.tsx +++ b/meshapp/src/components/home-logged-in/homePage.tsx @@ -3,17 +3,14 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline"; import group_image from "../../assets/media/group_image.png"; import { paths } from "../../Routing/RoutePaths"; import { Link as RouterLink } from "react-router-dom"; + export default function homePage() { /*-----------------Group image container------------*/ const imgContainer = ( - group_image + group_image ); @@ -54,7 +51,7 @@ export default function homePage() { const topText = () => { return ( - + { return ( - + {imgAlertItem()} {topText()} - {/*-----------Grid item for bottom text & swipe button----------------*/} - - - {bottomTextItem()} - {swipeButton()} - + + {bottomTextItem()} + {swipeButton()} diff --git a/meshapp/src/home/logged-in/LoggedInHome.tsx b/meshapp/src/home/logged-in/LoggedInHome.tsx index 21269cc0..409c7eb3 100644 --- a/meshapp/src/home/logged-in/LoggedInHome.tsx +++ b/meshapp/src/home/logged-in/LoggedInHome.tsx @@ -25,13 +25,13 @@ function homeTheme() { fontSize: "23px", }, "@media (min-width:600px)": { - fontSize: "20px", + fontSize: "24px", }, "@media (min-width:900px)": { fontSize: "31px", }, "@media (min-width:1200px)": { - fontSize: "42px", + fontSize: "43px", }, "@media (min-width: 1536px)": { fontSize: "55px", @@ -46,13 +46,13 @@ function homeTheme() { fontSize: "20px", }, "@media (min-width:600px)": { - fontSize: "13px", + fontSize: "17px", }, "@media (min-width:900px)": { fontSize: "23px", }, "@media (min-width:1200px)": { - fontSize: "25px", + fontSize: "29px", }, "@media (min-width: 1536px)": { fontSize: "38px", @@ -70,9 +70,9 @@ function homeTheme() { fontSize: "10px", }, "@media (min-width:900px)": { - fontSize: "15px", + fontSize: "14px", }, - "@media (min-width:1000px)": { + "@media (min-width:1200px)": { fontSize: "16px", }, "@media (min-width: 1536px)": { From 0aedf670d211acc3720ca82740437d81dd5bcc42 Mon Sep 17 00:00:00 2001 From: tdang2180 <114024874+tdang2180@users.noreply.github.com> Date: Mon, 25 Sep 2023 21:03:54 -0700 Subject: [PATCH 2/6] implemented experience section --- meshapp/src/profile/profile-experience.tsx | 304 +++++++++++++++++++++ 1 file changed, 304 insertions(+) create mode 100644 meshapp/src/profile/profile-experience.tsx diff --git a/meshapp/src/profile/profile-experience.tsx b/meshapp/src/profile/profile-experience.tsx new file mode 100644 index 00000000..5f044b40 --- /dev/null +++ b/meshapp/src/profile/profile-experience.tsx @@ -0,0 +1,304 @@ +import { useState } from "react"; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Typography, + createTheme, + ThemeProvider, + Grid, +} from "@mui/material"; + +import EditIcon from "@mui/icons-material/Edit"; +import AddIcon from "@mui/icons-material/Add"; +import SaveIcon from "@mui/icons-material/Save"; +import DeleteIcon from "@mui/icons-material/Delete"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; + +import ProfileTextField from "./profile-textfield"; + +interface AccordionProps { + title: string; + description: string; + organization: string; + index: number; +} + +const theme = createTheme({ + palette: { + mode: "light", + primary: { + main: "#0b7d66", + }, + }, + typography: { + h1: { + fontFamily: "cocogoose", + fontWeight: "bold", + color: "#26383A", + }, + }, +}); + +/** + * Displays the user's experience. + * + * @param props - Properties of the component + * @param {string} props.occupationTitle - Title of user's occupation + * @param {string} props.occupationBusiness - Name of business/org the user affiliates with + * @param {string} props.accountID - accountID associated with the profile + */ +export default function ProfileExperience(props: { accountID: number }) { + const [editMode, setEditMode] = useState(false); + const [expandMode, setExpandMode] = useState([false, false]); + const [occupations, setOccupations] = useState([ + "Animal Petter", + "Object Oriented Snob", + ]); + const [organizations, setOrgranizations] = useState([ + "Self-Employed", + "MindGeek, Montreal Canada", + ]); + const [descriptions, setDescriptions] = useState([ + "Pet cute animals", + "Lebron James", + ]); + + const handleEditClick = () => { + setEditMode(true); + }; + + const handleSaveClick = () => { + setEditMode(false); + setOccupations([...occupations]); + setOrgranizations([...organizations]); + setDescriptions([...descriptions]); + }; + + const handleExpandClick = (index: number) => { + expandMode[index] = !expandMode[index]; + setExpandMode([...expandMode]); + console.log(expandMode[index]); + }; + + const handleAddClick = () => { + setOccupations([...occupations, ""]); + setOrgranizations([...organizations, ""]); + setDescriptions([...descriptions, ""]); + setExpandMode([...expandMode, false]); + }; + + //TODO: Remove experience + const handleDeleteClick = () => { + + }; + + //TODO: Receive and store experience + function saveOccupation(text: string, index: number) { + occupations[index] = text; + } + + function saveOrganization(text: string, index: number) { + organizations[index] = text; + } + + function saveDescription(text: string, index: number) { + descriptions[index] = text; + } + + /** + * Displays experience header with edit/save icon. + */ + const ExperienceHeader = () => { + return ( + + + Experience + + {editMode ? ( + + ) : ( + + )} + + ); + }; + + /** + * Displays the user's experience in edit mode. + * + * @param props - Properties of the component + * @param {string} props.title - Title of user's occupation + * @param {string} props.organization - Name of business/org the user affiliates with + * @param {string} props.description - Description of user's occupation + * @param {boolean} props.expand - Expand mode indicator for user's occupation + * @param {numberg} props.index- Index of user's occupation + */ + const EditExperience = (props: { + title: string; + organization: string; + description: string; + expand: boolean; + index: number; + }) => { + return ( + + + + + handleExpandClick(props.index)} + /> + } + > + + + saveOccupation(text, props.index)} + /> + + + saveOrganization(text, props.index)} + /> + + + + + saveDescription(text, props.index)} + /> + + + + + ); + }; + + /** + * Displays the user's experience. + * + * @param props - Properties of the component + * @param {string} props.title - Title of user's occupation + * @param {string} props.organization - Name of business/org the user affiliates with + * @param {string} props.description - Description of user's occupation + * @param {numberg} props.index- Index of user's occupation + */ + const ExperienceAccordion = (props: AccordionProps) => { + return ( + + + }> + + {props.title} + + {props.organization} + + + saveDescription(text, props.index)} + /> + + + + ); + }; + + /** + * Displays delete icon next to the user's experience in edit mode. + */ + const RemoveButton = () => { + return ( + + ); + }; + + return ( + + + + {occupations.map((occupation, index) => + editMode ? ( + + ) : ( + + ) + )} + {editMode && ( + + )} + + + ); +} \ No newline at end of file From cdc92c0a7c2aed31b62a5fd6deb6c28da0c6b721 Mon Sep 17 00:00:00 2001 From: tdang2180 <114024874+tdang2180@users.noreply.github.com> Date: Mon, 25 Sep 2023 21:07:06 -0700 Subject: [PATCH 3/6] implemented current occupation component --- meshapp/src/profile/profile-experience.tsx | 2 - meshapp/src/profile/profile-occupation.tsx | 126 +++++++++++++++++++++ meshapp/src/profile/profile-page.tsx | 58 ++-------- 3 files changed, 136 insertions(+), 50 deletions(-) create mode 100644 meshapp/src/profile/profile-occupation.tsx diff --git a/meshapp/src/profile/profile-experience.tsx b/meshapp/src/profile/profile-experience.tsx index 5f044b40..4611c469 100644 --- a/meshapp/src/profile/profile-experience.tsx +++ b/meshapp/src/profile/profile-experience.tsx @@ -44,8 +44,6 @@ const theme = createTheme({ * Displays the user's experience. * * @param props - Properties of the component - * @param {string} props.occupationTitle - Title of user's occupation - * @param {string} props.occupationBusiness - Name of business/org the user affiliates with * @param {string} props.accountID - accountID associated with the profile */ export default function ProfileExperience(props: { accountID: number }) { diff --git a/meshapp/src/profile/profile-occupation.tsx b/meshapp/src/profile/profile-occupation.tsx new file mode 100644 index 00000000..acdfb7e4 --- /dev/null +++ b/meshapp/src/profile/profile-occupation.tsx @@ -0,0 +1,126 @@ +import { useState } from "react"; +import { Grid, Typography, createTheme, ThemeProvider } from "@mui/material"; + +import EditIcon from "@mui/icons-material/Edit"; +import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"; + +import ProfileTextField from "./profile-textfield"; + +const theme = createTheme({ + palette: { + mode: "light", + primary: { + main: "#0b7d66", + }, + }, + typography: { + h1: { + fontFamily: "cocogoose", + fontWeight: "bold", + color: "#26383A", + }, + }, +}); + +/** + * Displays the user's current occupation. + * + * @param props - Properties of the component + * @param {string} props.occupationTitle - Title of user's occupation + * @param {string} props.occupationBusiness - Name of business/org the user affiliates with + */ +export default function ProfileOccupation(props: { + occupationTitle: string; + occupationBusiness: string; +}) { + const [editMode, setEditMode] = useState(false); + const [occupationTitle, setOccupationTitle] = useState(props.occupationTitle); + const [occupationBusiness, setOccupationBusiness] = useState( + props.occupationBusiness + ); + + const handleEditClick = () => { + setEditMode(true); + }; + + const handleBackClick = () => { + setEditMode(false); + }; + + //TODO: Retrieve and store occupation + function saveTitle(text: string) { + setOccupationTitle(text); + } + + function saveBusiness(text: string) { + setOccupationBusiness(text); + } + + /** + * Displays the user's occupation in edit mode. + */ + const EditOccupation = () => { + return ( + + + + + + + + + ); + }; + + return ( + + + {editMode ? ( + + + + + + + ) : ( + + + {occupationTitle}, {occupationBusiness} + + + + )} + + + ); +} diff --git a/meshapp/src/profile/profile-page.tsx b/meshapp/src/profile/profile-page.tsx index f92e0c25..ca2a6dc6 100644 --- a/meshapp/src/profile/profile-page.tsx +++ b/meshapp/src/profile/profile-page.tsx @@ -10,6 +10,8 @@ import { import ProfileTextField from "./profile-textfield"; import ProfilePicture from "./profile-picture"; +import ProfileExperience from "./profile-experience"; +import ProfileOccupation from "./profile-occupation"; import { Profile } from "./types/profile"; import "./styling/profile-page.css"; @@ -87,7 +89,7 @@ const ProfilePage = (props: Profile) => { - + @@ -153,28 +155,6 @@ const ProfileHeader = (props: { name: string; pronouns: string }) => { ); }; -/** - * Displays the user's current occupation. - * - * @param props - Properties of the component - * @param {string} props.occupationTitle - Title of user's occupation - * @param {string} props.occupationBusiness - Name of business/org the user affiliates with - */ -const ProfileOccupation = (props: { - occupationTitle: string; - occupationBusiness: string; -}) => { - return ( - - - - {props.occupationTitle}, {props.occupationBusiness} - - - - ); -}; - /** * Displays the user's biography. It also has a max character limit of 300. * @@ -225,8 +205,9 @@ const ProfileBiography = (props: {biography: string, accountID: number}) => { { ); }; -// TODO: To be fully implemented -const ProfileExperience = (props: any) => { - return ( - - - - Experience - - - - - ); -}; - // TODO: To be fully implemented const ProfileEducation = (props: any) => { return ( @@ -335,9 +296,10 @@ const ProfileInterests = (props: any) => { const TestComponent = (props: any) => { return ( {return}} /> From 7ebaed43f20b443d16aaef20220a98ff2ba2db01 Mon Sep 17 00:00:00 2001 From: tdang2180 <114024874+tdang2180@users.noreply.github.com> Date: Mon, 25 Sep 2023 21:07:48 -0700 Subject: [PATCH 4/6] added variant param to textfield --- meshapp/src/profile/profile-textfield.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/meshapp/src/profile/profile-textfield.tsx b/meshapp/src/profile/profile-textfield.tsx index 1a2c5e2f..f5433e8d 100644 --- a/meshapp/src/profile/profile-textfield.tsx +++ b/meshapp/src/profile/profile-textfield.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { TextField, Box } from "@mui/material"; +import { TextField, Box, TextFieldVariants } from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import SaveIcon from "@mui/icons-material/Save"; @@ -18,6 +18,7 @@ import SaveIcon from "@mui/icons-material/Save"; * @param {function} props.handleSave - Callback to save data */ const ProfileTextField = (props: { + variant: TextFieldVariants; label: string; placeholder: string; text: string; @@ -44,6 +45,7 @@ const ProfileTextField = (props: { return ( Date: Mon, 25 Sep 2023 23:32:38 -0700 Subject: [PATCH 5/6] created a constant for occupation's description --- meshapp/src/profile/profile-experience.tsx | 75 ++++++++++++---------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/meshapp/src/profile/profile-experience.tsx b/meshapp/src/profile/profile-experience.tsx index 4611c469..9231b079 100644 --- a/meshapp/src/profile/profile-experience.tsx +++ b/meshapp/src/profile/profile-experience.tsx @@ -86,10 +86,8 @@ export default function ProfileExperience(props: { accountID: number }) { setExpandMode([...expandMode, false]); }; - //TODO: Remove experience - const handleDeleteClick = () => { - - }; + //TODO: Remove experience + const handleDeleteClick = () => {}; //TODO: Receive and store experience function saveOccupation(text: string, index: number) { @@ -143,6 +141,31 @@ export default function ProfileExperience(props: { accountID: number }) { ); }; + /** + * Returns the occupation's description + * + * @param props - Properties of the component + * @param {string} props.description - Description of user's occupation + * @param {numberg} props.index- Index of user's occupation + */ + const DescriptionAccordionDetail = (props: { + description: string; + index: number; + }) => { + return ( + + saveDescription(text, props.index)} + /> + + ); + }; + /** * Displays the user's experience in edit mode. * @@ -166,20 +189,16 @@ export default function ProfileExperience(props: { accountID: number }) { handleExpandClick(props.index)} - /> - } + expandIcon={ handleExpandClick(props.index)}/> } > saveOccupation(text, props.index)} /> @@ -187,24 +206,18 @@ export default function ProfileExperience(props: { accountID: number }) { saveOrganization(text, props.index)} /> - - saveDescription(text, props.index)} - /> - + @@ -225,21 +238,15 @@ export default function ProfileExperience(props: { accountID: number }) { }> - + {props.title} {props.organization} - - saveDescription(text, props.index)} - /> - + ); From a5a94af0bbe70014e337bf10e0ea0af037533b13 Mon Sep 17 00:00:00 2001 From: tdang2180 <114024874+tdang2180@users.noreply.github.com> Date: Tue, 21 May 2024 12:57:04 -0700 Subject: [PATCH 6/6] fixed merge errors --- meshapp/src/profile/profile-page.tsx | 2 +- meshapp/src/profile/profile-textfield.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/meshapp/src/profile/profile-page.tsx b/meshapp/src/profile/profile-page.tsx index cfdd3adc..e32a4f33 100644 --- a/meshapp/src/profile/profile-page.tsx +++ b/meshapp/src/profile/profile-page.tsx @@ -110,7 +110,7 @@ const ProfilePage = (props: Profile) => { - + diff --git a/meshapp/src/profile/profile-textfield.tsx b/meshapp/src/profile/profile-textfield.tsx index b0a77e9d..e24aa173 100644 --- a/meshapp/src/profile/profile-textfield.tsx +++ b/meshapp/src/profile/profile-textfield.tsx @@ -48,7 +48,7 @@ const ProfileTextField = (props: { label={props.label} placeholder={props.placeholder} InputLabelProps={{ shrink: true }} - variant={"standard"} + variant={props.variant} InputProps={{ endAdornment: editMode ? (