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

feat: Implement the new /dashboard API

Browse Source
This commit is contained in:
Alexander Polynomdivision
2018-09-24 18:29:29 +02:00
parent 7339e1ccac
commit 24f35be058
7 changed files with 127 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
frontend/src/pages/dashboard.tsx
View File

@@ -16,51 +16,50 @@ import { ILearner, TopTen } from "../models/learner";
import { IReviewMetadata } from "../models/review";
interface IProps {
getNextLevel: () => Promise<ILevel>;
getLastReview: () => Promise<IReviewMetadata>;
getTopTen: () => Promise<ILearner[]>;
getDashboard: () => Promise<any>;
loading: boolean;
setLoading: (state: boolean) => void;
nextLevel: ILevel;
loadingNextLevel: boolean;
setLoadingNL: (state: boolean) => void;
setNextLevel: (level: ILevel) => void;
topTen: TopTen[];
loadingTopTen: boolean;
setLoadingTT: (state: boolean) => void;
setTopTen: (topten: TopTen[]) => void;
lastReview: IReviewMetadata;
loadingLastReview: boolean;
setLoadingLR: (state: boolean) => void;
setLastReview: (review: IReviewMetadata) => void;
}
export default class Dashboard extends React.Component<IProps> {
componentDidMount() {
this.props.setLoadingNL(true);
this.props.getNextLevel().then(res => {
this.props.setLoadingNL(false);
this.props.setNextLevel(res);
}, err => {
console.log("Failed to fetch next level!", err);
});
this.props.getTopTen().then(res => {
this.props.setLoadingTT(false);
this.props.setTopTen(res);
}, err => {
console.log("Failed to fetch Top Ten");
});
this.props.getLastReview().then(res => {
this.props.setLoadingLR(false);
this.props.setLastReview(res);
}, err => {
console.log("Failed to fetch Last Review");
});
this.props.setLoading(true);
this.props.getDashboard().then(res => {
this.props.setNextLevel(res.nextLevel);
this.props.setTopTen(res.topTen);
this.props.setLastReview(res.lastReview);
this.props.setLoading(false);
})
}
render() {
if (this.props.loading) {
return <div>
<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 direction = small ? "column" : "row";
@@ -70,63 +69,48 @@ export default class Dashboard extends React.Component<IProps> {
<Grid container direction={direction} spacing={16}>
<Grid item lg={4}>
<Paper className="paper">
{this.props.loadingNextLevel ? (
<CircularProgress />
) : (
<div>
<Typography variant="title">{`Level ${level.level}`}</Typography>
<Typography variant="title" component="p">{level.name}</Typography>
<br />
<Typography component="p">
{level.desc}
</Typography>
<Button
component={Link}
to={`/level/${level.level}`}
className="lesson-card-btn">
Zum Level
</Button>
</div>
)}
<div>
<Typography variant="title">{`Level ${level.level}`}</Typography>
<Typography variant="title" component="p">{level.name}</Typography>
<br />
<Typography component="p">
{level.desc}
</Typography>
<Button
component={Link}
to={`/level/${level.level}`}
className="lesson-card-btn">
Zum Level
</Button>
</div>
</Paper>
</Grid>
<Grid item lg={4}>
<Paper className="paper">
{this.props.loadingTopTen ? (
<CircularProgress />
) : (
<div>
<Typography variant="title" component="p">
Rangliste: Top 10
</Typography>
<div>
<Typography variant="title" component="p">
Rangliste: Top 10
</Typography>
<Scoreboard topTen={this.props.topTen} />
</div>
)}
<Scoreboard topTen={this.props.topTen} />
</div>
</Paper>
</Grid>
<Grid item lg={4}>
<Paper className="paper">
{
this.props.loadingLastReview ? (
<CircularProgress />
) : (
<div>
<Typography variant="title">
Letzte Wiederholung
</Typography>
<SummaryTable reviewMeta={this.props.lastReview} />
<div>
<Typography variant="title">
Letzte Wiederholung
</Typography>
<SummaryTable reviewMeta={this.props.lastReview} />
<Button
component={Link}
to="/review/queue"
className="lesson-card-btn">
Vokabeln üben
</Button>
</div>
)
}
<Button
component={Link}
to="/review/queue"
className="lesson-card-btn">
Vokabeln üben
</Button>
</div>
</Paper>
</Grid>
</Grid>

1
frontend/src/pages/levelList.tsx
View File

@@ -51,7 +51,6 @@ export default class Dashboard extends React.Component<IProps> {
</Paper>
</Grid>
</Grid>
</div>;
}