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

fixed playlist component loading

Browse Source
This commit is contained in:
aj 2020-01-27 21:40:23 +00:00
parent 47f758bd90
commit e2b2c4a16b
2 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,9 @@
import React, { Component } from "react";
import { ThemeProvider, Typography } from "@material-ui/core";
const axios = require('axios');
import showMessage from "../../Toast.js"
import GlobalTheme from "../../Theme";
const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
@ -64,9 +66,7 @@ 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>
@ -80,6 +80,7 @@ class Count extends Component {
<tr>
<td className="ui-text center-text text-no-select">Last Updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td>
</tr>
<React.Suspense fallback={<LoadingMessage/>}>
<tr>
<td>
<LazyPieChart data={[{
@ -121,10 +122,14 @@ class Count extends Component {
<button style={{width: "100%"}} className="button" onClick={this.updateStats}>Update</button>
</td>
</tr>
</React.Suspense>
</tbody>
</React.Suspense>
);
}
}
function LoadingMessage(props) {
return <tr><td><ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider></td></tr>;
}
export default Count;

20
src/js/Playlist/View/View.js
View File

@ -1,12 +1,8 @@
import React, { Component } from "react";
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 { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
import Edit from "./Edit.js";
import Count from "./Count.js";
class View extends Component{
@ -28,18 +24,12 @@ class View extends Component{
</th>
</tr>
</thead>
<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>
<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}/>} />
</table>
);
}
}
function LoadingMessage(props) {
return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
}
export default View;