fiddling with upgrading react

package.json

@@ -19,13 +19,16 @@
   },
   "homepage": "https://github.com/Sarsoo/Mixonomer#readme",
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.3",
+    "@mui/material": "^6.1.3",
+    "@mui/styles": "^6.1.3",
     "axios": "^1.7.2",
     "chart.js": "^4.4.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",

src/js/Admin/AdminRouter.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Route, Link, Switch } from "react-router-dom";
-import { Paper, Tabs, Tab} from '@material-ui/core';
+import { Paper, Tabs, Tab} from '@mui/material';
 
 
 import Lock from "./Lock.js";

src/js/Admin/Functions.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import showMessage from "../Toast.js"
-import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@material-ui/core";
+import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@mui/material";
 
 /**
  * Admin functions card component

src/js/Admin/Lock.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, Button, CardActions, CardContent, Typography, Grid } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 import showMessage from "../Toast.js"
 

src/js/Admin/Tasks.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../Toast.js"
 

src/js/Index/Index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { Card, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, CardContent, Typography, Grid } from '@mui/material';
 
 /**
  * Into card for the home page

src/js/MusicTools.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, Link, Switch } from "react-router-dom";
 
 import NotFound from "./Error/NotFound.js";
 import Progress from "./Util/circularProgress.js";
@@ -7,18 +7,20 @@ import showMessage from "./Toast.js";
 
 import GlobalTheme from './Theme.js';
 
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/styles';
 
-import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@material-ui/core';
+import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@mui/material';
 
-import MenuIcon from '@material-ui/icons/Menu';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import HomeIcon from '@material-ui/icons/Home';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import HomeIcon from '@mui/icons-material/Home';
 
-import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork, Policy } from '@material-ui/icons'
+import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork, Policy } from '@mui/icons-material'
 
 const axios = require('axios');
 
+import Playlists from './Playlist/AllPlaylistsRouter';
+
 const LazyIndex = React.lazy(() => import(/* webpackChunkName: "index" */ "./Index/Index"))
 const LazyPlaylists = React.lazy(() => import(/* webpackChunkName: "allPlaylists" */ "./Playlist/AllPlaylistsRouter"))
 const LazyPlaylistView = React.lazy(() => import(/* webpackChunkName: "playlist" */ "./Playlist/View/PlaylistRouter"))
@@ -89,14 +91,20 @@ class MusicTools extends Component {
 
     render(){
         return (
-            <Router>
+            (<Router>
+                {/*<StyledEngineProvider injectFirst>*/}
                     <ThemeProvider theme={GlobalTheme}>
 
                         {/* TOP APP BAR */}
 
                         <AppBar position="sticky">
                             <Toolbar>
-                            <IconButton edge="start" color="inherit" aria-label="menu" onClick={(e) => this.setOpen(true)}>
+                                <IconButton
+                                    edge="start"
+                                    color="inherit"
+                                    aria-label="menu"
+                                    onClick={(e) => this.setOpen(true)}
+                                    size="large">
                                 <MenuIcon />
                                 </IconButton>
                                 <Typography variant="h6">
@@ -118,7 +126,7 @@ class MusicTools extends Component {
                             onClose={(e) => this.setOpen(false)}
                         >
                             <div>
-                            <IconButton onClick={(e) => this.setOpen(false)}>
+                                <IconButton onClick={(e) => this.setOpen(false)} size="large">
                                     <ChevronLeftIcon />
                                 </IconButton>
                             </div>
@@ -178,21 +186,22 @@ class MusicTools extends Component {
                         {/* ROUTER SWITCH */}
 
                         <div className="full-width">
-                        <Switch>
-                            <React.Suspense fallback={<Progress/>}>
-                                <Route path="/app" exact component={LazyIndex} />
-                                <Route path="/app/playlists" component={LazyPlaylists} />
-                                <Route path="/app/tags" component={LazyTags} />
-                                <Route path="/app/tag/:tag_id" component={LazyTag} />
-                                <Route path="/app/settings" component={LazySettings} />
-                                { this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }
-                                <Route path='/app/playlist/:name' component={LazyPlaylistView} />
-                            </React.Suspense>
-                            <Route component={NotFound} />
-                        </Switch>
+                            <Routes>
+                                {/*<React.Suspense fallback={<Progress/>}>*/}
+                                {/*    <Route path="/app" exact component={LazyIndex} />*/}
+                                    <Route path="/app/playlists" element={<Playlists/>} />
+                                    {/*<Route path="/app/tags" component={LazyTags} />*/}
+                                    {/*<Route path="/app/tag/:tag_id" component={LazyTag} />*/}
+                                    {/*<Route path="/app/settings" component={LazySettings} />*/}
+                                    {/*{ this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }*/}
+                                    {/*<Route path='/app/playlist/:name' component={LazyPlaylistView} />*/}
+                                {/*</React.Suspense>*/}
+                                {/*<Route component={NotFound} />*/}
+                            </Routes>
                         </div>
                     </ThemeProvider>
-            </Router>
+                {/*</StyledEngineProvider>*/}
+            </Router>)
         );
     }
 

src/js/Playlist/AllPlaylistsRouter.js

@@ -14,10 +14,10 @@ class Playlists extends Component {
                 <Switch>
 
                     {/* PLAYLIST LIST */}
-                    <Route exact path={`${this.props.match.url}/`} component={PlaylistsView} />
+                    <Route exact path={`${this.props.match.url}/`} element={PlaylistsView} />
 
                     {/* NEW PLAYLIST */}
-                    <Route path={`${this.props.match.url}/new`} component={NewPlaylist} />
+                    <Route path={`${this.props.match.url}/new`} element={NewPlaylist} />
                 </Switch>
             </div>
         );

src/js/Playlist/New.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../Toast.js"
 

src/js/Playlist/PlaylistsList.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
+import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@mui/material';
 const axios = require('axios');
 
 import showMessage from "../Toast.js"

src/js/Playlist/View/Count.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, Button, CardActions, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../../Toast.js"
 

src/js/Playlist/View/Edit.js

@@ -2,9 +2,9 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import { Card, Button, FormControl, TextField, InputLabel, Select, FormControlLabel, 
-    CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@material-ui/core';
-import { Delete } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+    CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@mui/material';
+import { Delete } from '@mui/icons-material';
+import { makeStyles } from '@mui/styles';
 
 import showMessage from "../../Toast.js";
 import Progress from "../../Util/circularProgress.js";

src/js/Playlist/View/PlaylistRouter.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
-import { Route, Link, Switch } from "react-router-dom";
-import { Paper, Tabs, Tab} from '@material-ui/core';
+import { Route, Link, Routes } from "react-router-dom";
+import { Paper, Tabs, Tab} from '@mui/material';
 
 
 import {Edit} from "./Edit.js";
@@ -49,14 +49,14 @@ class View extends Component{
                     <Tab label="Count" component={Link} to={`${this.props.match.url}/count`} />
                 </Tabs>
             </Paper>
-            <Switch>
+            <Routes>
 
                 {/* VIEW/EDIT */}
                 <Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} />
                 
                 {/* STATS */}
                 <Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
-            </Switch>
+            </Routes>
             </div>
         );
     }

src/js/Settings/ChangePassword.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@material-ui/core";
+import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@mui/material";
 
 import showMessage from "../Toast.js"
 

src/js/Settings/LastFM.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@material-ui/core";
+import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@mui/material";
 
 import showMessage from "../Toast.js"
 

src/js/Settings/SettingsRouter.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Route, Link, Switch } from "react-router-dom";
-import { Paper, Tabs, Tab} from '@material-ui/core';
+import { Paper, Tabs, Tab} from '@mui/material';
 
 import ChangePassword from "./ChangePassword.js";
 import SpotifyLink from "./SpotifyLink.js";

src/js/Settings/SpotifyLink.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardContent, CardActions, Typography } from "@material-ui/core";
+import { Card, Button, CardContent, CardActions, Typography } from "@mui/material";
 
 import showMessage from "../Toast.js"
 

src/js/Tag/New.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, TextField, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, Button, TextField, CardActions, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../Toast.js"
 

src/js/Tag/TagList.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
+import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@mui/material';
 
 const axios = require('axios');
 

src/js/Tag/View.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, ButtonGroup, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
-import { Delete, ExitToApp } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, Button, ButtonGroup, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@mui/material';
+import { Delete, ExitToApp } from '@mui/icons-material';
+import { makeStyles } from '@mui/styles';
 
 import showMessage from "../Toast.js";
 import Progress from "../Util/circularProgress.js"

src/js/Theme.js

@@ -1,6 +1,6 @@
-import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';
+import { createTheme, adaptV4Theme, responsiveFontSizes } from '@mui/material/styles';
 
-let GlobalTheme = createTheme({
+let GlobalTheme = createTheme(adaptV4Theme({
     root: {
         display: 'flex',
         flexDirection: 'column',
@@ -22,7 +22,7 @@ let GlobalTheme = createTheme({
         spacing: 5
     },
     palette: {
-        type: 'dark',
+        mode: 'dark',
         // https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0
         primary: {
             main: '#907FA4',
@@ -41,7 +41,7 @@ let GlobalTheme = createTheme({
     status: {
         danger: 'orange',
     }
-});
+}));
 GlobalTheme = responsiveFontSizes(GlobalTheme);
 
 export default GlobalTheme;

src/js/Util/circularProgress.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, CircularProgress } from '@material-ui/core';
+import { Grid, CircularProgress } from '@mui/material';
 
 function Progress (props) {
     return (

src/js/app.js

@@ -1,8 +1,20 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider, StyledEngineProvider, makeStyles } from '@mui/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
 
 import MusicTools from "./MusicTools";
 
+const theme = createTheme();
+
+const useStyles = makeStyles((theme) => {
+    root: {
+        // some CSS that accesses the theme
+    }
+});
+
 // ROOT file for bootstrapping the Mixonomer component and app
 
-ReactDOM.render(<MusicTools />, document.getElementById('react'));
+// ReactDOM.render(<MusicTools theme={theme} />, document.getElementById('react'));
+const root = createRoot(document.getElementById('react')); // createRoot(container!) if you use TypeScript
+root.render(<MusicTools theme={theme} />);