refactor: Move the LevelPage to Redux
This commit is contained in:
parent
95fc93f690
commit
3136c92687
@ -1,3 +1,6 @@
|
||||
import { IVocab } from "../models/vocab";
|
||||
import { IUser } from "../models/user";
|
||||
|
||||
export const SET_DRAWER = "SET_DRAWER";
|
||||
export function setDrawer(state: boolean) {
|
||||
return {
|
||||
@ -46,3 +49,43 @@ export function setUser(user: IUser) {
|
||||
user,
|
||||
};
|
||||
}
|
||||
|
||||
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,
|
||||
lookedAt: ids,
|
||||
};
|
||||
};
|
||||
|
||||
export const LEVEL_SET_CUR_VOCAB = "LEVEL_SET_CUR_VOCAB";
|
||||
export function setLevelCurrentVocab(vocab: IVocab) {
|
||||
return {
|
||||
type: LEVEL_SET_CUR_VOCAB,
|
||||
vocab,
|
||||
};
|
||||
};
|
||||
|
||||
export const LEVEL_SET_VOCAB = "LEVEL_SET_VOCAB";
|
||||
export function setLevelVocab(vocab: IVocab[]) {
|
||||
return {
|
||||
type: LEVEL_SET_VOCAB,
|
||||
vocab,
|
||||
};
|
||||
};
|
||||
|
||||
export const LEVEL_SET_LOADING = "LEVEL_SET_LOADING";
|
||||
export function setLevelLoading(state: boolean) {
|
||||
return {
|
||||
type: LEVEL_SET_LOADING,
|
||||
state,
|
||||
};
|
||||
};
|
||||
|
@ -7,7 +7,7 @@ import AuthRoute from "../security/AuthRoute";
|
||||
import Dashboard from "../pages/dashboard";
|
||||
import LoginPage from "../containers/LoginPage";
|
||||
import LevelListPage from "../pages/levelList";
|
||||
import LevelPage from "../pages/level";
|
||||
import LevelPage from "../containers/LevelPage";
|
||||
import ReviewPage from "../pages/review";
|
||||
import SummaryPage from "../pages/summary";
|
||||
import WelcomePage from "../pages/intro";
|
||||
@ -146,35 +146,38 @@ export default class Application extends React.Component<IProps> {
|
||||
};
|
||||
}
|
||||
|
||||
getLevelVocab(id: number): IVocab[] {
|
||||
getLevelVocab(id: number): Promise<IVocab[]> {
|
||||
console.log("STUB: Application::getLevelVocab");
|
||||
|
||||
// TODO: Actually implement this
|
||||
// TODO: Don't fetch this when it was already fetched once.
|
||||
return [{
|
||||
german: ["Wein"],
|
||||
hint: "Worte auf '-um' sind meistens NeutrUM",
|
||||
type: VocabType.NOMEN,
|
||||
latin: {
|
||||
grundform: "Vinum",
|
||||
genitiv: "Vini",
|
||||
genus: "Neutrum"
|
||||
},
|
||||
id: 0
|
||||
}/* , {
|
||||
* latin: "Vici",
|
||||
* german: "<Wortbedeutung>",
|
||||
* hint: "Wird \"Viki\" und nicht \"Vichi\" ausgesprochen",
|
||||
* mnemonic: "Merk dir das Wort mit Caesars berühmten Worten: \"Veni Vidi Vici\"; Er kam, sah und siegte",
|
||||
* type: VocabType.NOMEN,
|
||||
* id: 2
|
||||
}, {
|
||||
* latin: "fuga",
|
||||
* german: "Flucht",
|
||||
* hint: "Worte auf \"-a\" sind FeminA",
|
||||
* type: VocabType.NOMEN,
|
||||
* id: 3
|
||||
} */] as IVocab[];
|
||||
return new Promise((res, rej) => {
|
||||
setTimeout(() => {
|
||||
res([{
|
||||
german: ["Wein"],
|
||||
hint: "Worte auf '-um' sind meistens NeutrUM",
|
||||
type: VocabType.NOMEN,
|
||||
latin: {
|
||||
grundform: "Vinum",
|
||||
genitiv: "Vini",
|
||||
genus: "Neutrum"
|
||||
},
|
||||
id: 0
|
||||
}/* , {
|
||||
* latin: "Vici",
|
||||
* german: "<Wortbedeutung>",
|
||||
* hint: "Wird \"Viki\" und nicht \"Vichi\" ausgesprochen",
|
||||
* mnemonic: "Merk dir das Wort mit Caesars berühmten Worten: \"Veni Vidi Vici\"; Er kam, sah und siegte",
|
||||
* type: VocabType.NOMEN,
|
||||
* id: 2
|
||||
}, {
|
||||
* latin: "fuga",
|
||||
* german: "Flucht",
|
||||
* hint: "Worte auf \"-a\" sind FeminA",
|
||||
* type: VocabType.NOMEN,
|
||||
* id: 3
|
||||
} */]);
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
login = (username: string, password: string): Promise<IUser | {}> => {
|
||||
|
37
src/containers/LevelPage.ts
Normal file
37
src/containers/LevelPage.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import {
|
||||
setDrawerButton, setLevelReview, setLevelLookedAt,
|
||||
setLevelCurrentVocab, setLevelVocab, setLevelLoading
|
||||
} from "../actions";
|
||||
|
||||
import { IVocab } from "../models/vocab";
|
||||
|
||||
import LevelPage from "../pages/level";
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { currentVocab, lookedAt, toReview, vocab, loading } = state.level;
|
||||
|
||||
return {
|
||||
currentVocab,
|
||||
lookedAt,
|
||||
toReview,
|
||||
vocab,
|
||||
loading,
|
||||
};
|
||||
};
|
||||
|
||||
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)),
|
||||
setLoading: (state: boolean) => dispatch(setLevelLoading(state)),
|
||||
};
|
||||
};
|
||||
|
||||
const LevelPageContainer = connect(mapStateToProps,
|
||||
mapDispatchToProps)(LevelPage);
|
||||
export default LevelPageContainer;
|
@ -5,8 +5,11 @@ import ListItem from "@material-ui/core/ListItem";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
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";
|
||||
|
||||
@ -14,35 +17,42 @@ import { IVocab } from "../models/vocab";
|
||||
|
||||
interface IProps {
|
||||
id: string;
|
||||
levelVocab: (id: string) => Promise<IVocab[]>;
|
||||
|
||||
levelVocab: (id: string) => IVocab[];
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
interface IState {
|
||||
currentVocab: IVocab;
|
||||
lookedAt: number[];
|
||||
toReview: boolean;
|
||||
};
|
||||
|
||||
export default class LevelPage extends React.Component<IProps, IState> {
|
||||
export default class LevelPage extends React.Component<IProps> {
|
||||
private uid = 0;
|
||||
// To prevent React from redrawing the vocabulary list and prematurely
|
||||
// cancelling the animation
|
||||
private uids: { [key: string]: string } = {};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
componentDidMount() {
|
||||
// Hide the drawer
|
||||
this.props.drawerButtonState(false);
|
||||
|
||||
this.state = {
|
||||
currentVocab: this.props.levelVocab(this.props.id)[0],
|
||||
lookedAt: [0],
|
||||
toReview: false,
|
||||
};
|
||||
// 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);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
genUID = (vocab: IVocab): string => {
|
||||
@ -57,16 +67,16 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
||||
|
||||
renderVocabListItem = (vocab: IVocab): any => {
|
||||
// Check if the vocab was already looked at
|
||||
const lookedAt = this.state.lookedAt.find((el) => el === vocab.id) || vocab.id === 0;
|
||||
const lookedAt = this.props.lookedAt.find((el) => el === vocab.id) || vocab.id === 0;
|
||||
|
||||
return <ListItem button key={this.genUID(vocab)} onClick={() => {
|
||||
// Prevent the user from using too much memory by always clicking on the elements
|
||||
// Show the clicked at vocab word
|
||||
|
||||
this.setState({
|
||||
currentVocab: vocab,
|
||||
lookedAt: lookedAt ? this.state.lookedAt : this.state.lookedAt.concat(vocab.id),
|
||||
});
|
||||
this.props.setCurrentVocab(vocab);
|
||||
this.props.setLookedAt(lookedAt ? (
|
||||
this.props.lookedAt
|
||||
) : this.props.lookedAt.concat(vocab.id));
|
||||
}}>
|
||||
<ListItemText>
|
||||
{`${vocab.latin.grundform} ${lookedAt ? "✔" : ""}`}
|
||||
@ -75,23 +85,52 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
||||
}
|
||||
|
||||
toReview = () => {
|
||||
const { levelVocab, id } = this.props;
|
||||
const { vocab, lookedAt } = this.props;
|
||||
// Only go to the review if all vocabulary item have been looked at
|
||||
if (levelVocab(id).length === this.state.lookedAt.length) {
|
||||
this.setState({
|
||||
toReview: true,
|
||||
});
|
||||
if (vocab.length === lookedAt.length) {
|
||||
this.props.setReview(true);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { currentVocab } = this.state;
|
||||
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}
|
||||
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 { currentVocab } = this.props;
|
||||
return <div>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<List>
|
||||
{this.props.levelVocab(this.props.id)
|
||||
{this.props.vocab
|
||||
.map(this.renderVocabListItem)}
|
||||
{/* TODO*/}
|
||||
<ListItem button onClick={this.toReview}>
|
||||
@ -102,7 +141,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
||||
</List>
|
||||
</Grid>
|
||||
{
|
||||
this.state.toReview ? (
|
||||
this.props.toReview ? (
|
||||
<Redirect to={`/review/level/${this.props.id}`} />
|
||||
) : undefined
|
||||
}
|
||||
|
@ -2,6 +2,7 @@ import * as Actions from "../actions";
|
||||
|
||||
import { ILearner } from "../models/learner";
|
||||
import { IUser } from "../models/user";
|
||||
import { IVocab } from "../models/vocab";
|
||||
|
||||
interface IState {
|
||||
drawer: boolean;
|
||||
@ -17,6 +18,14 @@ interface IState {
|
||||
snackOpen: boolean;
|
||||
};
|
||||
|
||||
level: {
|
||||
currentVocab: IVocab;
|
||||
lookedAt: number[];
|
||||
toReview: boolean;
|
||||
vocab: IVocab[];
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
topTen: ILearner[];
|
||||
};
|
||||
|
||||
@ -27,7 +36,7 @@ const initialState: IState = {
|
||||
drawerButton: true,
|
||||
// Is the user authenticated?
|
||||
// TODO: Set this to false
|
||||
authenticated: false,
|
||||
authenticated: true,
|
||||
|
||||
user: {},
|
||||
|
||||
@ -37,6 +46,14 @@ const initialState: IState = {
|
||||
snackOpen: false,
|
||||
},
|
||||
|
||||
level: {
|
||||
currentVocab: {} as IVocab,
|
||||
lookedAt: [0],
|
||||
toReview: false,
|
||||
vocab: [],
|
||||
loading: true,
|
||||
},
|
||||
|
||||
// The top ten
|
||||
topTen: [],
|
||||
};
|
||||
@ -75,6 +92,39 @@ 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, {
|
||||
lookedAt: action.lookedAt,
|
||||
}),
|
||||
});
|
||||
case Actions.LEVEL_SET_CUR_VOCAB:
|
||||
return Object.assign({}, state, {
|
||||
level: Object.assign({}, state.level, {
|
||||
currentVocab: action.vocab,
|
||||
}),
|
||||
});
|
||||
case Actions.LEVEL_SET_VOCAB:
|
||||
return Object.assign({}, state, {
|
||||
level: Object.assign({}, state.level, {
|
||||
vocab: action.vocab,
|
||||
}),
|
||||
});
|
||||
case Actions.LEVEL_SET_LOADING:
|
||||
return Object.assign({}, state, {
|
||||
level: Object.assign({}, state.level, {
|
||||
loading: action.state,
|
||||
}),
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
Reference in New Issue
Block a user