feat: Tick all levels that the user has completed

frontend/src/containers/LevelList.ts

@@ -10,6 +10,7 @@ const mapStateToProps = state => {
     return {
         levels: state.levels,
         loading: state.levelList.loading,
+        user: state.user,
     };
 };
 const mapDispatchToProps = dispatch => {

frontend/src/models/user.ts

@@ -5,6 +5,9 @@ export interface IUser {
     score: number;
     classId: string;
 
+    // Levels that the user has completed
+    levels: number[];
+
     sessionToken: string;
 };
 

frontend/src/pages/levelList.tsx

@@ -12,10 +12,12 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import { Link } from "react-router-dom";
 
 import { ILevel } from "../models/level";
+import { IUser } from "../models/user";
 
 interface IProps {
     getLevels: () => Promise<ILevel[]>;
 
+    user: IUser;
     setLevels: (levels: ILevel[]) => void;
     setLoading: (state: boolean) => void;
     loading: boolean;
@@ -59,12 +61,13 @@ export default class Dashboard extends React.Component<IProps> {
 
         let key = 0;
         const levelToCard = (level: ILevel) => {
+            const suffix = level.level in this.props.user.levels ? " ✔" : "";
             return <Grid item key={key++}>
                 <Card style={{
                     width: small ? window.width - 32 : "300px"
                 }}>
                     <CardContent className={cName}>
-                        <Typography variant="title">{`Level ${level.level}`}</Typography>
+                        <Typography variant="title">{`Level ${level.level}${suffix}`}</Typography>
                         <Typography variant="title" component="p">{level.name}</Typography>
                         <br />
                         <Typography component="p">