From 1c15c6653fbf1c8c1689f681e5a557e29349c710 Mon Sep 17 00:00:00 2001 From: Alexander Polynomdivision Date: Wed, 19 Sep 2018 20:30:42 +0200 Subject: [PATCH] feat: Replace Redirect with withRouter --- src/actions/index.ts | 10 +- src/components/app.tsx | 5 +- src/containers/LevelPage.ts | 6 +- src/containers/SummaryPage.ts | 21 +++ src/pages/level.tsx | 293 ++++++++++++++++------------------ src/pages/summary.tsx | 78 +++++---- src/reducers/index.ts | 11 -- 7 files changed, 203 insertions(+), 221 deletions(-) create mode 100644 src/containers/SummaryPage.ts diff --git a/src/actions/index.ts b/src/actions/index.ts index c0a01cf..245f8ea 100644 --- a/src/actions/index.ts +++ b/src/actions/index.ts @@ -52,18 +52,10 @@ export function setUser(user: IUser) { }; } -export const LEVEL_SET_REVIEW = "LEVEL_SET_REVIEW"; -export function setLevelReview(state: boolean) { - return { - type: LEVEL_SET_REVIEW, - state, - }; -}; - export const LEVEL_SET_LOOKEDAT = "LEVEL_SET_LOOKEDAT"; export function setLevelLookedAt(ids: number[]) { return { - type: LEVEL_SET_REVIEW, + type: LEVEL_SET_LOOKEDAT, lookedAt: ids, }; }; diff --git a/src/components/app.tsx b/src/components/app.tsx index f2729ca..43242db 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -10,7 +10,7 @@ import LoginPage from "../containers/LoginPage"; import LevelListPage from "../containers/LevelList"; import LevelPage from "../containers/LevelPage"; import ReviewPage from "../containers/Review"; -import SummaryPage from "../pages/summary"; +import SummaryPage from "../containers/SummaryPage"; import WelcomePage from "../pages/intro"; import Drawer from "../containers/Drawer"; @@ -309,8 +309,7 @@ export default class Application extends React.Component { isAuth={this.isAuthenticated} path="/review/summary" component={() => { - return + return }} /> diff --git a/src/containers/LevelPage.ts b/src/containers/LevelPage.ts index 128a450..cc898be 100644 --- a/src/containers/LevelPage.ts +++ b/src/containers/LevelPage.ts @@ -1,7 +1,7 @@ import { connect } from "react-redux"; import { - setDrawerButton, setLevelReview, setLevelLookedAt, + setDrawerButton, setLevelLookedAt, setLevelCurrentVocab, setLevelVocab, setLevelLoading } from "../actions"; @@ -10,12 +10,11 @@ import { IVocab } from "../models/vocab"; import LevelPage from "../pages/level"; const mapStateToProps = state => { - const { currentVocab, lookedAt, toReview, vocab, loading } = state.level; + const { currentVocab, lookedAt, vocab, loading } = state.level; return { currentVocab, lookedAt, - toReview, vocab, loading, }; @@ -24,7 +23,6 @@ const mapStateToProps = state => { const mapDispatchToProps = dispatch => { return { drawerButtonState: (state: boolean) => dispatch(setDrawerButton(state)), - setReview: (state: boolean) => dispatch(setLevelReview(state)), setLookedAt: (ids: number[]) => dispatch(setLevelLookedAt(ids)), setCurrentVocab: (vocab: IVocab) => dispatch(setLevelCurrentVocab(vocab)), setVocab: (vocab: IVocab[]) => dispatch(setLevelVocab(vocab)), diff --git a/src/containers/SummaryPage.ts b/src/containers/SummaryPage.ts new file mode 100644 index 0000000..2f91573 --- /dev/null +++ b/src/containers/SummaryPage.ts @@ -0,0 +1,21 @@ +import { connect } from "react-redux"; + +import { setDrawerButton } from "../actions"; + +import SummaryPage from "../pages/summary"; + +const mapStateToProps = state => { + return { + reviewMeta: state.lastReview, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + setDrawerButton: (state: boolean) => dispatch(setDrawerButton(state)), + }; +}; + +const SummaryPageContainer = connect(mapStateToProps, + mapDispatchToProps)(SummaryPage); +export default SummaryPageContainer; diff --git a/src/pages/level.tsx b/src/pages/level.tsx index d48217d..847d148 100644 --- a/src/pages/level.tsx +++ b/src/pages/level.tsx @@ -10,7 +10,7 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import CircularProgress from "@material-ui/core/CircularProgress"; -import { Redirect } from "react-router-dom"; +import { withRouter } from "react-router-dom"; import { IVocab } from "../models/vocab"; @@ -18,183 +18,170 @@ interface IProps { id: string; levelVocab: (id: string) => Promise; + history: any; + loading: boolean; setLoading: (state: boolean) => void; vocab: IVocab[]; setVocab: (vocab: IVocab[]) => void; setLookedAt: (ids: number[]) => void; setCurrentVocab: (vocab: IVocab) => void; - setReview: (state: boolean) => void; drawerButtonState: (state: boolean) => void; currentVocab: IVocab; lookedAt: number[]; - toReview: boolean; }; -export default class LevelPage extends React.Component { - private uid = 0; - // To prevent React from redrawing the vocabulary list and prematurely - // cancelling the animation - private uids: { [key: string]: string } = {}; +const LevelPageWithRouter = withRouter( + class LevelPage extends React.Component { + private uid = 0; + // To prevent React from redrawing the vocabulary list and prematurely + // cancelling the animation + private uids: { [key: string]: string } = {}; - componentDidMount() { - // Hide the drawer - this.props.drawerButtonState(false); + componentDidMount() { + // Hide the drawer + this.props.drawerButtonState(false); - // Fetch the vocabulary - this.props.setLoading(true); + // Fetch the vocabulary + this.props.setLoading(true); - // TODO: Error handling - this.props.levelVocab(this.props.id).then(vocab => { - this.props.setVocab(vocab); - this.props.setCurrentVocab(vocab[0]); - this.props.setLoading(false); - }); + // TODO: Error handling + this.props.levelVocab(this.props.id).then(vocab => { + this.props.setVocab(vocab); + this.props.setCurrentVocab(vocab[0]); + this.props.setLoading(false); + }); - } - - genUID = (vocab: IVocab): string => { - const { grundform } = vocab.latin; - if (grundform in this.uids) { - return this.uids[grundform]; - } else { - this.uids[grundform] = "LEVELPAGE" + this.uid++; - return this.uids[grundform]; } - } - renderVocabListItem = (vocab: IVocab): any => { - // Check if the vocab was already looked at - const lookedAt = this.props.lookedAt.find((el) => el === vocab.id) || vocab.id === 0; - - return { - // Prevent the user from using too much memory by always clicking on the elements - // Show the clicked at vocab word - - this.props.setCurrentVocab(vocab); - this.props.setLookedAt(lookedAt ? ( - this.props.lookedAt - ) : this.props.lookedAt.concat(vocab.id)); - }}> - - {`${vocab.latin.grundform} ${lookedAt ? "✔" : ""}`} - - ; - } - - toReview = () => { - const { vocab, lookedAt } = this.props; - // Only go to the review if all vocabulary item have been looked at - if (vocab.length === lookedAt.length) { - this.props.setReview(true); + genUID = (vocab: IVocab): string => { + const { grundform } = vocab.latin; + if (grundform in this.uids) { + return this.uids[grundform]; + } else { + this.uids[grundform] = "LEVELPAGE" + this.uid++; + return this.uids[grundform]; + } } - } - render() { - if (this.props.loading) { - return
- {/* - * This would be the case when the user presses the "to - * review" button. That is because we need the state of loading - * to be true, when this page gets called - * TODO:? - */} - { - this.props.toReview ? ( - - ) : undefined - } - - - - - - - + renderVocabListItem = (vocab: IVocab): any => { + // Check if the vocab was already looked at + const lookedAt = this.props.lookedAt.find((el) => el === vocab.id) || vocab.id === 0; + + return { + // Prevent the user from using too much memory by always clicking on the elements + // Show the clicked at vocab word + + this.props.setCurrentVocab(vocab); + this.props.setLookedAt(lookedAt ? ( + this.props.lookedAt + ) : this.props.lookedAt.concat(vocab.id)); + }}> + + {`${vocab.latin.grundform} ${lookedAt ? "✔" : ""}`} + + ; + } + + toReview = () => { + const { vocab, lookedAt, id } = this.props; + // Only go to the review if all vocabulary item have been looked at + if (vocab.length === lookedAt.length) { + this.props.setLoading(true); + this.props.history.push(`/review/level/${id}`); + } + } + + render() { + if (this.props.loading) { + return
+ + + + + + + + - -
; - } +
; + } - const { currentVocab } = this.props; - return
- - - - {this.props.vocab - .map(this.renderVocabListItem)} - {/* TODO*/} - - - Zur Übung + const { currentVocab } = this.props; + return
+ + + + {this.props.vocab + .map(this.renderVocabListItem)} + + + Zur Übung - - - - { - this.props.toReview ? ( - - ) : undefined - } - - - - - - - {currentVocab.latin.grundform} - - - {currentVocab.german.join(", ")} - - { - currentVocab.hint ? ( -
- - Tipp: - - - {currentVocab.hint} - -
- ) : undefined - } - { - currentVocab.mnemonic ? ( -
- - Eselsbrücke: - - - {currentVocab.mnemonic} - -
- ) : undefined - } - - {/*TODO: Maybe "next" and "prev" buttons?*/} - + + + + + + + + + + {currentVocab.latin.grundform} + + + {currentVocab.german.join(", ")} + + { + currentVocab.hint ? ( +
+ + Tipp: + + + {currentVocab.hint} + +
+ ) : undefined + } + { + currentVocab.mnemonic ? ( +
+ + Eselsbrücke: + + + {currentVocab.mnemonic} + +
+ ) : undefined + } + + {/*TODO: Maybe "next" and "prev" buttons?*/} + + - -
; +
; + } } -}; +); +export default LevelPageWithRouter; diff --git a/src/pages/summary.tsx b/src/pages/summary.tsx index 411a453..3d6d1cc 100644 --- a/src/pages/summary.tsx +++ b/src/pages/summary.tsx @@ -6,55 +6,51 @@ import Grid from "@material-ui/core/Grid"; import Button from "@material-ui/core/Button"; import SummaryTable from "../components/SummaryTable"; -import { Redirect } from "react-router-dom"; +import { withRouter } from "react-router-dom"; import { IReviewMetadata } from "../models/review"; interface IProps { - reviewMeta: () => IReviewMetadata; + history: any; + + reviewMeta: IReviewMetadata; + setDrawerButton: (state: boolean) => void; } -interface IState { - toDashboard: boolean; -} +// TODO: This stays at the default value +const SummaryPageWithRouter = withRouter( + class SummaryPage extends React.Component { + toDashboard = () => { + // Show the drawer button + this.props.setDrawerButton(true); -export default class SummaryPage extends React.Component { - constructor(props: any) { - super(props); + // Go to the dashboard + this.props.history.push("/dashboard"); + } - this.state = { - toDashboard: false, - }; - } - - render() { - return
- { - this.state.toDashboard ? ( - - ) : undefined - } - - - - Zusammenfassung - - - - - + + + - -
; + ; + } } -} +); +export default SummaryPageWithRouter; diff --git a/src/reducers/index.ts b/src/reducers/index.ts index 76e8593..0241a35 100644 --- a/src/reducers/index.ts +++ b/src/reducers/index.ts @@ -26,7 +26,6 @@ interface IState { level: { currentVocab: IVocab; lookedAt: number[]; - toReview: boolean; vocab: IVocab[]; loading: boolean; }; @@ -74,7 +73,6 @@ const initialState: IState = { level: { currentVocab: {} as IVocab, lookedAt: [0], - toReview: false, vocab: [], loading: true, }, @@ -137,15 +135,6 @@ export function LateinicusApp(state: IState = initialState, action: any) { return Object.assign({}, state, { user: action.user, }); - case Actions.LEVEL_SET_REVIEW: - return Object.assign({}, state, { - level: Object.assign({}, state.level, { - toReview: action.state, - // Make sure that we are in a "loading mode", when the page gets - // called the next time - loading: true, - }), - }); case Actions.LEVEL_SET_LOOKEDAT: return Object.assign({}, state, { level: Object.assign({}, state.level, {