From 7494a76d0b0553d8f299f19e07715fca59d91a09 Mon Sep 17 00:00:00 2001
From: nora-zajzon <nzajzon@ucsd.edu>
Date: Thu, 27 Jun 2024 14:01:24 -0700
Subject: [PATCH 1/3] Replaced HTML components with MUI applicable components
---
client/src/components/auth/HandleAuth.js | 9 +-
client/src/components/user-admin/EditUsers.js | 109 +++++++++---------
2 files changed, 57 insertions(+), 61 deletions(-)
diff --git a/client/src/components/auth/HandleAuth.js b/client/src/components/auth/HandleAuth.js
index 4c9d6abb4..240a683f3 100644
--- a/client/src/components/auth/HandleAuth.js
+++ b/client/src/components/auth/HandleAuth.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import { isValidToken } from '../../services/user.service';
import { authLevelRedirect } from '../../utils/authUtils';
+import { Box, Typography, CircularProgress } from '@mui/material';
import '../../sass/MagicLink.scss';
import useAuth from '../../hooks/useAuth';
@@ -43,7 +44,7 @@ const HandleAuth = (props) => {
setIsLoaded(true);
}, [isMagicLinkValid, setIsLoaded, auth]);
- if (!isLoaded) return <div>Loading...</div>;
+ if (!isLoaded) return <Box display="flex" justifyContent="center" alignItems="center" height="100vh"><CircularProgress /></Box>;
const Delayed = ({ children, waitBeforeShow = 500 }) => {
const [isShown, setIsShown] = useState(false);
@@ -65,12 +66,12 @@ const HandleAuth = (props) => {
}
return (
- <div className="flex-container">
+ <Box className="flex-container">
<Delayed waitBeforeShow={1000}>
- <div>Sorry, the link is not valid anymore.</div>
+ <Typography variant="body1">Sorry, the link is not valid anymore.</Typography>
</Delayed>
{auth?.user && <Redirect to={loginRedirect} /> /* Redirect to /welcome */}
- </div>
+ </Box>
);
};
diff --git a/client/src/components/user-admin/EditUsers.js b/client/src/components/user-admin/EditUsers.js
index 1e5f72e93..e6b873f54 100644
--- a/client/src/components/user-admin/EditUsers.js
+++ b/client/src/components/user-admin/EditUsers.js
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import '../../sass/UserAdmin.scss';
-import { FormGroup, FormControlLabel, Switch } from '@mui/material'
+import { FormGroup, FormControlLabel, Switch, Box, Typography, Button, MenuItem, Select, List, ListItem, IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
// child of UserAdmin. Displays form to update users.
const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus }) => {
@@ -65,74 +66,68 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
}
return (
- <div className="edit-users">
- <div className="ua-row">
- <div className="user-display-column-left">Name:</div>
- <div className="user-display-column-right">{userName}</div>
- </div>
- <div className="ua-row">
- <div className="user-display-column-left">Email:</div>
- <div className="user-display-column-right">{userEmail}</div>
- </div>
- <div className="ua-row is-active-flex">
- <div className="user-is-active-column-left">Is Active:</div>
- <div className="is-active-flex">
- <span className="active-status">{isActive.toString()}</span>
+ <Box className="edit-users">
+ <Box className="ua-row">
+ <Box className="user-display-column-left">Name:</Box>
+ <Box className="user-display-column-right">{userName}</Box>
+ </Box>
+ <Box className="ua-row">
+ <Box className="user-display-column-left">Email:</Box>
+ <Box className="user-display-column-right">{userEmail}</Box>
+ </Box>
+ <Box className="ua-row is-active-flex">
+ <Box className="user-is-active-column-left">Is Active:</Box>
+ <Box className="is-active-flex">
+ <Typography className="active-status">{isActive.toString()}</Typography>
<FormGroup>
- <FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
+ <FormControlLabel control={<Switch checked={isActive} onClick={handleSetIsActive} />} />
</FormGroup>
- </div>
- </div>
- <div className="ua-row">
- <div className="user-display-column-left">Projects:</div>
- <div className="user-display-column-right">
- <ul className="project-list">
- {userProjectsToDisplay.map((result) => {
- return (
- <li key={`remove_${result[0]}`}>
- {result[1]}
- <button
- type="button"
- className="button-remove"
- onClick={() => handleRemoveProject(result[0])}
- >
- (remove)
- </button>
- </li>
- );
- })}
- </ul>
- </div>
- </div>
- <div>
+ </Box>
+ </Box>
+ <Box className="ua-row">
+ <Box className="user-display-column-left">Projects:</Box>
+ <Box className="user-display-column-right">
+ <List className="project-list">
+ {userProjectsToDisplay.map((result) => (
+ <ListItem key={`remove_${result[0]}`} secondaryAction={
+ <IconButton edge="end" aria-label="delete" onClick={() => handleRemoveProject(result[0])}>
+ <DeleteIcon />
+ </IconButton>
+ }>
+ {result[1]}
+ </ListItem>
+ ))}
+ </List>
+ </Box>
+ </Box>
+ <Box>
<form onSubmit={onSubmit}>
- <select
+ <Select
className="project-select"
value={projectValue}
onChange={(event) => {
setProjectValue(event.target.value);
}}
+ displayEmpty
>
- <option value="default">Select a project..</option>
- {activeProjects.map((result) => {
- return (
- <option key={`select_${result[0]}`} value={result[0]}>
- {result[1]}
- </option>
- );
- })}
- </select>
- <button className="button-add" type="submit">
+ <MenuItem value="default">Select a project..</MenuItem>
+ {activeProjects.map((result) => (
+ <MenuItem key={`select_${result[0]}`} value={result[0]}>
+ {result[1]}
+ </MenuItem>
+ ))}
+ </Select>
+ <Button className="button-add" type="submit" variant="contained" color="primary">
Add project
- </button>
+ </Button>
</form>
- <div>
- <button type="button" className="button-back" onClick={backToSearch}>
+ <Box>
+ <Button className="button-back" onClick={backToSearch} variant="outlined">
Back to search
- </button>
- </div>
- </div>
- </div>
+ </Button>
+ </Box>
+ </Box>
+ </Box>
);
};
From a10165a08f1a2d8bc0b0f60cc93491015fd7998c Mon Sep 17 00:00:00 2001
From: nora-zajzon <nzajzon@ucsd.edu>
Date: Sun, 7 Jul 2024 10:29:01 -0700
Subject: [PATCH 2/3] Updated HTML components to MUI components
---
.../src/components/dashboard/AddTeamMember.js | 33 ++++++++++---------
1 file changed, 17 insertions(+), 16 deletions(-)
diff --git a/client/src/components/dashboard/AddTeamMember.js b/client/src/components/dashboard/AddTeamMember.js
index 61e8143d8..8dca61c9d 100644
--- a/client/src/components/dashboard/AddTeamMember.js
+++ b/client/src/components/dashboard/AddTeamMember.js
@@ -1,4 +1,5 @@
import React, { useState } from "react";
+import { Box, Button, TextField, Typography } from "@mui/material";
import "../../sass/AddTeamMember.scss";
const AddTeamMember = (props) => {
@@ -7,17 +8,17 @@ const AddTeamMember = (props) => {
const handleInputChange = (e) => setEmail(e.currentTarget.value);
return (
- <div className="flex-container">
- <div className="addmember-container">
+ <Box className="flex-container">
+ <Box className="addmember-container">
<form
className="form-add-member"
autoComplete="off"
onSubmit={(e) => props.addToTeamHandler(e, email)}
>
- <div className="form-row">
- <div className="form-input-text">
- <label htmlFor="email">Add team member:</label>
- <input
+ <Box className="form-row">
+ <Box className="form-input-text">
+ <TextField
+ label = "Add team member"
type="email"
name="email"
placeholder="Email Address"
@@ -27,22 +28,22 @@ const AddTeamMember = (props) => {
autoComplete="none"
required="required"
/>
- </div>
- </div>
+ </Box>
+ </Box>
- <div className="form-input-button">
- <button
+ <Box className="form-input-button">
+ <Button
type="submit"
className="addmember-button"
>
Add
- </button>
- </div>
+ </Button>
+ </Box>
</form>
- {props.isSuccess ? <p className="addmember-success">User Added</p> : null}
- <div className="addmember-warning">{props.isError ? props.errorMessage : null}</div>
- </div>
- </div>
+ {props.isSuccess && <Typography className="addmember-success">User Added</Typography>}
+ {props.isError && <Typography className="addmember-warning">{props.errorMessage}</Typography>}
+ </Box>
+ </Box>
);
};
From 41584ddc837ee93c02b44f07a1bae30f40da15d9 Mon Sep 17 00:00:00 2001
From: nora-zajzon <nzajzon@ucsd.edu>
Date: Wed, 17 Jul 2024 09:57:39 -0700
Subject: [PATCH 3/3] Changed HTML to MUI components in editMeetingTimes.js
---
.../components/manageProjects/editMeetingTimes.js | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/client/src/components/manageProjects/editMeetingTimes.js b/client/src/components/manageProjects/editMeetingTimes.js
index 655fabb8b..bb23ff7ed 100644
--- a/client/src/components/manageProjects/editMeetingTimes.js
+++ b/client/src/components/manageProjects/editMeetingTimes.js
@@ -6,6 +6,8 @@ import { findNextOccuranceOfDay } from './utilities/findNextDayOccuranceOfDay';
import { addDurationToTime } from './utilities/addDurationToTime';
import { timeConvertFromForm } from './utilities/timeConvertFromForm';
import validateEventForm from './utilities/validateEventForm';
+import { IconButton, Box } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
// This component displays current meeting times for selected project and offers the option to edit those times.
const EditMeetingTimes = ({
@@ -92,17 +94,15 @@ const EditMeetingTimes = ({
};
return (
- <div>
- <button
- type="button"
- className="meeting-cancel-button"
+ <Box>
+ <IconButton
onClick={() => {
setFormErrors(null);
setSelectedEvent(null);
}}
>
- X
- </button>
+ <CloseIcon />
+ </IconButton>
{selectedEvent && (
<EditableMeeting
key={selectedEvent.event_id}
@@ -120,7 +120,7 @@ const EditMeetingTimes = ({
handleEventDelete={handleEventDelete}
/>
)}
- </div>
+ </Box>
);
};
export default EditMeetingTimes;
\ No newline at end of file