PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Replace Redirect with withRouter

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-09-19 20:30:42 +02:00
parent 286927663a
commit 1c15c6653f
7 changed files with 203 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/actions/index.ts
View File

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

5
src/components/app.tsx
View File

@ -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<IProps> {
isAuth={this.isAuthenticated}
path="/review/summary"
component={() => {
return <SummaryPage
reviewMeta={this.getLastReview} />
return <SummaryPage />
}} />
</div>
</div >

6
src/containers/LevelPage.ts
View File

@ -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)),

21
src/containers/SummaryPage.ts Normal file
View File

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

35
src/pages/level.tsx
View File

@ -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,20 +18,21 @@ interface IProps {
id: string;
levelVocab: (id: string) => Promise<IVocab[]>;
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<IProps> {
const LevelPageWithRouter = withRouter(
class LevelPage extends React.Component<IProps> {
private uid = 0;
// To prevent React from redrawing the vocabulary list and prematurely
// cancelling the animation
@ -84,27 +85,17 @@ export default class LevelPage extends React.Component<IProps> {
}
toReview = () => {
const { vocab, lookedAt } = this.props;
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.setReview(true);
this.props.setLoading(true);
this.props.history.push(`/review/level/${id}`);
}
}
render() {
if (this.props.loading) {
return <div>
{/*
* 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 ? (
<Redirect to={`/review/level/${this.props.id}`} />
) : undefined
}
<Grid
container
spacing={0}
@ -131,7 +122,6 @@ export default class LevelPage extends React.Component<IProps> {
<List>
{this.props.vocab
.map(this.renderVocabListItem)}
{/* TODO*/}
<ListItem button onClick={this.toReview}>
<ListItemText>
Zur Übung
@ -139,11 +129,6 @@ export default class LevelPage extends React.Component<IProps> {
</ListItem>
</List>
</Grid>
{
this.props.toReview ? (
<Redirect to={`/review/level/${this.props.id}`} />
) : undefined
}
<Grid item lg={7} xs={9}>
<Grid container direction="column">
<Grid item style={{ margin: 12 }}>
@ -197,4 +182,6 @@ export default class LevelPage extends React.Component<IProps> {
</Grid>
</div>;
}
};
}
);
export default LevelPageWithRouter;

40
src/pages/summary.tsx
View File

@ -6,34 +6,30 @@ 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<IProps> {
toDashboard = () => {
// Show the drawer button
this.props.setDrawerButton(true);
export default class SummaryPage extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
toDashboard: false,
};
// Go to the dashboard
this.props.history.push("/dashboard");
}
render() {
return <div>
{
this.state.toDashboard ? (
<Redirect to="/dashboard" />
) : undefined
}
<Grid
container
spacing={0}
@ -45,10 +41,8 @@ export default class SummaryPage extends React.Component<IProps, IState> {
<Paper className="paper">
<Typography variant="title">Zusammenfassung</Typography>
<Grid container direction="column">
<SummaryTable reviewMeta={this.props.reviewMeta} />
<Button onClick={() => this.setState({
toDashboard: true,
})}>
<SummaryTable reviewMeta={() => this.props.reviewMeta} />
<Button onClick={this.toDashboard}>
Zum Dashboard
</Button>
</Grid>
@ -57,4 +51,6 @@ export default class SummaryPage extends React.Component<IProps, IState> {
</Grid>
</div>;
}
}
}
);
export default SummaryPageWithRouter;

11
src/reducers/index.ts
View File

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