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

refactor: Remove code duplication

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-10-03 14:10:27 +02:00
parent 7fc1d8a058
commit b32603f213
3 changed files with 99 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/components/VocabularyData.tsx Normal file
View File

@ -0,0 +1,93 @@
import * as React from "react";
import Typography from "@material-ui/core/Typography";
import {
IVocab, VocabType, INomenData, IVerbData, IAdjektivData
} from "../models/vocab";
interface IProps {
vocab: IVocab;
};
function vocabSpecificInformation(vocab: IVocab) {
switch (vocab.type) {
case VocabType.NOMEN:
const nData = vocab.latin as INomenData;
return <div>
<Typography variant="subheading" component="p">
<b>Genitiv:</b> {nData.genitiv}
</Typography>
<Typography variant="subheading" component="p">
<b>Genus:</b> {nData.genus}
</Typography>
</div>;
case VocabType.VERB:
const vData = vocab.latin as IVerbData;
return <div>
<Typography variant="subheading" component="p">
<b>1. Person Präsens:</b> {vData.praesens}
</Typography>
<Typography variant="subheading" component="p">
<b>1. Person Perfekt:</b> {vData.perfekt}
</Typography>
</div>;
case VocabType.ADJEKTIV:
const aData = vocab.latin as IAdjektivData;
return <div>
<Typography variant="subheading" component="p">
<b>Endung feminin:</b> {aData.endung_f}
</Typography>
<Typography variant="subheading" component="p">
<b>Endung neutrum:</b> {aData.endung_n}
</Typography>
</div>;
case VocabType.ADVERB:
return <div />;
}
}
export default class VocabularyData extends React.Component<IProps> {
render() {
const { vocab } = this.props;
return <div>
<Typography gutterBottom variant="headline" component="h3">
{vocab.german.join(", ")}
</Typography>
{vocabSpecificInformation(vocab)}
{
vocab.hint ? (
<div style={{
border: "dashed",
borderColor: "red",
padding: 12,
}}>
<Typography variant="subheading" component="p">
<b>Tipp:</b>
</Typography>
<Typography variant="body2">
{vocab.hint}
</Typography>
</div>
) : undefined
}
{
vocab.mnemonic ? (
<div style={{
border: "dashed",
borderColor: "#f1c40f",
marginTop: 12,
padding: 12,
}}>
<Typography variant="subheading" component="p">
<b>Eselsbrücke:</b>
</Typography>
<Typography variant="body2">
{vocab.mnemonic}
</Typography>
</div>
) : undefined
}
</div>;
}
};

80
frontend/src/pages/level.tsx
View File

@ -12,7 +12,9 @@ import CircularProgress from "@material-ui/core/CircularProgress";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { IVocab, VocabType, INomenData, IVerbData, IAdjektivData } from "../models/vocab"; import VocabularyData from "../components/VocabularyData";
import { IVocab, VocabType } from "../models/vocab";
interface IProps { interface IProps {
id: string; id: string;
@ -97,43 +99,6 @@ const LevelPageWithRouter = withRouter(
} }
} }
vocabSpecificInformation(vocab: IVocab) {
switch (vocab.type) {
case VocabType.NOMEN:
const nData = vocab.latin as INomenData;
return <div>
<Typography variant="subheading" component="p">
<b>Genitiv:</b> {nData.genitiv}
</Typography>
<Typography variant="subheading" component="p">
<b>Genus:</b> {nData.genus}
</Typography>
</div>;
case VocabType.VERB:
const vData = vocab.latin as IVerbData;
return <div>
<Typography variant="subheading" component="p">
<b>1. Person Präsens:</b> {vData.praesens}
</Typography>
<Typography variant="subheading" component="p">
<b>1. Person Perfekt:</b> {vData.perfekt}
</Typography>
</div>;
case VocabType.ADJEKTIV:
const aData = vocab.latin as IAdjektivData;
return <div>
<Typography variant="subheading" component="p">
<b>Endung feminin:</b> {aData.endung_f}
</Typography>
<Typography variant="subheading" component="p">
<b>Endung neutrum:</b> {aData.endung_n}
</Typography>
</div>;
case VocabType.ADVERB:
return <div />;
}
}
render() { render() {
if (this.props.loading) { if (this.props.loading) {
return <div> return <div>
@ -185,45 +150,8 @@ const LevelPageWithRouter = withRouter(
<Typography gutterBottom variant="headline" component="h2"> <Typography gutterBottom variant="headline" component="h2">
{`${currentVocab.latin.grundform} (${vocabTypeToStr[currentVocab.type]})`} {`${currentVocab.latin.grundform} (${vocabTypeToStr[currentVocab.type]})`}
</Typography> </Typography>
<Typography gutterBottom variant="headline" component="h3"> <VocabularyData vocab={currentVocab} />
{currentVocab.german.join(", ")}
</Typography>
{this.vocabSpecificInformation(currentVocab)}
{
currentVocab.hint ? (
<div style={{
border: "dashed",
borderColor: "red",
padding: 12,
}}>
<Typography variant="subheading" component="p">
<b>Tipp:</b>
</Typography>
<Typography variant="body2">
{currentVocab.hint}
</Typography>
</div>
) : undefined
}
{
currentVocab.mnemonic ? (
<div style={{
border: "dashed",
borderColor: "#f1c40f",
marginTop: 12,
padding: 12,
}}>
<Typography variant="subheading" component="p">
<b>Eselsbrücke:</b>
</Typography>
<Typography variant="body2">
{currentVocab.mnemonic}
</Typography>
</div>
) : undefined
}
</CardContent> </CardContent>
{/*TODO: Maybe "next" and "prev" buttons?*/}
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>

77
frontend/src/pages/review.tsx
View File

@ -21,6 +21,7 @@ import CloseIcon from "@material-ui/icons/Close";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import VocabularyData from "../components/VocabularyData";
import { import {
IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType
} from "../models/vocab"; } from "../models/vocab";
@ -258,91 +259,17 @@ const ReviewPageWithRouter = withRouter(
} }
} }
vocabSpecificInformation(vocab: IVocab) {
switch (vocab.type) {
case VocabType.NOMEN:
const nData = vocab.latin as INomenData;
return <div>
<Typography variant="subheading" component="p">
<b>Genitiv:</b> {nData.genitiv}
</Typography>
<Typography variant="subheading" component="p">
<b>Genus:</b> {nData.genus}
</Typography>
</div>;
case VocabType.VERB:
const vData = vocab.latin as IVerbData;
return <div>
<Typography variant="subheading" component="p">
<b>1. Person Präsens:</b> {vData.praesens}
</Typography>
<Typography variant="subheading" component="p">
<b>1. Person Perfekt:</b> {vData.perfekt}
</Typography>
</div>;
case VocabType.ADJEKTIV:
const aData = vocab.latin as IAdjektivData;
return <div>
<Typography variant="subheading" component="p">
<b>Endung feminin:</b> {aData.endung_f}
</Typography>
<Typography variant="subheading" component="p">
<b>Endung neutrum:</b> {aData.endung_n}
</Typography>
</div>;
case VocabType.ADVERB:
return <div />;
}
}
helpDialog = () => { helpDialog = () => {
// Find the vocabulary // Find the vocabulary
// TODO: if (!vocab) // TODO: if (!vocab)
const vocab = this.vocab.find(el => el.id === this.props.current.id) as IVocab; const vocab = this.vocab.find(el => el.id === this.props.current.id) as IVocab;
// TODO: This should be shared with LevelPage
return <Dialog return <Dialog
open={this.props.showHelp} open={this.props.showHelp}
onClose={this.closeHelp}> onClose={this.closeHelp}>
<DialogTitle>Wiederholung von {vocab.latin.grundform}</DialogTitle> <DialogTitle>Wiederholung von {vocab.latin.grundform}</DialogTitle>
<DialogContent> <DialogContent>
<Typography gutterBottom variant="headline" component="h3"> <VocabularyData vocab={vocab} />
{vocab.german.join(", ")}
</Typography>
{this.vocabSpecificInformation(vocab)}
{
vocab.hint ? (
<div style={{
border: "dashed",
borderColor: "red",
padding: 12,
}}>
<Typography variant="subheading" component="p">
<b>Tipp:</b>
</Typography>
<Typography variant="body2">
{vocab.hint}
</Typography>
</div>
) : undefined
}
{
vocab.mnemonic ? (
<div style={{
border: "dashed",
borderColor: "#f1c40f",
marginTop: 12,
padding: 12,
}}>
<Typography variant="subheading" component="p">
<b>Eselsbrücke:</b>
</Typography>
<Typography variant="body2">
{vocab.mnemonic}
</Typography>
</div>
) : undefined
}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button <Button