From 876a60939bec446fa0d21476d88599629fb0c3b8 Mon Sep 17 00:00:00 2001
From: jlsuh <joelleonardosuh@gmail.com>
Date: Fri, 20 Sep 2024 21:10:43 -0300
Subject: [PATCH] fix: upgrade to mui v6

---
 src/AppRouter.tsx               |  6 +++---
 src/components/ModeSelect.tsx   |  2 +-
 src/components/NavBar.tsx       |  7 ++++---
 src/components/StatusMarker.tsx | 13 ++++++++-----
 src/components/Subject.tsx      | 25 ++++++++++++++-----------
 src/components/SubjectGrid.tsx  |  3 +--
 src/components/SubjectStack.tsx | 14 ++++++++------
 src/context/PlanContext.ts      |  2 +-
 src/layout/PlanLayout.tsx       |  2 +-
 src/views/PlanView.tsx          | 19 ++++++++-----------
 10 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index adc5a14..8ac15c3 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -12,10 +12,10 @@ function AppRouter() {
   return (
     <Routes>
       {plans.map((plan) => (
-        <Route key={plan.id} path={`/${plan.id}`} element={<PlanPage />} />
+        <Route element={<PlanPage />} key={plan.id} path={`/${plan.id}`} />
       ))}
-      <Route path="/" element={<Navigate to={`/${id}`} />} />
-      <Route path="*" element={<Navigate to={`/${id}`} />} />
+      <Route element={<Navigate to={`/${id}`} />} path="/" />
+      <Route element={<Navigate to={`/${id}`} />} path="*" />
     </Routes>
   );
 }
diff --git a/src/components/ModeSelect.tsx b/src/components/ModeSelect.tsx
index c42ba3b..978219d 100644
--- a/src/components/ModeSelect.tsx
+++ b/src/components/ModeSelect.tsx
@@ -16,7 +16,7 @@ function ModeSelect({ subject }: { subject: SubjectProps }) {
 
   return (
     <FormControl fullWidth sx={{ mt: 1, mx: 1 }}>
-      <InputLabel variant="standard" htmlFor={`${subject.id}-input-label`}>
+      <InputLabel htmlFor={`${subject.id}-input-label`} variant="standard">
         Modalidad
       </InputLabel>
       <NativeSelect
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index aa8390b..080d299 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,6 +1,7 @@
 import { PlanSelect } from '@/components';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import { AppBar, Grid, IconButton, Toolbar, Typography } from '@mui/material';
+import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 function NavBar() {
   return (
@@ -15,10 +16,10 @@ function NavBar() {
           container
           sx={{
             alignItems: 'center',
+            flex: 'auto',
             justifyContent: { xs: 'center', sm: 'space-between' },
+            rowGap: 1,
           }}
-          style={{ flexFlow: 'wrap' }}
-          rowGap={1}
         >
           <Typography
             component="div"
diff --git a/src/components/StatusMarker.tsx b/src/components/StatusMarker.tsx
index dbf5c06..491f471 100644
--- a/src/components/StatusMarker.tsx
+++ b/src/components/StatusMarker.tsx
@@ -1,14 +1,17 @@
 import { PlanContext } from '@/context';
 import type { PlanContextProps, Status, SubjectProps } from '@/types';
 import { Box, Divider, Link } from '@mui/material';
+import { dividerClasses } from '@mui/material/Divider';
 import { useContext } from 'react';
 
 function StatusMarker({
-  status,
   levelSubjects,
+  renderDivider,
+  status,
 }: {
-  status: Status;
   levelSubjects: ReadonlyArray<SubjectProps>;
+  renderDivider: boolean;
+  status: Status;
 }) {
   const { updateStatuses } = useContext<PlanContextProps>(PlanContext);
 
@@ -20,20 +23,20 @@ function StatusMarker({
   return (
     <Box
       sx={{
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
         display: 'flex',
       }}
     >
       <Link
-        onClick={handleClickStatusMarker}
         component="button"
+        onClick={handleClickStatusMarker}
         underline="hover"
       >
         {status.name}
       </Link>
-      <Divider orientation="vertical" flexItem />
+      {renderDivider ? <Divider flexItem orientation="vertical" /> : null}
     </Box>
   );
 }
diff --git a/src/components/Subject.tsx b/src/components/Subject.tsx
index a27113f..ba7baa2 100644
--- a/src/components/Subject.tsx
+++ b/src/components/Subject.tsx
@@ -2,13 +2,8 @@ import { ModeSelect, StatusRadioGroup } from '@/components';
 import { PlanContext } from '@/context';
 import type { PlanContextProps, SubjectProps } from '@/types';
 import CircleIcon from '@mui/icons-material/Circle';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  Grid,
-  Typography,
-} from '@mui/material';
+import { Card, CardActions, CardContent, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import { useContext } from 'react';
 
 function Subject({ subject }: { subject: SubjectProps }) {
@@ -18,9 +13,16 @@ function Subject({ subject }: { subject: SubjectProps }) {
   const color = contextSubject.status.color;
 
   return (
-    <Grid item xs={12} sm={6} md={4} lg={3} xl={2}>
+    <Grid
+      size={{
+        xs: 12,
+        sm: 6,
+        md: 4,
+        lg: 3,
+        xl: 2,
+      }}
+    >
       <Card
-        variant="outlined"
         sx={{
           borderRadius: 0,
           display: 'flex',
@@ -29,12 +31,13 @@ function Subject({ subject }: { subject: SubjectProps }) {
           justifyContent: 'space-between',
           p: 2,
         }}
+        variant="outlined"
       >
         <CardContent
           sx={{
-            p: 0,
             display: 'flex',
             justifyContent: 'space-between',
+            p: 0,
           }}
         >
           <Typography component="h4" variant="h6">
@@ -42,9 +45,9 @@ function Subject({ subject }: { subject: SubjectProps }) {
           </Typography>
           <CircleIcon
             sx={{
+              color,
               fontSize: 24,
               ml: 1,
-              color,
             }}
           />
         </CardContent>
diff --git a/src/components/SubjectGrid.tsx b/src/components/SubjectGrid.tsx
index 57058a9..44a7015 100644
--- a/src/components/SubjectGrid.tsx
+++ b/src/components/SubjectGrid.tsx
@@ -1,6 +1,6 @@
 import { Subject } from '@/components';
 import type { SubjectProps } from '@/types';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 function SubjectGrid({
   levelSubjects,
@@ -10,7 +10,6 @@ function SubjectGrid({
   return (
     <Grid
       container
-      item
       sx={{
         display: 'flex',
         flexWrap: 'wrap',
diff --git a/src/components/SubjectStack.tsx b/src/components/SubjectStack.tsx
index e87c481..f1b3da6 100644
--- a/src/components/SubjectStack.tsx
+++ b/src/components/SubjectStack.tsx
@@ -3,13 +3,15 @@ import { PlanContext } from '@/context';
 import { statuses } from '@/data';
 import type { PlanContextProps } from '@/types';
 import { findPlanById, replaceWhiteSpace } from '@/utils';
-import { Box, Grid, Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import { useContext } from 'react';
 
 function SubjectStack() {
   const { contextPlan } = useContext<PlanContextProps>(PlanContext);
   const plan = findPlanById(contextPlan.id);
   const subjectsByLevel = plan.subjects;
+  const statusesMaxIndex = Object.values(statuses).length - 1;
 
   return (
     <Stack spacing={3}>
@@ -20,10 +22,10 @@ function SubjectStack() {
             key={`level-${index + 1}-grid`}
             sx={{
               flexDirection: 'column',
+              flexWrap: 'nowrap',
             }}
           >
             <Grid
-              item
               sx={{
                 alignItems: 'baseline',
                 display: 'flex',
@@ -32,22 +34,22 @@ function SubjectStack() {
               }}
             >
               <Box>
-                <Typography variant="h3" sx={{ ml: 1 }}>
+                <Typography sx={{ ml: 1 }} variant="h3">
                   {index + 1}° año
                 </Typography>
               </Box>
               <Grid
-                item
                 sx={{ display: 'flex', flexWrap: 'wrap', userSelect: 'none' }}
               >
                 <Typography sx={{ mr: 0.5 }}>Marcar a todas como:</Typography>
-                {Object.values(statuses).map((status) => (
+                {Object.values(statuses).map((status, index) => (
                   <StatusMarker
                     key={`${replaceWhiteSpace(
                       `${status.name}-status-marker-${index}`,
                     )}`}
-                    status={status}
                     levelSubjects={levelSubjects}
+                    renderDivider={index < statusesMaxIndex}
+                    status={status}
                   />
                 ))}
               </Grid>
diff --git a/src/context/PlanContext.ts b/src/context/PlanContext.ts
index 63a45cd..7a80ea1 100644
--- a/src/context/PlanContext.ts
+++ b/src/context/PlanContext.ts
@@ -3,8 +3,8 @@ import { createContext } from 'react';
 
 const PlanContext = createContext<PlanContextProps>({
   contextPlan: {
-    id: '',
     branch: '',
+    id: '',
     subjects: {},
   },
   updateMode: () => {},
diff --git a/src/layout/PlanLayout.tsx b/src/layout/PlanLayout.tsx
index b9a53bf..f216ce1 100644
--- a/src/layout/PlanLayout.tsx
+++ b/src/layout/PlanLayout.tsx
@@ -7,7 +7,7 @@ function PlanLayout({ children }: { children: ReactNode }) {
     <>
       <NavBar />
       <Box component="main" sx={{ overflowWrap: 'anywhere' }}>
-        <Toolbar disableGutters sx={{ my: { xs: 8.5, sm: 0.5 } }} />
+        <Toolbar disableGutters sx={{ my: { xs: 8, sm: 2 } }} />
         {children}
       </Box>
     </>
diff --git a/src/views/PlanView.tsx b/src/views/PlanView.tsx
index 510c621..36b2a19 100644
--- a/src/views/PlanView.tsx
+++ b/src/views/PlanView.tsx
@@ -1,25 +1,22 @@
 import { ExportSVGButton, ShowDigraphButton, SubjectStack } from '@/components';
-import { Box, Grid } from '@mui/material';
+import { Box } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 function PlanView() {
   return (
-    <Box sx={{ m: 4 }}>
+    <Box sx={{ m: 4, mt: 0 }}>
       <Box
         sx={{
           display: 'flex',
-          justifyContent: 'flex-end',
-          mb: 2.5,
+          justifyContent: { xs: 'center', sm: 'end' },
+          py: 3.5,
         }}
       >
-        <Grid
-          container
-          spacing={1.5}
-          sx={{ justifyContent: { xs: 'center', sm: 'end' }, my: 1 }}
-        >
-          <Grid item>
+        <Grid container spacing={1.5} sx={{ justifyContent: { xs: 'center' } }}>
+          <Grid>
             <ShowDigraphButton />
           </Grid>
-          <Grid item>
+          <Grid>
             <ExportSVGButton />
           </Grid>
         </Grid>