refactor: Remove code duplication
This commit is contained in:
Alexander Polynomdivision
parent
7fc1d8a058
commit
b32603f213
93
frontend/src/components/VocabularyData.tsx
Normal file
93
frontend/src/components/VocabularyData.tsx
Normal 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>;
|
||||
}
|
||||
};
|
||||
@ -12,7 +12,9 @@ import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
|
||||
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 {
|
||||
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() {
|
||||
if (this.props.loading) {
|
||||
return <div>
|
||||
@ -185,45 +150,8 @@ const LevelPageWithRouter = withRouter(
|
||||
<Typography gutterBottom variant="headline" component="h2">
|
||||
{`${currentVocab.latin.grundform} (${vocabTypeToStr[currentVocab.type]})`}
|
||||
</Typography>
|
||||
<Typography gutterBottom variant="headline" component="h3">
|
||||
{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
|
||||
}
|
||||
<VocabularyData vocab={currentVocab} />
|
||||
</CardContent>
|
||||
{/*TODO: Maybe "next" and "prev" buttons?*/}
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
@ -21,6 +21,7 @@ import CloseIcon from "@material-ui/icons/Close";
|
||||
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
import VocabularyData from "../components/VocabularyData";
|
||||
import {
|
||||
IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType
|
||||
} 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 = () => {
|
||||
// Find the vocabulary
|
||||
// TODO: if (!vocab)
|
||||
const vocab = this.vocab.find(el => el.id === this.props.current.id) as IVocab;
|
||||
|
||||
// TODO: This should be shared with LevelPage
|
||||
return <Dialog
|
||||
open={this.props.showHelp}
|
||||
onClose={this.closeHelp}>
|
||||
<DialogTitle>Wiederholung von {vocab.latin.grundform}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography gutterBottom variant="headline" component="h3">
|
||||
{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
|
||||
}
|
||||
<VocabularyData vocab={vocab} />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user