feat: Move the loading panel to a component
This commit is contained in:
parent
e9d7c156cc
commit
8b2aba5d91
@ -1,7 +1,17 @@
|
||||
import * as React from "react";
|
||||
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
|
||||
export default class Loader extends React.Component<{}> {
|
||||
render() {
|
||||
return <div className="loader" />;
|
||||
return <div className="center">
|
||||
<Paper className="paper">
|
||||
<Grid container direction="column" spacing={8}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
</Paper>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
@ -21,7 +21,7 @@ body {
|
||||
|
||||
}
|
||||
|
||||
.login-center {
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
@ -6,13 +6,13 @@ import Grid from "@material-ui/core/Grid";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
|
||||
import Scoreboard from "../components/scoreboard";
|
||||
import SummaryTable from "../components/SummaryTable";
|
||||
import Loader from "../components/loading";
|
||||
|
||||
import { ILevel } from "../models/level";
|
||||
import { ILearner, TopTen } from "../models/learner";
|
||||
import { TopTen } from "../models/learner";
|
||||
import { IReviewMetadata } from "../models/review";
|
||||
|
||||
interface IProps {
|
||||
@ -41,23 +41,7 @@ export default class Dashboard extends React.Component<IProps> {
|
||||
|
||||
render() {
|
||||
if (this.props.loading) {
|
||||
return <div>
|
||||
<Grid
|
||||
container
|
||||
spacing={0}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
style={{ minHeight: '100vh' }}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className="paper">
|
||||
<Grid container direction="column" spacing={8}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>;
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
const small = window.matchMedia("(max-width: 700px)").matches;
|
||||
|
@ -18,6 +18,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
import Loader from "../components/loading";
|
||||
import VocabularyData from "../components/VocabularyData";
|
||||
|
||||
import { TrackerEvent } from "../models/tracker";
|
||||
@ -146,24 +147,7 @@ const LevelPageWithRouter = withRouter(
|
||||
|
||||
render() {
|
||||
if (this.props.loading) {
|
||||
return <div>
|
||||
<Grid
|
||||
container
|
||||
spacing={0}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
style={{ minHeight: '100vh' }}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className="paper">
|
||||
<Grid container direction="column" spacing={8}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</div>;
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
const vocabTypeToStr = {
|
||||
|
@ -8,7 +8,8 @@ import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Snackbar from "@material-ui/core/Snackbar";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
|
||||
import Loader from "../components/loading";
|
||||
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
@ -52,23 +53,7 @@ const LevelListWithRouter = withRouter(
|
||||
|
||||
render() {
|
||||
if (this.props.loading) {
|
||||
return <div>
|
||||
<Grid
|
||||
container
|
||||
spacing={0}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
style={{ minHeight: '100vh' }}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className="paper">
|
||||
<Grid container direction="column" spacing={8}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>;
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
const small = window.matchMedia("(max-width: 700px)").matches;
|
||||
|
@ -83,7 +83,7 @@ const LoginPageWithRouter = withRouter(
|
||||
};
|
||||
|
||||
return <div>
|
||||
<div className="login-center">
|
||||
<div className="center">
|
||||
<Paper className="paper">
|
||||
<Typography variant="title">Login</Typography>
|
||||
<Grid container direction="column" spacing={8}>
|
||||
|
@ -21,6 +21,7 @@ import CloseIcon from "@material-ui/icons/Close";
|
||||
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
import Loader from "../components/loading";
|
||||
import VocabularyData from "../components/VocabularyData";
|
||||
import {
|
||||
IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType
|
||||
@ -34,7 +35,7 @@ import { trackAction } from "../api/tracker";
|
||||
import lev from "js-levenshtein";
|
||||
import {
|
||||
LEVENSHTEIN_MAX_DISTANCE, MAX_ERROR_THRESHOLD,
|
||||
REVIEW_HELP_MOD, BACKEND_URL
|
||||
REVIEW_HELP_MOD
|
||||
} from "../config.in";
|
||||
|
||||
import { Queue } from "../utils/queue";
|
||||
@ -59,6 +60,7 @@ interface IProps {
|
||||
popoverColor: string;
|
||||
popoverTextColor: string;
|
||||
showHelp: boolean;
|
||||
modalShow: boolean;
|
||||
|
||||
setReviewDialog: (state: boolean) => void;
|
||||
setSummary: (state: boolean) => void;
|
||||
@ -67,6 +69,7 @@ interface IProps {
|
||||
setReview: (curent: IReviewCard, meta: IReviewMetadata) => void;
|
||||
setLoading: (state: boolean) => void;
|
||||
setShowHelp: (state: boolean) => void;
|
||||
setModal: (state: boolean) => void;
|
||||
}
|
||||
|
||||
const ReviewPageWithRouter = withRouter(
|
||||
@ -112,12 +115,7 @@ const ReviewPageWithRouter = withRouter(
|
||||
getVocab().then((res: IVocab[]) => {
|
||||
// Check if we received any vocabulary
|
||||
if (res.length === 0) {
|
||||
// TODO: Replace with a snackbar
|
||||
alert("Du hast noch keine Vokabeln in der Review Queue");
|
||||
|
||||
// Reset the button state
|
||||
this.props.drawerButtonState(true);
|
||||
this.props.history.push("/dashboard");
|
||||
this.openModal();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -148,6 +146,16 @@ const ReviewPageWithRouter = withRouter(
|
||||
this.props.setReviewDialog(false);
|
||||
}
|
||||
|
||||
openModal = () => {
|
||||
this.props.setModal(true);
|
||||
}
|
||||
closeModal = () => {
|
||||
// Reset the button state
|
||||
this.props.setModal(false);
|
||||
this.props.drawerButtonState(true);
|
||||
this.props.history.push("/dashboard");
|
||||
}
|
||||
|
||||
cancelReview = () => {
|
||||
this.closeDialog();
|
||||
|
||||
@ -314,24 +322,7 @@ const ReviewPageWithRouter = withRouter(
|
||||
|
||||
render() {
|
||||
if (this.props.loading) {
|
||||
return <div>
|
||||
<Grid
|
||||
container
|
||||
spacing={0}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
style={{ minHeight: '100vh' }}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className="paper">
|
||||
<Grid container direction="column" spacing={8}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</div>;
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
const { question, qtype } = this.props.current;
|
||||
@ -439,6 +430,27 @@ const ReviewPageWithRouter = withRouter(
|
||||
this.helpDialog()
|
||||
) : undefined
|
||||
}
|
||||
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={() => { }}>
|
||||
<DialogTitle>Deine Vokabelliste ist leer</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Du hast noch keine Vokabeln, die du wiederholen könntest.
|
||||
|
||||
Vokabeln werden nach dem erfolgreichen beenden eines Levels
|
||||
der Vokabelliste hinzugefügt
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={this.closeModal}
|
||||
color="primary">
|
||||
Verstanden
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
open={this.props.dialogOpen}
|
||||
onClose={this.closeDialog}>
|
||||
|
Reference in New Issue
Block a user