feat: Implement a vocabulary view

frontend/src/components/Drawer.tsx

@@ -172,6 +172,16 @@ export default class Drawer extends React.Component<IProps> {
                                 Vokabeln üben
                             </ListItemText>
                         </ListItem>
+                        <ListItem
+                            component={Link}
+                            to="/vocab"
+                            onClick={this.closeDrawer}
+                            button>
+                            {/* <ListItemIcon>
+                                <HomeIcon />
+                                </ListItemIcon> */}
+                            <ListItemText primary="Vokabelliste" />
+                        </ListItem>
                         <ListItem
                             component={Link}
                             to="/levelList"

frontend/src/components/app.tsx

@@ -13,6 +13,7 @@ import ReviewPage from "../containers/Review";
 import SummaryPage from "../containers/SummaryPage";
 import WelcomePage from "../pages/intro";
 import RegisterPage from "../containers/Register";
+import VocabPage from "../containers/VocabPage";
 
 import Drawer from "../containers/Drawer";
 
@@ -83,6 +84,24 @@ export default class Application extends React.Component<IProps> {
         });
     }
 
+    getVocab = (): Promise<IVocab[]> => {
+        return new Promise((res, rej) => {
+            fetch(`${BACKEND_URL}/api/user/vocab`, {
+                headers: new Headers({
+                    "Content-Type": "application/json",
+                    "Token": this.props.user.sessionToken,
+                }),
+            }).then(resp => resp.json(), err => rej(err))
+                .then(data => {
+                    if (data.error === "200") {
+                        res(data.data);
+                    } else {
+                        rej(data);
+                    }
+                });
+        });
+    }
+
     getLevels = (): Promise<ILevel[]> => {
         return new Promise((res, rej) => {
             fetch(`${BACKEND_URL}/api/levels`, {
@@ -431,6 +450,13 @@ export default class Application extends React.Component<IProps> {
                         component={() => {
                             return <SummaryPage />
                         }} />
+                    <AuthRoute
+                        isAuth={this.isAuthenticated}
+                        path="/vocab"
+                        component={() => {
+                            return <VocabPage
+                                getVocab={this.getVocab} />;
+                        }} />
                 </div>
             </div >
         </BrowserRouter >;