initial code splitting

This commit is contained in:
aj 2020-01-26 20:33:09 +00:00
parent fbd7c10ae9
commit 47f758bd90
10 changed files with 70 additions and 63 deletions

View File

@ -5,7 +5,7 @@
"private": true, "private": true,
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js --env production",
"devbuild": "webpack --config webpack.dev.js" "devbuild": "webpack --config webpack.dev.js"
}, },
"repository": { "repository": {

View File

@ -1,5 +1,4 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios');
class Index extends Component{ class Index extends Component{
@ -11,13 +10,6 @@ class Index extends Component{
render(){ render(){
return ( return (
<table className="app-table"> <table className="app-table">
<thead>
<tr>
<th>
<h1 className="center-text text-no-select">Music Tools</h1>
</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}> <td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}>

View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; import { BrowserRouter as Route, Link} from "react-router-dom";
import Count from "./Count.js"; import Count from "./Count.js";

View File

@ -1,13 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
import Index from "./Index/Index.js";
import Maths from "./Maths/Maths.js";
import Playlists from "./Playlist/Playlists.js";
import PlaylistView from "./Playlist/View/View.js";
import Settings from "./Settings/Settings.js";
import Admin from "./Admin/Admin.js";
import NotFound from "./Error/NotFound.js"; import NotFound from "./Error/NotFound.js";
import showMessage from "./Toast.js" import showMessage from "./Toast.js"
@ -33,6 +26,13 @@ import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspac
const axios = require('axios'); const axios = require('axios');
const LazyIndex = React.lazy(() => import("./Index/Index"))
const LazyMaths = React.lazy(() => import("./Maths/Maths"))
const LazyPlaylists = React.lazy(() => import("./Playlist/Playlists"))
const LazyPlaylistView = React.lazy(() => import("./Playlist/View/View"))
const LazySettings = React.lazy(() => import("./Settings/Settings"))
const LazyAdmin = React.lazy(() => import("./Admin/Admin"))
class MusicTools extends Component { class MusicTools extends Component {
constructor(props){ constructor(props){
@ -88,7 +88,7 @@ class MusicTools extends Component {
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
<Typography variant="h6"> <Typography variant="h6">
Music Tools <Link to='/app/playlists' style={{textDecoration: 'none'}}>Music Tools</Link>
</Typography> </Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
@ -137,25 +137,28 @@ class MusicTools extends Component {
</List> </List>
</Drawer> </Drawer>
</ThemeProvider> </ThemeProvider>
<div className="pad-12"> <div className="full-width">
<Switch> <Switch>
<Route path="/app" exact component={Index} /> <React.Suspense fallback={<LoadingMessage/>}>
<Route path="/app/playlists" component={Playlists} /> <Route path="/app" exact component={LazyIndex} />
<Route path="/app/maths" component={Maths} /> <Route path="/app/playlists" component={LazyPlaylists} />
<Route path="/app/settings" component={Settings} /> <Route path="/app/maths" component={LazyMaths} />
{ this.state.type == 'admin' && <Route path="/app/admin" component={Admin} /> } <Route path="/app/settings" component={LazySettings} />
<Route path='/app/playlist/:name' component={PlaylistView} /> { this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }
<Route path='/app/playlist/:name' component={LazyPlaylistView} />
</React.Suspense>
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
</div> </div>
</div> </div>
<footer>
<a href="https://github.com/Sarsoo/spotify-web">view source code</a>
</footer>
</Router> </Router>
); );
} }
} }
function LoadingMessage(props) {
return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
}
export default MusicTools; export default MusicTools;

View File

@ -1,5 +1,4 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { BrowserRouter as Redirect } from "react-router-dom";
const axios = require('axios'); const axios = require('axios');
import showMessage from "../Toast.js" import showMessage from "../Toast.js"

View File

@ -1,6 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
const axios = require('axios');
import PlaylistsView from "./PlaylistsView.js" import PlaylistsView from "./PlaylistsView.js"
import NewPlaylist from "./NewPlaylist.js"; import NewPlaylist from "./NewPlaylist.js";

View File

@ -95,18 +95,18 @@ class PlaylistsView extends Component {
render() { render() {
const table = <Table playlists={this.state.playlists} const grid = <PlaylistGrid playlists={this.state.playlists}
handleRunPlaylist={this.handleRunPlaylist} handleRunPlaylist={this.handleRunPlaylist}
handleDeletePlaylist={this.handleDeletePlaylist} handleDeletePlaylist={this.handleDeletePlaylist}
handleRunAll={this.handleRunAll}/>; handleRunAll={this.handleRunAll}/>;
const loadingMessage = <p className="center-text">loading...</p>; const loadingMessage = <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
return this.state.isLoading ? loadingMessage : table; return this.state.isLoading ? loadingMessage : grid;
} }
} }
function Table(props){ function PlaylistGrid(props){
return ( return (
<ThemeProvider theme={GlobalTheme}> <ThemeProvider theme={GlobalTheme}>
<Grid container <Grid container
@ -120,7 +120,7 @@ function Table(props){
<Typography variant="h5" component="h2">No Playlists</Typography> <Typography variant="h5" component="h2">No Playlists</Typography>
</Grid> </Grid>
) : ( ) : (
props.playlists.map((playlist) => <Row playlist={ playlist } props.playlists.map((playlist) => <PlaylistCard playlist={ playlist }
handleRunPlaylist={props.handleRunPlaylist} handleRunPlaylist={props.handleRunPlaylist}
handleDeletePlaylist={props.handleDeletePlaylist} handleDeletePlaylist={props.handleDeletePlaylist}
key={ playlist.name }/>) key={ playlist.name }/>)
@ -131,24 +131,23 @@ function Table(props){
); );
} }
function Row(props){ function PlaylistCard(props){
return ( return (
<Grid item xs> <Grid item xs>
<Card> <Card>
<CardContent> <CardContent>
<Typography variant="h5" component="h2"> <Typography variant="h5" component="h2">
{ props.playlist.name } { props.playlist.name }
</Typography> </Typography>
</CardContent> </CardContent>
{/* <Button variant="contained" color="primary" component={Link} to={getPlaylistLink(props.playlist.name)}>{ props.playlist.name }</Button> */} <CardActions>
<CardActions> <ButtonGroup color="primary">
<ButtonGroup color="primary"> <Button variant="contained" component={Link} to={getPlaylistLink(props.playlist.name)}>View</Button>
<Button variant="contained" color="primary" component={Link} to={getPlaylistLink(props.playlist.name)}>View</Button> <Button variant="contained" onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</Button>
<Button variant="contained" color="primary" onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</Button> <Button variant="contained" onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</Button>
<Button variant="contained" color="primary" onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</Button> </ButtonGroup>
</ButtonGroup> </CardActions>
</CardActions> </Card>
</Card>
</Grid> </Grid>
); );
} }

View File

@ -2,7 +2,8 @@ import React, { Component } from "react";
const axios = require('axios'); const axios = require('axios');
import showMessage from "../../Toast.js" import showMessage from "../../Toast.js"
import PieChart from "../../Maths/PieChart.js";
const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
class Count extends Component { class Count extends Component {
@ -63,7 +64,9 @@ class Count extends Component {
} }
render() { render() {
const loadingMessage = <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
return ( return (
<React.Suspense fallback={<loadingMessage/>}>
<tbody> <tbody>
<tr> <tr>
<td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td> <td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td>
@ -79,7 +82,7 @@ class Count extends Component {
</tr> </tr>
<tr> <tr>
<td> <td>
<PieChart data={[{ <LazyPieChart data={[{
"label": `${this.state.playlist.name} Tracks`, "label": `${this.state.playlist.name} Tracks`,
"value": this.state.playlist.lastfm_stat_percent "value": this.state.playlist.lastfm_stat_percent
},{ },{
@ -91,7 +94,7 @@ class Count extends Component {
</tr> </tr>
<tr> <tr>
<td> <td>
<PieChart data={[{ <LazyPieChart data={[{
"label": `${this.state.playlist.name} Albums`, "label": `${this.state.playlist.name} Albums`,
"value": this.state.playlist.lastfm_stat_album_percent "value": this.state.playlist.lastfm_stat_album_percent
},{ },{
@ -103,7 +106,7 @@ class Count extends Component {
</tr> </tr>
<tr> <tr>
<td> <td>
<PieChart data={[{ <LazyPieChart data={[{
"label": `${this.state.playlist.name} Artists`, "label": `${this.state.playlist.name} Artists`,
"value": this.state.playlist.lastfm_stat_artist_percent "value": this.state.playlist.lastfm_stat_artist_percent
},{ },{
@ -119,6 +122,7 @@ class Count extends Component {
</td> </td>
</tr> </tr>
</tbody> </tbody>
</React.Suspense>
); );
} }
} }

View File

@ -1,9 +1,12 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; import { ThemeProvider, Typography } from "@material-ui/core";
const axios = require('axios'); import { BrowserRouter as Route, Link} from "react-router-dom";
import GlobalTheme from "../../Theme";
const LazyEdit = React.lazy(() => import("./Edit"))
const LazyCount = React.lazy(() => import("./Count"))
import Edit from "./Edit.js";
import Count from "./Count.js";
class View extends Component{ class View extends Component{
@ -25,12 +28,18 @@ class View extends Component{
</th> </th>
</tr> </tr>
</thead> </thead>
<Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} /> <React.Suspense fallback={<LoadingMessage/>}>
<Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} /> <Route path={`${this.props.match.url}/edit`} render={(props) => <LazyEdit {...props} name={this.props.match.params.name}/>} />
<Route path={`${this.props.match.url}/count`} render={(props) => <LazyCount {...props} name={this.props.match.params.name}/>} />
</React.Suspense>
</table> </table>
); );
} }
} }
function LoadingMessage(props) {
return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
}
export default View; export default View;

View File

@ -27,7 +27,9 @@ module.exports = {
], ],
resolve: { extensions: ["*", ".js", ".jsx"] }, resolve: { extensions: ["*", ".js", ".jsx"] },
output: { output: {
filename: '[name].bundle.js', filename: '[name].bundle.js',
path: path.resolve(__dirname, 'build/js') chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'build/js'),
publicPath: '/build/js/'
} }
}; };