feat: Basic implementation of showing the score

src/components/Drawer.tsx

@@ -6,6 +6,7 @@ import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
 import SwipeableDrawer from "@material-ui/core/SwipeableDrawer";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
@@ -21,9 +22,12 @@ import HomeIcon from "@material-ui/icons/Home";
 import BookIcon from "@material-ui/icons/Book";
 import ViewWeekIcon from "@material-ui/icons/ViewWeek";
 
+import { IUser } from "../models/user";
+
 interface IProps {
     logout: () => void;
 
+    user: IUser;
     open: boolean;
     showButton: boolean;
     authenticated: boolean;
@@ -55,6 +59,13 @@ export default class Drawer extends React.Component<IProps> {
                         <Typography className="flex" variant="title" color="inherit">
                             Lateinicus
                         </Typography>
+                        {
+                            this.props.authenticated ? (
+                                <Button color="inherit">
+                                    {`${this.props.user.score} / 200`}
+                                </Button>
+                            ) : undefined
+                        }
                     </Toolbar>
                 </AppBar>
                 <SwipeableDrawer

src/containers/Drawer.ts

@@ -6,6 +6,7 @@ import Drawer from "../components/Drawer";
 
 const mapStateToProps = state => {
     return {
+        user: state.user,
         open: state.drawer,
         authenticated: state.authenticated,
         showButton: state.drawerButton,

src/models/user.ts

@@ -2,6 +2,7 @@ export interface IUser {
     username: string;
     uid: string;
     showWelcome: boolean;
+    score: number;
 
     sessionToken: string;
 };

src/pages/intro.tsx

@@ -68,6 +68,7 @@ export default class IntroPage extends React.Component<{}> {
                         </Typography>
                     </CardContent>
                     <CardActions>
+                        {/*TODO: Tell the server to not show this page again*/}
                         <Button
                             fullWidth={true}
                             component={Link}

src/pages/login.tsx

@@ -35,7 +35,13 @@ const LoginPageWithRouter = withRouter(
             const username = this.usernameRef.value || "";
             const password = this.passwordRef.value || "";
             this.props.login(username, password).then((res: IUser) => {
-                this.props.history.push("/dashboard");
+                if (res.showWelcome) {
+                    // If the user logs in for the first time, a welcome
+                    // screen should be shown
+                    this.props.history.push("/welcome");
+                } else {
+                    this.props.history.push("/dashboard");
+                }
             }, (err) => {
                 this.props.setLoading(false);
                 this.props.setSnackbar(true, "Failed to log in");

src/pages/review.tsx

@@ -102,7 +102,7 @@ const ReviewPageWithRouter = withRouter(
             };
         }
 
-        vocabFromId = (id: number) => {
+        vocabFromId = (id: number): IVocab | {} => {
             return this.vocab.find((el) => el.id === this.props.current.id);
         }
 

src/reducers/index.ts

@@ -90,6 +90,7 @@ const initialState: IState = {
         popoverOpen: false,
         popoverText: "",
         popoverColor: "",
+        popoverTextColor: "",
     },
 
     lastReview: {