From 8b2aba5d919e5377b277103ba84eabe982083268 Mon Sep 17 00:00:00 2001 From: Alexander Polynomdivision Date: Tue, 16 Oct 2018 14:25:18 +0200 Subject: [PATCH] feat: Move the loading panel to a component --- frontend/src/components/loading.tsx | 12 +++++- frontend/src/index.css | 2 +- frontend/src/pages/dashboard.tsx | 22 ++-------- frontend/src/pages/level.tsx | 20 +--------- frontend/src/pages/levelList.tsx | 21 ++-------- frontend/src/pages/login.tsx | 2 +- frontend/src/pages/review.tsx | 62 +++++++++++++++++------------ 7 files changed, 58 insertions(+), 83 deletions(-) diff --git a/frontend/src/components/loading.tsx b/frontend/src/components/loading.tsx index d467b45..042498e 100644 --- a/frontend/src/components/loading.tsx +++ b/frontend/src/components/loading.tsx @@ -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
; + return
+ + + + + +
; } } diff --git a/frontend/src/index.css b/frontend/src/index.css index 42001d7..f2a115f 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -21,7 +21,7 @@ body { } -.login-center { +.center { display: flex; justify-content: center; align-content: center; diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx index 6d26118..e3e8bb6 100644 --- a/frontend/src/pages/dashboard.tsx +++ b/frontend/src/pages/dashboard.tsx @@ -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 { render() { if (this.props.loading) { - return
- - - - - - - - - -
; + return ; } const small = window.matchMedia("(max-width: 700px)").matches; diff --git a/frontend/src/pages/level.tsx b/frontend/src/pages/level.tsx index 0529874..e1c3872 100644 --- a/frontend/src/pages/level.tsx +++ b/frontend/src/pages/level.tsx @@ -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
- - - - - - - - - - -
; + return ; } const vocabTypeToStr = { diff --git a/frontend/src/pages/levelList.tsx b/frontend/src/pages/levelList.tsx index aa6f33e..65018ce 100644 --- a/frontend/src/pages/levelList.tsx +++ b/frontend/src/pages/levelList.tsx @@ -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
- - - - - - - - - -
; + return ; } const small = window.matchMedia("(max-width: 700px)").matches; diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx index 2240bda..498762b 100644 --- a/frontend/src/pages/login.tsx +++ b/frontend/src/pages/login.tsx @@ -83,7 +83,7 @@ const LoginPageWithRouter = withRouter( }; return
-
+
Login diff --git a/frontend/src/pages/review.tsx b/frontend/src/pages/review.tsx index 09b6c12..1db083c 100644 --- a/frontend/src/pages/review.tsx +++ b/frontend/src/pages/review.tsx @@ -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
- - - - - - - - - - -
; + return ; } const { question, qtype } = this.props.current; @@ -439,6 +430,27 @@ const ReviewPageWithRouter = withRouter( this.helpDialog() ) : undefined } + + { }}> + Deine Vokabelliste ist leer + + + Du hast noch keine Vokabeln, die du wiederholen könntest. + + Vokabeln werden nach dem erfolgreichen beenden eines Levels + der Vokabelliste hinzugefügt + + + + + +