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 * 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<{}> {
|
export default class Loader extends React.Component<{}> {
|
||||||
render() {
|
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;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
@ -6,13 +6,13 @@ import Grid from "@material-ui/core/Grid";
|
|||||||
import Typography from "@material-ui/core/Typography";
|
import Typography from "@material-ui/core/Typography";
|
||||||
import Button from "@material-ui/core/Button";
|
import Button from "@material-ui/core/Button";
|
||||||
import Paper from "@material-ui/core/Paper";
|
import Paper from "@material-ui/core/Paper";
|
||||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
|
||||||
|
|
||||||
import Scoreboard from "../components/scoreboard";
|
import Scoreboard from "../components/scoreboard";
|
||||||
import SummaryTable from "../components/SummaryTable";
|
import SummaryTable from "../components/SummaryTable";
|
||||||
|
import Loader from "../components/loading";
|
||||||
|
|
||||||
import { ILevel } from "../models/level";
|
import { ILevel } from "../models/level";
|
||||||
import { ILearner, TopTen } from "../models/learner";
|
import { TopTen } from "../models/learner";
|
||||||
import { IReviewMetadata } from "../models/review";
|
import { IReviewMetadata } from "../models/review";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
@ -41,23 +41,7 @@ export default class Dashboard extends React.Component<IProps> {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.loading) {
|
if (this.props.loading) {
|
||||||
return <div>
|
return <Loader />;
|
||||||
<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>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const small = window.matchMedia("(max-width: 700px)").matches;
|
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 { withRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import Loader from "../components/loading";
|
||||||
import VocabularyData from "../components/VocabularyData";
|
import VocabularyData from "../components/VocabularyData";
|
||||||
|
|
||||||
import { TrackerEvent } from "../models/tracker";
|
import { TrackerEvent } from "../models/tracker";
|
||||||
@ -146,24 +147,7 @@ const LevelPageWithRouter = withRouter(
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.loading) {
|
if (this.props.loading) {
|
||||||
return <div>
|
return <Loader />;
|
||||||
<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>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const vocabTypeToStr = {
|
const vocabTypeToStr = {
|
||||||
|
@ -8,7 +8,8 @@ import CardActions from '@material-ui/core/CardActions';
|
|||||||
import CardContent from '@material-ui/core/CardContent';
|
import CardContent from '@material-ui/core/CardContent';
|
||||||
import Paper from "@material-ui/core/Paper";
|
import Paper from "@material-ui/core/Paper";
|
||||||
import Snackbar from "@material-ui/core/Snackbar";
|
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";
|
import { withRouter } from "react-router-dom";
|
||||||
|
|
||||||
@ -52,23 +53,7 @@ const LevelListWithRouter = withRouter(
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.loading) {
|
if (this.props.loading) {
|
||||||
return <div>
|
return <Loader />;
|
||||||
<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>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const small = window.matchMedia("(max-width: 700px)").matches;
|
const small = window.matchMedia("(max-width: 700px)").matches;
|
||||||
|
@ -83,7 +83,7 @@ const LoginPageWithRouter = withRouter(
|
|||||||
};
|
};
|
||||||
|
|
||||||
return <div>
|
return <div>
|
||||||
<div className="login-center">
|
<div className="center">
|
||||||
<Paper className="paper">
|
<Paper className="paper">
|
||||||
<Typography variant="title">Login</Typography>
|
<Typography variant="title">Login</Typography>
|
||||||
<Grid container direction="column" spacing={8}>
|
<Grid container direction="column" spacing={8}>
|
||||||
|
@ -21,6 +21,7 @@ import CloseIcon from "@material-ui/icons/Close";
|
|||||||
|
|
||||||
import { withRouter } from "react-router-dom";
|
import { withRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import Loader from "../components/loading";
|
||||||
import VocabularyData from "../components/VocabularyData";
|
import VocabularyData from "../components/VocabularyData";
|
||||||
import {
|
import {
|
||||||
IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType
|
IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType
|
||||||
@ -34,7 +35,7 @@ import { trackAction } from "../api/tracker";
|
|||||||
import lev from "js-levenshtein";
|
import lev from "js-levenshtein";
|
||||||
import {
|
import {
|
||||||
LEVENSHTEIN_MAX_DISTANCE, MAX_ERROR_THRESHOLD,
|
LEVENSHTEIN_MAX_DISTANCE, MAX_ERROR_THRESHOLD,
|
||||||
REVIEW_HELP_MOD, BACKEND_URL
|
REVIEW_HELP_MOD
|
||||||
} from "../config.in";
|
} from "../config.in";
|
||||||
|
|
||||||
import { Queue } from "../utils/queue";
|
import { Queue } from "../utils/queue";
|
||||||
@ -59,6 +60,7 @@ interface IProps {
|
|||||||
popoverColor: string;
|
popoverColor: string;
|
||||||
popoverTextColor: string;
|
popoverTextColor: string;
|
||||||
showHelp: boolean;
|
showHelp: boolean;
|
||||||
|
modalShow: boolean;
|
||||||
|
|
||||||
setReviewDialog: (state: boolean) => void;
|
setReviewDialog: (state: boolean) => void;
|
||||||
setSummary: (state: boolean) => void;
|
setSummary: (state: boolean) => void;
|
||||||
@ -67,6 +69,7 @@ interface IProps {
|
|||||||
setReview: (curent: IReviewCard, meta: IReviewMetadata) => void;
|
setReview: (curent: IReviewCard, meta: IReviewMetadata) => void;
|
||||||
setLoading: (state: boolean) => void;
|
setLoading: (state: boolean) => void;
|
||||||
setShowHelp: (state: boolean) => void;
|
setShowHelp: (state: boolean) => void;
|
||||||
|
setModal: (state: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ReviewPageWithRouter = withRouter(
|
const ReviewPageWithRouter = withRouter(
|
||||||
@ -112,12 +115,7 @@ const ReviewPageWithRouter = withRouter(
|
|||||||
getVocab().then((res: IVocab[]) => {
|
getVocab().then((res: IVocab[]) => {
|
||||||
// Check if we received any vocabulary
|
// Check if we received any vocabulary
|
||||||
if (res.length === 0) {
|
if (res.length === 0) {
|
||||||
// TODO: Replace with a snackbar
|
this.openModal();
|
||||||
alert("Du hast noch keine Vokabeln in der Review Queue");
|
|
||||||
|
|
||||||
// Reset the button state
|
|
||||||
this.props.drawerButtonState(true);
|
|
||||||
this.props.history.push("/dashboard");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -148,6 +146,16 @@ const ReviewPageWithRouter = withRouter(
|
|||||||
this.props.setReviewDialog(false);
|
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 = () => {
|
cancelReview = () => {
|
||||||
this.closeDialog();
|
this.closeDialog();
|
||||||
|
|
||||||
@ -314,24 +322,7 @@ const ReviewPageWithRouter = withRouter(
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.loading) {
|
if (this.props.loading) {
|
||||||
return <div>
|
return <Loader />;
|
||||||
<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>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const { question, qtype } = this.props.current;
|
const { question, qtype } = this.props.current;
|
||||||
@ -439,6 +430,27 @@ const ReviewPageWithRouter = withRouter(
|
|||||||
this.helpDialog()
|
this.helpDialog()
|
||||||
) : undefined
|
) : 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
|
<Dialog
|
||||||
open={this.props.dialogOpen}
|
open={this.props.dialogOpen}
|
||||||
onClose={this.closeDialog}>
|
onClose={this.closeDialog}>
|
||||||
|
Reference in New Issue
Block a user