feat: Move the loading panel to a component

This commit is contained in:
Alexander Polynomdivision 2018-10-16 14:25:18 +02:00
parent e9d7c156cc
commit 8b2aba5d91
7 changed files with 58 additions and 83 deletions

View File

@ -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>;
}
}

View File

@ -21,7 +21,7 @@ body {
}
.login-center {
.center {
display: flex;
justify-content: center;
align-content: center;

View File

@ -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;

View File

@ -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 = {

View File

@ -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;

View File

@ -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}>

View File

@ -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}>