sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

initial code splitting

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -5,7 +5,7 @@
"private": true,
"scripts": {
"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"
},
"repository": {

8
src/js/Index/Index.js
View File

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

2
src/js/Maths/Maths.js
View File

@ -1,5 +1,5 @@
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";

39
src/js/MusicTools.js
View File

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

1
src/js/Playlist/NewPlaylist.js
View File

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

1
src/js/Playlist/Playlists.js
View File

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

41
src/js/Playlist/PlaylistsView.js
View File

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

12
src/js/Playlist/View/Count.js
View File

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

21
src/js/Playlist/View/View.js
View File

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

6
webpack.common.js
View File

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