refactor: Lesson -> Level

src/components/app.tsx

@@ -22,10 +22,10 @@ import AuthRoute from "../security/AuthRoute";
 
 import Dashboard from "../pages/dashboard";
 import LoginPage from "../pages/login";
-import LessonsPage from "../pages/lessons";
+import LevelListPage from "../pages/levelList";
 import LevelPage from "../pages/level";
 
-import { ILesson } from "../models/lesson";
+import { ILevel } from "../models/level";
 import { IVocab } from "../models/vocab";
 
 interface IState {
@@ -47,9 +47,9 @@ export default class Application extends React.Component<{}, IState> {
         this.isAuthenticated = this.isAuthenticated.bind(this);
     }
 
-    getLessons(): ILesson[] {
+    getLevels(): ILevel[] {
         // TODO: Actually fetch them from somewhere
-        const lessons = [{
+        const levels = [{
             name: "Der Bauer auf dem Feld",
             desc: "So fängt alles an: Du bist ein einfacher Bauer und musst dich die Karriereleiter mit deinen freshen Latein-Skills hinaufarbeiten",
             level: 1,
@@ -61,7 +61,7 @@ export default class Application extends React.Component<{}, IState> {
             done: false,
         }];
 
-        return lessons;
+        return levels;
     }
 
     getLearners(): ILearner[] {
@@ -80,7 +80,7 @@ export default class Application extends React.Component<{}, IState> {
         }];
     }
 
-    getNextLesson(): ILesson {
+    getNextLevel(): ILevel {
         // TODO: Actually fetch data
         return {
             name: "???",
@@ -203,11 +203,11 @@ export default class Application extends React.Component<{}, IState> {
                     <AuthRoute
                         isAuth={this.isAuthenticated}
                         path="/dashboard"
-                        component={() => <Dashboard nextLesson={this.getNextLesson} learners={this.getLearners()} />} />
+                        component={() => <Dashboard nextLevel={this.getNextLevel} learners={this.getLearners()} />} />
                     <AuthRoute
                         isAuth={this.isAuthenticated}
                         path="/levelList"
-                        component={() => <LessonsPage lessons={this.getLessons()} />} />
+                        component={() => <LevelListPage levels={this.getLevels()} />} />
                     {/*We cannot use AuthRoute here, because match is undefined otherwise*/}
                     <Route
                         path="/level/:id"

src/models/level.ts

@@ -1,4 +1,4 @@
-export interface ILesson {
+export interface ILevel {
     name: string;
     desc: string;
     level: number;

src/pages/dashboard.tsx

@@ -9,11 +9,11 @@ import Paper from "@material-ui/core/Paper";
 
 import Scoreboard from "../components/scoreboard";
 
-import { ILesson } from "../models/lesson";
+import { ILevel } from "../models/level";
 import { ILearner } from "../models/learner";
 
 interface IProps {
-    nextLesson: () => ILesson;
+    nextLevel: () => ILevel;
     learners: ILearner[];
 }
 
@@ -34,7 +34,7 @@ export default class Dashboard extends React.Component<IProps, IState> {
         const small = window.matchMedia("(max-width: 700px)").matches;
         const direction = small ? "column" : "row";
 
-        const lesson = this.props.nextLesson();
+        const level = this.props.nextLevel();
 
         return <div>
             {
@@ -45,16 +45,16 @@ export default class Dashboard extends React.Component<IProps, IState> {
             <Grid container direction={direction} spacing={16}>
                 <Grid item lg={4}>
                     <Paper className="paper">
-                        <Typography variant="title">{`Level ${lesson.level}`}</Typography>
+                        <Typography variant="title">{`Level ${level.level}`}</Typography>
-                        <Typography variant="title" component="p">{lesson.name}</Typography>
+                        <Typography variant="title" component="p">{level.name}</Typography>
                         <br />
                         <Typography component="p">
-                            {lesson.desc}
+                            {level.desc}
                         </Typography>
                         <Button className="lesson-card-btn"
                             onClick={() => {
                                 this.setState({
-                                    toLevel: lesson.level,
+                                    toLevel: level.level,
                                 });
                             }}>
                             Zum Level

src/pages/levelList.tsx

@@ -7,10 +7,10 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 
-import { ILesson } from "../models/lesson";
+import { ILevel } from "../models/lesson";
 
 interface IProps {
-    lessons: ILesson[];
+    levels: ILevel[];
 }
 
 export default class Dashboard extends React.Component<{}> {
@@ -23,17 +23,17 @@ export default class Dashboard extends React.Component<{}> {
         const cName = small ? "lesson-card-xs" : "lesson-card-lg";
 
         let key = 0;
-        const lessonToCard = (lesson: ILesson) => {
+        const levelToCard = (level: ILevel) => {
             return <Grid item key={key++}>
                 <Card style={{
                     width: small ? window.width - 32 : "300px"
                 }}>
                     <CardContent className={cName}>
-                        <Typography variant="title">{`Level ${lesson.level}`}</Typography>
+                        <Typography variant="title">{`Level ${level.level}`}</Typography>
-                        <Typography variant="title" component="p">{lesson.name}</Typography>
+                        <Typography variant="title" component="p">{level.name}</Typography>
                         <br />
                         <Typography component="p">
-                            {lesson.desc}
+                            {level.desc}
                         </Typography>
                     </CardContent>
                     <CardActions>
@@ -46,7 +46,7 @@ export default class Dashboard extends React.Component<{}> {
         };
 
         return <Grid container spacing={16} direction="row">
-            {this.props.lessons.map(lessonToCard)}
+            {this.props.levels.map(levelToCard)}
         </Grid>
     }
 };