From c0a1e59ec16f50a6454a55372220a91132ddd721 Mon Sep 17 00:00:00 2001 From: Amos Cha <78386128+amos-cha@users.noreply.github.com> Date: Thu, 11 Jul 2024 15:04:00 -0400 Subject: [PATCH] Revert "S24 migrate components typescript pt2" --- src/components/GordonDialogBox/index.tsx | 8 +- src/components/GordonOffline/index.tsx | 5 - src/components/GordonTooltip/index.tsx | 6 +- .../Header/components/QuickSearch/index.tsx | 10 +- .../PWAInstructions/{index.tsx => index.jsx} | 202 ++++++------- src/components/PhotoCropper/index.tsx | 4 +- .../{index.tsx => index.jsx} | 37 +-- .../LinksDialog/{index.tsx => index.jsx} | 27 +- .../SocialMediaLinks/{index.tsx => index.jsx} | 20 +- .../Identification/{index.tsx => index.jsx} | 174 +++++------- .../{index.tsx => index.jsx} | 33 +-- .../MembershipsList/{index.tsx => index.jsx} | 46 +-- .../{index.tsx => index.jsx} | 15 +- .../{index.tsx => index.jsx} | 14 +- .../{index.tsx => index.jsx} | 19 +- .../OfficeInfoList/{index.tsx => index.jsx} | 27 +- .../{index.tsx => index.jsx} | 0 .../ConfirmationRow/{index.tsx => index.jsx} | 40 ++- .../ContentCard/{index.tsx => index.jsx} | 3 +- .../{index.tsx => index.jsx} | 29 +- .../AlumniUpdateForm/{index.tsx => index.jsx} | 266 +++++++----------- .../{index.tsx => index.jsx} | 53 ++-- .../{index.tsx => index.jsx} | 16 +- .../PersonalInfoList/{index.tsx => index.jsx} | 107 +++---- .../{index.tsx => index.jsx} | 13 +- .../components/SchedulePanel/index.tsx | 6 +- .../components/{index.tsx => index.jsx} | 0 .../Profile/{index.tsx => index.jsx} | 34 +-- .../Snackbar/{index.tsx => index.jsx} | 21 +- .../{index.tsx => index.jsx} | 35 +-- src/services/membership.ts | 2 +- src/services/user.ts | 68 +---- src/services/utils.ts | 11 - .../guestTranscript.tsx | 2 +- 34 files changed, 472 insertions(+), 881 deletions(-) rename src/components/PWAInstructions/{index.tsx => index.jsx} (75%) rename src/components/Profile/components/EmergencyInfoList/{index.tsx => index.jsx} (78%) rename src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/{index.tsx => index.jsx} (83%) rename src/components/Profile/components/Identification/components/SocialMediaLinks/{index.tsx => index.jsx} (82%) rename src/components/Profile/components/Identification/{index.tsx => index.jsx} (83%) rename src/components/Profile/components/MembershipsList/components/MembershipInfoCard/{index.tsx => index.jsx} (83%) rename src/components/Profile/components/MembershipsList/{index.tsx => index.jsx} (75%) rename src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/{index.tsx => index.jsx} (84%) rename src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/{index.tsx => index.jsx} (86%) rename src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/{index.tsx => index.jsx} (85%) rename src/components/Profile/components/OfficeInfoList/{index.tsx => index.jsx} (82%) rename src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/{index.tsx => index.jsx} (100%) rename src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/{index.tsx => index.jsx} (55%) rename src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/{index.tsx => index.jsx} (77%) rename src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/{index.tsx => index.jsx} (69%) rename src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/{index.tsx => index.jsx} (58%) rename src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/{index.tsx => index.jsx} (75%) rename src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/{index.tsx => index.jsx} (88%) rename src/components/Profile/components/PersonalInfoList/{index.tsx => index.jsx} (89%) rename src/components/Profile/components/ProfileInfoListItem/{index.tsx => index.jsx} (80%) rename src/components/Profile/components/{index.tsx => index.jsx} (100%) rename src/components/Profile/{index.tsx => index.jsx} (74%) rename src/components/Snackbar/{index.tsx => index.jsx} (61%) rename src/components/SpreadsheetUploader/{index.tsx => index.jsx} (83%) diff --git a/src/components/GordonDialogBox/index.tsx b/src/components/GordonDialogBox/index.tsx index 89775ffc4d..0f3775efa2 100644 --- a/src/components/GordonDialogBox/index.tsx +++ b/src/components/GordonDialogBox/index.tsx @@ -7,15 +7,15 @@ import { DialogProps, DialogTitle, } from '@mui/material'; -import { KeyboardEvent, MouseEvent, MouseEventHandler, PropsWithChildren } from 'react'; +import { KeyboardEvent, PropsWithChildren } from 'react'; type Props = { open: boolean; title: string; - buttonClicked?: (event: KeyboardEvent | MouseEvent) => void; + buttonClicked: (event: {}) => void; buttonName?: string; isButtonDisabled?: boolean; - cancelButtonClicked?: MouseEventHandler; + cancelButtonClicked?: (event: {}) => void; cancelButtonName?: string; severity?: AlertColor; } & Partial; @@ -33,7 +33,7 @@ const GordonDialogBox = ({ }: PropsWithChildren) => { const handleKeyPress = (event: KeyboardEvent) => { if ( - buttonClicked && + !isButtonDisabled && event.key === 'Enter' && event.currentTarget.classList.contains('MuiDialog-root') ) { diff --git a/src/components/GordonOffline/index.tsx b/src/components/GordonOffline/index.tsx index 908d1c176a..29381ad9c0 100644 --- a/src/components/GordonOffline/index.tsx +++ b/src/components/GordonOffline/index.tsx @@ -2,11 +2,6 @@ import { Button, Card, CardContent, Grid } from '@mui/material/'; import { Link } from 'react-router-dom'; import styles from './GordonOffline.module.css'; -/** - * @param {Object} props props - * @param {string} props.feature - Text representing the content the user tried to access - * @returns {JSX.Element} A card with a message that the user must connect to view content - */ type Props = { feature: string; }; diff --git a/src/components/GordonTooltip/index.tsx b/src/components/GordonTooltip/index.tsx index c451d30dad..5a19e4f929 100644 --- a/src/components/GordonTooltip/index.tsx +++ b/src/components/GordonTooltip/index.tsx @@ -2,12 +2,12 @@ import { Tooltip, TooltipProps } from '@mui/material'; import HelpIcon from '@mui/icons-material/Help'; import styles from './GordonTooltip.module.css'; -const GordonTooltip = ({ children, title, ...OtherProps }: TooltipProps) => { +const GordonTooltip = (props: TooltipProps) => { return ( {children}} - {...OtherProps} + title={{props.children}} > diff --git a/src/components/Header/components/QuickSearch/index.tsx b/src/components/Header/components/QuickSearch/index.tsx index c1e99f7389..9644740120 100644 --- a/src/components/Header/components/QuickSearch/index.tsx +++ b/src/components/Header/components/QuickSearch/index.tsx @@ -80,9 +80,9 @@ const performSearch = debounce( type Props = | { - disableLink?: true; - customPlaceholderText?: string; - onSearchSubmit?: (person: SearchResult) => void; + disableLink: true; + customPlaceholderText: string; + onSearchSubmit: (person: SearchResult) => void; searchFunction?: SearchFunction; } | { @@ -106,7 +106,7 @@ const GordonQuickSearch = ({ ? 'Offline' : customPlaceholderText ?? (width < BREAKPOINT_WIDTH ? 'People' : 'People Search'); - const handleInput = (_event: React.SyntheticEvent, value: string) => { + const handleInput = (_event: any, value: string) => { // remove special characters const query = value.replace(specialCharactersRegex, ''); @@ -118,7 +118,7 @@ const GordonQuickSearch = ({ } }; - const handleSubmit = (_event: React.SyntheticEvent, person: SearchResult | null) => { + const handleSubmit = (_event: any, person: SearchResult | null) => { if (!person) return; disableLink ? onSearchSubmit!(person) : navigate(`/profile/${person.UserName}`); }; diff --git a/src/components/PWAInstructions/index.tsx b/src/components/PWAInstructions/index.jsx similarity index 75% rename from src/components/PWAInstructions/index.tsx rename to src/components/PWAInstructions/index.jsx index ddd55eae17..46f9ee9a61 100644 --- a/src/components/PWAInstructions/index.tsx +++ b/src/components/PWAInstructions/index.jsx @@ -2,7 +2,6 @@ import { useState } from 'react'; import GetAppIcon from '@mui/icons-material/GetApp'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import BeforeInstallPromptEvent from '@mui/material'; import styles from './PWAInstructions.module.css'; import DesktopChromeInstall from './images/Desktop/Desktop-Chrome-Install-360.png'; @@ -119,30 +118,12 @@ const devices = { }, }; -interface BeforeInstallPromptEvent extends Event { - readonly platforms: string[]; - readonly userChoice: Promise<{ - outcome: 'accepted' | 'dismissed'; - platform: string; - }>; - prompt(): Promise; -} - -type Props = { - open: boolean; - handleDisplay: () => void; - deferredPWAPrompt: BeforeInstallPromptEvent; -}; - -const PWAInstructions = ({ open, handleDisplay, deferredPWAPrompt }: Props) => { - const [device, setDevice] = useState(null); - const [platform, setPlatform] = useState(null); +const PWAInstructions = (props) => { + const [device, setDevice] = useState(null); + const [platform, setPlatform] = useState(null); // Handles which device is selected - const handleDeviceChange = ( - event: React.MouseEvent, - selectedDevice: string | null, - ) => { + const handleDeviceChange = (event, selectedDevice) => { // Checks the selected device to prevent the user from deselecting a selected toggle if (selectedDevice === 'Desktop') { setDevice(selectedDevice); @@ -155,10 +136,7 @@ const PWAInstructions = ({ open, handleDisplay, deferredPWAPrompt }: Props) => { }; // Handles which platform is selected - const handlePlatformChange = ( - event: React.MouseEvent, - selectedPlatform: string | null, - ) => { + const handlePlatformChange = (event, selectedPlatform) => { // Checks the selected platform to prevent the user from deselecting a selected toggle if (selectedPlatform !== null) setPlatform(selectedPlatform); }; @@ -200,97 +178,85 @@ const PWAInstructions = ({ open, handleDisplay, deferredPWAPrompt }: Props) => { > Instructions for {preText} - { - //@ts-ignore TypeScript cannot encode the fact that platform may have a different value depending on the value of device - devices[device][platform] // - .map((step: string[], index: number) => { - /** - * The first step is processed differently from the rest in order to show a link to - * download Google Chrome. This is for all platforms except "Apple" since the PWA can - * only be installed through Safari with Apple - */ - if (index === 0 && platform !== 'Apple') { - return ( - - - - Step {index + 1}:  - - - {step[0]}  - click here. - - - - {step[3]} - - - ); - } - // Creates the JSX of the current step containing the instruction and its corresponding image - return ( - - { + /** + * The first step is processed differently from the rest in order to show a link to + * download Google Chrome. This is for all platforms except "Apple" since the PWA can + * only be installed through Safari with Apple + */ + if (index === 0 && platform !== 'Apple') { + return ( + + + - - Step {index + 1}:  - - - {step[0]} - - - + - {step[2]} - + {step[0]}  + click here. + + + + {step[3]} - ); - }) - } + + ); + } + // Creates the JSX of the current step containing the instruction and its corresponding image + return ( + + + + Step {index + 1}:  + + + {step[0]} + + + + {step[2]} + + + ); + })} ); } @@ -298,7 +264,7 @@ const PWAInstructions = ({ open, handleDisplay, deferredPWAPrompt }: Props) => { function createContent() { // If the browser has quick PWA installation capability - if (deferredPWAPrompt) { + if (props.deferredPWAPrompt) { return ( { @@ -563,8 +539,8 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }: Props) => isAprilFools ? profileTitleAprilFools : userProfile.NickName - ? userProfile.NickName - : userProfile.FirstName + ? userProfile.NickName + : userProfile.FirstName }'s Profile`} /> ) : ( @@ -607,7 +583,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }: Props) => cliftonColor + ') border-box', } - : undefined + : null } >
? // Main Photo: Default defaultUserImage : // Main Photo: Preferred - // If the given user doesn't have a preferred photo, then their default photo is shown - hasPreferredImage - ? preferredUserImage - : defaultUserImage + // If the given user doesn't have a preferred photo, then their default photo is shown + hasPreferredImage + ? preferredUserImage + : defaultUserImage }`} alt="Profile" /> @@ -688,9 +664,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }: Props) => xs={12} className={styles.identification_card_content_card_container_info_class} > - {checkIsStudent(userProfile) && userProfile.Class && ( - {Class[userProfile.Class]} - )} + {userProfile.Class && {Class[userProfile.Class]}} }${hasMaidenName ? ` (${userProfile.MaidenName})` : ''}`} - {checkIsFacStaff(userProfile) && - userProfile.JobTitle && - userProfile.JobTitle !== '' && ( - - - {userProfile.JobTitle} - - - )} + {userProfile.JobTitle && userProfile.JobTitle !== '' && ( + + + {userProfile.JobTitle} + + + )} {userProfile.Email ? ( void; - element: MembershipView; -}; - -type OnlineProps = { - element: MembershipView; - children: JSX.Element | JSX.Element[]; -}; - -type MembershipProps = { - myProf: boolean; - membershipHistory: MembershipHistory; - createSnackbar: (message: string, severity: AlertColor) => void; -}; - -const PrivacyToggle = ({ element, createSnackbar }: PrivacyProps) => { - const toggleMembershipPrivacy = async (element: MembershipView) => { +const PrivacyToggle = ({ element, createSnackbar }) => { + const toggleMembershipPrivacy = async (element) => { try { const update = await membershipService.setMembershipPrivacy( element.MembershipID, @@ -56,7 +39,7 @@ const PrivacyToggle = ({ element, createSnackbar }: PrivacyProps) => { return ( - + toggleMembershipPrivacy(element)} checked={!element.Privacy} @@ -64,16 +47,16 @@ const PrivacyToggle = ({ element, createSnackbar }: PrivacyProps) => { color="secondary" /> - + {element.Privacy ? 'Private' : 'Public'} ); }; -const OnlineOnlyLink = ({ element, children }: OnlineProps) => { +const OnlineOnlyLink = ({ element, children }) => { const isOnline = useNetworkStatus(); - const showPrivate = element.Privacy; + const showPrivate = element.IsInvolvementPrivate || element.Privacy; if (isOnline) { return ( { } }; -const MembershipInfoCard = ({ myProf, membershipHistory, createSnackbar }: MembershipProps) => { +const MembershipInfoCard = ({ myProf, membershipHistory, createSnackbar }) => { const isOnline = useNetworkStatus(); return ( <> diff --git a/src/components/Profile/components/MembershipsList/index.tsx b/src/components/Profile/components/MembershipsList/index.jsx similarity index 75% rename from src/components/Profile/components/MembershipsList/index.tsx rename to src/components/Profile/components/MembershipsList/index.jsx index f229ad37d4..8063310916 100644 --- a/src/components/Profile/components/MembershipsList/index.tsx +++ b/src/components/Profile/components/MembershipsList/index.jsx @@ -1,27 +1,11 @@ -import { - AlertColor, - Button, - Card, - CardContent, - CardHeader, - Grid, - List, - Typography, -} from '@mui/material'; +import { Button, Card, CardContent, CardHeader, Grid, List, Typography } from '@mui/material'; import GordonLoader from 'components/Loader'; import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; -import membershipService, { MembershipHistory } from 'services/membership'; +import membershipService from 'services/membership'; import MembershipInfoCard from './components/MembershipInfoCard'; import styles from './MembershipsList.module.css'; -type Props = { - username: string; - myProf: boolean; - PersonType?: string; - createSnackbar: (message: string, severity: AlertColor) => void; -}; - /** * A List of memberships for display on the Profile and MyProfile views. * @@ -31,9 +15,9 @@ type Props = { * @param {Function} props.createSnackbar function to create a snackbar of whether an operation succeeded * @returns {JSX} A list of the user's memberships */ -const MembershipsList = ({ username, myProf, createSnackbar }: Props) => { +const MembershipsList = ({ username, myProf, createSnackbar }) => { const [loading, setLoading] = useState(true); - const [membershipHistories, setMembershipHistories] = useState([]); + const [membershipHistories, setMembershipHistories] = useState([]); useEffect(() => { async function loadMemberships() { @@ -60,18 +44,14 @@ const MembershipsList = ({ username, myProf, createSnackbar }: Props) => { ); } else { - return ( - <> - {membershipHistories.map((membership) => ( - - ))} - - ); + return membershipHistories.map((membership) => ( + + )); } }; @@ -89,7 +69,7 @@ const MembershipsList = ({ username, myProf, createSnackbar }: Props) => { ); const noteInfo = myProf && ( -
+
NOTE: Shaded areas are visible only to you and other members of the same club session. diff --git a/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.tsx b/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.jsx similarity index 84% rename from src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.tsx rename to src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.jsx index 779cb15f1b..7e9712ee0e 100644 --- a/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.tsx +++ b/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.jsx @@ -1,16 +1,16 @@ -import { AlertColor, FormControl, IconButton } from '@mui/material'; +import { FormControl, IconButton } from '@mui/material'; import EditIcon from '@mui/icons-material/Edit'; import GordonDialogBox from 'components/GordonDialogBox'; import GordonSnackbar from 'components/Snackbar'; -import { useState, useEffect, ReactNode } from 'react'; +import { useState, useEffect } from 'react'; import userService from 'services/user'; import SearchField from 'views/PeopleSearch/components/SearchFieldList/components/SearchField'; -const UpdateMail = (props: { changeMailLocation: (mailStop: string) => void }) => { +const UpdateMail = (props) => { const [open, setOpen] = useState(false); const [mailStop, setMailStop] = useState(''); - const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false }); - const [mailStops, setMailStops] = useState([]); + const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false }); + const [mailStops, setMailStops] = useState([]); const handleSubmit = async () => { try { @@ -43,6 +43,7 @@ const UpdateMail = (props: { changeMailLocation: (mailStop: string) => void }) = buttonClicked={handleSubmit} cancelButtonName="CANCEL" cancelButtonClicked={() => setOpen(false)} + handleSubmit > void }) = updateValue={(event) => setMailStop(event.target.value)} options={mailStops} select + size={200} + required="required" /> setSnackbar((s) => ({ ...s, open: false }))} /> diff --git a/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.tsx b/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.jsx similarity index 86% rename from src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.tsx rename to src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.jsx index 0c47c210ed..6a7b8a6e45 100644 --- a/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.tsx +++ b/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.jsx @@ -1,17 +1,14 @@ -import { AlertColor, FormControl, IconButton, TextField } from '@mui/material'; +import { FormControl, IconButton, TextField } from '@mui/material'; import EditIcon from '@mui/icons-material/Edit'; import GordonDialogBox from 'components/GordonDialogBox'; import GordonSnackbar from 'components/Snackbar'; import { useState } from 'react'; import userService from 'services/user'; -const UpdateOfficeHours = (props: { - officeHours: string; - changeOfficeHours: (hours: string) => void; -}) => { +const UpdateOfficeHours = (props) => { const [open, setOpen] = useState(false); const [hours, setHours] = useState(props.officeHours); - const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false }); + const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false }); const maxCharacter = 4000; const handleSubmit = async () => { @@ -41,6 +38,7 @@ const UpdateOfficeHours = (props: { buttonClicked={handleSubmit} cancelButtonName="CANCEL" cancelButtonClicked={() => setOpen(false)} + handleSubmit > setHours(event.target.value)} inputProps={{ maxLength: maxCharacter - 1 }} - required + required="required" /> setSnackbar((s) => ({ ...s, open: false }))} /> diff --git a/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.tsx b/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.jsx similarity index 85% rename from src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.tsx rename to src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.jsx index edc62cbd12..438b5a9b33 100644 --- a/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.tsx +++ b/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.jsx @@ -1,4 +1,4 @@ -import { AlertColor, Autocomplete, Box, IconButton, TextField } from '@mui/material'; +import { Autocomplete, Box, IconButton, TextField } from '@mui/material'; import EditIcon from '@mui/icons-material/Edit'; import GordonDialogBox from 'components/GordonDialogBox'; import GordonSnackbar from 'components/Snackbar'; @@ -6,17 +6,12 @@ import { useState, useEffect } from 'react'; import userService from 'services/user'; import peopleSearchService from 'services/peopleSearch'; -type Building = { - Code: string; - Description: string; -}; - const UpdateOffice = () => { const [open, setOpen] = useState(false); const [room, setRoom] = useState(''); - const [building, setBuilding] = useState(''); - const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false }); - const [buildings, setBuildings] = useState([]); + const [building, setBuilding] = useState(); + const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false }); + const [buildings, setBuildings] = useState([]); useEffect(() => { peopleSearchService.getBuildings().then(setBuildings); @@ -53,6 +48,7 @@ const UpdateOffice = () => { buttonClicked={handleSubmit} cancelButtonName="CANCEL" cancelButtonClicked={() => setOpen(false)} + handleSubmit > { options={buildings} renderInput={(params) => } getOptionLabel={(option) => option.Description} - onChange={(_event, value) => setBuilding(value!.Code)} + onChange={(_event, value) => setBuilding(value.Code)} + required /> { setSnackbar((s) => ({ ...s, open: false }))} /> diff --git a/src/components/Profile/components/OfficeInfoList/index.tsx b/src/components/Profile/components/OfficeInfoList/index.jsx similarity index 82% rename from src/components/Profile/components/OfficeInfoList/index.tsx rename to src/components/Profile/components/OfficeInfoList/index.jsx index fe343f5e44..81712a6ab5 100644 --- a/src/components/Profile/components/OfficeInfoList/index.tsx +++ b/src/components/Profile/components/OfficeInfoList/index.jsx @@ -1,28 +1,11 @@ -import { useState, Fragment, useEffect, Children, ReactElement } from 'react'; -import { Card, CardContent, CardHeader, Grid, List, Typography, IconButton } from '@mui/material'; +import { useState } from 'react'; +import { Card, CardContent, CardHeader, Grid, List, Typography } from '@mui/material'; import ProfileInfoListItem from '../ProfileInfoListItem'; import styles from './OfficeInfoList.module.css'; import UpdateOffice from './UpdateOfficeLocationDialog'; import UpdateOfficeHours from './UpdateOfficeHoursDialog'; import UpdateMail from './UpdateMailDestinationDialog'; import GordonTooltip from 'components/GordonTooltip'; -import user from 'services/user'; -import EditIcon from '@mui/icons-material/Edit'; -import { SignalWifiStatusbarConnectedNoInternet4TwoTone } from '@mui/icons-material'; - -type Props = { - myProf: boolean; - profile: { - BuildingDescription: string; - OnCampusDepartment: string; - OnCampusRoom: string; - OnCampusPhone: string; - PersonType: string; - office_hours: string; - Mail_Location: string; - Mail_Description: string; - }; -}; const OfficeInfoList = ({ myProf, @@ -36,7 +19,7 @@ const OfficeInfoList = ({ Mail_Location, Mail_Description, }, -}: Props) => { +}) => { const [profOfficeHours, setProfOfficeHours] = useState(office_hours); const [profMailLocation, setProfMailLocation] = useState(Mail_Location); @@ -120,8 +103,8 @@ const OfficeInfoList = ({ {profMailLocation ? profMailLocation : 'Add your mail location here'} {Mail_Description && ( - - <>{Mail_Description} + + {Mail_Description} )} diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.tsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.jsx similarity index 100% rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.tsx rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.jsx diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.tsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.jsx similarity index 55% rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.tsx rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.jsx index f6739003d4..930bb361d1 100644 --- a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.tsx +++ b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.jsx @@ -2,36 +2,30 @@ import { Typography, Grid } from '@mui/material/'; import styles from './ConfirmationRow.module.css'; import { Check, Remove } from '@mui/icons-material'; -type Props = { - field: { Value: string | boolean; Label: string }; - prevValue: string | boolean; -}; - -const ConfirmationRow = ({ field, prevValue }: Props) => { - const truthIcon = (value: boolean) => { +const ConfirmationRow = ({ field, prevValue }) => { + const isCheckbox = typeof prevValue === 'boolean'; + const truthIcon = (value) => { return value ? ( ) : ( ); }; - const currentValue = - typeof field.Value === 'boolean' ? ( - truthIcon(field.Value) - ) : ( - - {field.Value} - - ); + const currentValue = isCheckbox ? ( + truthIcon(field.Value) + ) : ( + + {`${field.Value}`} + + ); - const previousValue = - typeof prevValue === 'boolean' ? ( - truthIcon(prevValue) - ) : ( - - {prevValue === '' || false ? 'No previous value' : prevValue} - - ); + const previousValue = isCheckbox ? ( + truthIcon(prevValue) + ) : ( + + {prevValue === '' || false ? 'No previous value' : `${prevValue}`} + + ); return ( { +const ContentCard = (props) => { return ( diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.tsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.jsx similarity index 69% rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.tsx rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.jsx index 27368fb2ab..0b2d4bcbe1 100644 --- a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.tsx +++ b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.jsx @@ -6,35 +6,10 @@ import { InputLabel, MenuItem, Select, - SelectChangeEvent, TextField, } from '@mui/material/'; -import { ChangeEvent, ReactNode } from 'react'; import styles from './ProfileUpdateField.module.css'; -type defaultProps = { - label: string; - name: string; - value: any; - helperText?: ReactNode; - menuItems?: string[]; - error?: boolean; -}; - -export type ProfileUpdateFieldProps = defaultProps & - ( - | { - type: 'text' | 'checkbox'; - menuItems?: undefined; - onChange: (event: ChangeEvent, child?: ReactNode) => void; - } - | { - type: 'select'; - menuItems: string[]; - onChange: (event: SelectChangeEvent, child?: ReactNode) => void; - } - ); - const ProfileUpdateField = ({ label, name, @@ -44,7 +19,7 @@ const ProfileUpdateField = ({ error, helperText, menuItems, -}: ProfileUpdateFieldProps) => { +}) => { let field; // eslint-disable-next-line default-case switch (type) { @@ -77,7 +52,7 @@ const ProfileUpdateField = ({ {label}