Skip to content

migrate mui from v5 to v7 #2811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
junjun107 wants to merge 1 commit into
base: develop
Choose a base branch
from
+2,434 −3,240
Open

migrate mui from v5 to v7 #2811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,851 changes: 1,878 additions & 2,973 deletions client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 10 additions & 8 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mapbox/geo-viewport": "^0.4.1",
"@mui/icons-material": "^5.16.7",
"@mui/lab": "^5.0.0-alpha.113",
"@mui/material": "^5.16.7",
"@mui/x-data-grid": "^5.17.20",
"@mui/x-date-pickers": "^6.8.0",
"@mui/icons-material": "^7.0.0",
"@mui/material": "^7.0.0",
"@mui/system": "^7.0.0",
"@mui/utils": "^7.0.0",
"@mui/x-data-grid": "^7.29.9",
"@mui/x-date-pickers": "^7.29.4",
"@testing-library/dom": "^10.4.0",
"@turf/bbox": "^7.2.0",
"@types/mapbox-gl": "^3.4.0",
Expand All @@ -36,9 +37,9 @@
"formik": "^2.2.9",
"js-file-download": "^0.4.12",
"mapbox-gl": "^3.8.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.6",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-draggable": "4.4.6",
"react-gtm-module": "^2.0.11",
"react-helmet-async": "^1.3.0",
"react-map-gl": "^7.1.7",
Expand Down Expand Up @@ -86,6 +87,7 @@
"vite-tsconfig-paths": "^5.0.1"
},
"overrides": {
"react-is": "18.3.1",
"react-scripts": {
"nth-check": "^2.1.1",
"postcss": "^8.4.33",
Expand Down
7 changes: 3 additions & 4 deletions client/src/components/Account/ConfirmEmail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LoadingButton from "@mui/lab/LoadingButton";
import { Avatar, Box, TextField, Typography } from "@mui/material";
import { Avatar, Box, Button, TextField, Typography } from "@mui/material";
import Label from "components/Admin/ui/Label";
import { Formik, FormikProps } from "formik";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -105,7 +104,7 @@ const ConfirmEmail = () => {
sx={{ mt: 1, mb: 2 }}
/>
</Box>
<LoadingButton
<Button
variant="contained"
loading={isSubmitting}
type="submit"
Expand All @@ -114,7 +113,7 @@ const ConfirmEmail = () => {
disabled={isSubmitting || !(isValid && dirty)}
>
Re-send confirmation email
</LoadingButton>
</Button>
</form>
</PageWrapper>
);
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/Account/ForgotPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
container
spacing={2}
>
<Grid item xs={12}>
<Grid size={12}>
<Label id="email" label="Email" />
<TextField
type="email"
Expand All @@ -179,7 +179,7 @@ const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
/>
</Grid>

<Grid item xs={12}>
<Grid size={12}>
<Button
variant="contained"
type="submit"
Expand All @@ -189,7 +189,7 @@ const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
Send Password Reset Link
</Button>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Typography align="center">
<Link
href={`/admin/login/${values.email || ""}`}
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/Account/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const LoginForm = () => {
container
spacing={2}
>
<Grid item xs={12}>
<Grid size={12}>
<Label id="email" label="Email *" />
<TextField
autoComplete="email"
Expand All @@ -191,7 +191,7 @@ const LoginForm = () => {
value={values.email}
/>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Label id="password" label="Password" />
<PasswordInput
autoComplete="current-password"
Expand All @@ -206,7 +206,7 @@ const LoginForm = () => {
value={values.password}
/>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Box>
<Button
type="submit"
Expand All @@ -217,15 +217,15 @@ const LoginForm = () => {
</Button>
</Box>
</Grid>
<Grid item xs>
<Grid size="grow">
<Link
href={`/admin/forgotpassword/${values.email || ""}`}
variant="body2"
>
Forgot password?
</Link>
</Grid>
<Grid item>
<Grid>
<Link href="/admin/register" variant="body2">
Register
</Link>
Expand Down
46 changes: 38 additions & 8 deletions client/src/components/Account/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,22 @@ export default function Profile() {
<Container component="main" maxWidth="lg">
<form onSubmit={formik.handleSubmit}>
<Grid container spacing={{ sm: 1, md: 3 }} alignItems={"center"}>
<Grid item xs={4} sm={3} md={2}>
<Grid
size={{
xs: 4,
sm: 3,
md: 2
}}>
<Typography variant="h4" component="h4" color={headingText}>
First Name
</Typography>
</Grid>
<Grid item xs={8} sm={9} md={10}>
<Grid
size={{
xs: 8,
sm: 9,
md: 10
}}>
{!fields.firstName ? (
<Typography variant="h4" component="h4" color={bodyText}>
{user.firstName}
Expand Down Expand Up @@ -124,12 +134,22 @@ export default function Profile() {
</Grid>
</Grid>
<Grid container spacing={{ sm: 1, md: 3 }} alignItems={"center"}>
<Grid item xs={4} sm={3} md={2}>
<Grid
size={{
xs: 4,
sm: 3,
md: 2
}}>
<Typography variant="h4" component="h4" color={headingText}>
Last Name
</Typography>
</Grid>
<Grid item xs={8} sm={9} md={10}>
<Grid
size={{
xs: 8,
sm: 9,
md: 10
}}>
{!fields.lastName ? (
<Typography variant="h4" component="h4" color={bodyText}>
{user.lastName}
Expand Down Expand Up @@ -168,12 +188,22 @@ export default function Profile() {
</Grid>
</Grid>
<Grid container spacing={{ sm: 1, md: 3 }} alignItems={"center"}>
<Grid item xs={4} sm={3} md={2}>
<Grid
size={{
xs: 4,
sm: 3,
md: 2
}}>
<Typography variant="h4" component="h4" color={headingText}>
Email
</Typography>
</Grid>
<Grid item xs={8} sm={9} md={10}>
<Grid
size={{
xs: 8,
sm: 9,
md: 10
}}>
{!fields.emailID ? (
<Typography variant="h4" component="h4" color={bodyText}>
{user.email}
Expand Down Expand Up @@ -211,7 +241,7 @@ export default function Profile() {
</Grid>
{(fields.firstName || fields.lastName || fields.emailID) && (
<Grid container spacing={3}>
<Grid item>
<Grid>
<Button
sx={{ width: "100%" }}
type="submit"
Expand All @@ -222,7 +252,7 @@ export default function Profile() {
Save
</Button>
</Grid>
<Grid item>
<Grid>
<Button
size="small"
aria-label="cancel button"
Expand Down
20 changes: 14 additions & 6 deletions client/src/components/Account/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,11 @@ export default function Register() {
container
spacing={2}
>
<Grid item xs={12} sm={6}>
<Grid
size={{
xs: 12,
sm: 6
}}>
<Label id="firstName" label="First Name *" />
<TextField
autoComplete="fname"
Expand All @@ -149,7 +153,11 @@ export default function Register() {
value={values.firstName}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid
size={{
xs: 12,
sm: 6
}}>
<Label id="lastName" label="Last Name *" />
<TextField
required
Expand All @@ -165,7 +173,7 @@ export default function Register() {
error={touched.lastName && Boolean(errors.lastName)}
/>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Label id="email" label="Email" />
<TextField
type="email"
Expand All @@ -181,7 +189,7 @@ export default function Register() {
error={touched.email && Boolean(errors.email)}
/>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Label id="password" label="Password *" />
<PasswordInput
required
Expand All @@ -197,7 +205,7 @@ export default function Register() {
error={touched.password && Boolean(errors.password)}
/>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Label id="passwordConfirm" label="Confirm Password *" />
<PasswordInput
required
Expand Down Expand Up @@ -228,7 +236,7 @@ export default function Register() {
</Button>
</Box>
<Grid container justifyContent="center">
<Grid item>
<Grid>
<Link href="/admin/login" variant="body2">
Already have an account? Login
</Link>
Expand Down
44 changes: 30 additions & 14 deletions client/src/components/Admin/OpenTimeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,11 @@ const OpenTimeForm = ({
<div key={index}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Grid container spacing={1}>
<Grid item xs={8} sm={2}>
<Grid
size={{
xs: 8,
sm: 2
}}>
<FormControl variant="outlined" fullWidth>
<Select
id="interval-select"
Expand Down Expand Up @@ -163,7 +167,11 @@ const OpenTimeForm = ({
) : null}
</FormControl>
</Grid>
<Grid item xs={8} sm={2}>
<Grid
size={{
xs: 8,
sm: 2
}}>
<FormControl variant="outlined" fullWidth>
<Select
labelId="open-days-select-id"
Expand Down Expand Up @@ -204,7 +212,11 @@ const OpenTimeForm = ({
</FormControl>
</Grid>

<Grid item xs={8} sm={3}>
<Grid
size={{
xs: 8,
sm: 3
}}>
<DesktopTimePicker
value={
hour.open ? dayjs(hour.open, "HH:mm:ss") : null
Expand All @@ -230,7 +242,7 @@ const OpenTimeForm = ({
errorOpen && touchedOpen
? "Opening time is required"
: !isMobile && " ",
error: touchedOpen && errorOpen,
error: Boolean(touchedOpen && errorOpen),
},
}}
sx={{
Expand All @@ -253,7 +265,11 @@ const OpenTimeForm = ({
}}
/>
</Grid>
<Grid item xs={8} sm={3}>
<Grid
size={{
xs: 8,
sm: 3
}}>
<DesktopTimePicker
value={
hour.close
Expand Down Expand Up @@ -317,7 +333,7 @@ const OpenTimeForm = ({
: !isMobile && " ",
error:
!!closeTimeErrorss[index] ||
(errorClose && touchedClose),
Boolean(errorClose && touchedClose),
},
}}
sx={{
Expand All @@ -342,11 +358,11 @@ const OpenTimeForm = ({
</Grid>

<Grid
item
xs={2}
sm={1}
sx={{ display: "flex", alignItems: "center" }}
>
size={{
xs: 2,
sm: 1
}}>
<IconButton
icon="cancel"
color="error"
Expand All @@ -356,11 +372,11 @@ const OpenTimeForm = ({
/>
</Grid>
<Grid
item
xs={2}
sm={1}
sx={{ display: "flex", alignItems: "center" }}
>
size={{
xs: 2,
sm: 1
}}>
<IconButton
icon="copy"
color="primary"
Expand Down
Loading
Loading