Added simplie dashboard

docker/frontend/components/dashboard.tsx

@@ -0,0 +1,15 @@
+import type { User } from "../lib/graphql/user";
+
+interface DashboardProps {
+  user: User;
+}
+
+function Dashboard({ user }: DashboardProps): JSX.Element {
+  return (
+    <div>
+      <h1>Hallo {user.firstname}!</h1>
+    </div>
+  );
+}
+
+export default Dashboard;

docker/frontend/components/loading.tsx

@@ -0,0 +1,5 @@
+function Loading(): JSX.Element {
+  return <p>Laden...</p>;
+}
+
+export default Loading;

docker/frontend/components/navbar.tsx

@@ -1,12 +1,16 @@
 import Cookies from "js-cookie";
 import Link from "next/link";
+import Router from "next/router";
+
+import * as cookieNames from "../lib/cookieNames";
 
 function Navbar(): JSX.Element {
-  const isLoggedIn = !!Cookies.get("mentorenwahl_bearer");
+  const isLoggedIn = !!Cookies.get(cookieNames.TOKEN);
 
-  function handleLogout(event: MouseEvent): void {
+  function handleLogout(event: Event): void {
     event.preventDefault();
-    Cookies.remove("mentorenwahl_bearer");
+    Cookies.remove(cookieNames.TOKEN);
+    Router.reload();
   }
 
   return (

docker/frontend/lib/graphql/user.ts

@@ -0,0 +1,14 @@
+export enum Role {
+  ADMIN = "admin",
+  TEACHER = "teacher",
+  STUDENT = "student",
+}
+
+export interface User {
+  id: number;
+  name: string;
+  firstname: string;
+  lastname: string;
+  email: string;
+  role?: Role;
+}

docker/frontend/pages/_app.tsx

@@ -1,12 +1,17 @@
 import type { AppProps } from "next/app";
 import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
+import Cookies from "js-cookie";
 
 import MainLayout from "../layouts/main";
 import "../styles/globals.css";
+import * as cookieNames from "../lib/cookieNames";
+
+const token = Cookies.get(cookieNames.TOKEN);
 
 const client = new ApolloClient({
   uri: "/graphql",
   cache: new InMemoryCache(),
+  headers: token ? { authorization: `Bearer ${token}` } : {},
 });
 
 function MyApp({ Component, pageProps }: AppProps): JSX.Element {

docker/frontend/pages/index.tsx

@@ -1,22 +1,58 @@
 import Cookies from "js-cookie";
 import Router from "next/router";
 import { useEffect } from "react";
+import { gql, useLazyQuery } from "@apollo/client";
 
 import * as cookieNames from "../lib/cookieNames";
+import Dashboard from "../components/dashboard";
+import Loading from "../components/loading";
+
+const ME_QUERY = gql`
+  query Me {
+    me {
+      id
+      firstname
+      email
+      role
+      teacher {
+        id
+      }
+      student {
+        id
+      }
+    }
+  }
+`;
+
+const token = Cookies.get(cookieNames.TOKEN);
 
 function Home(): JSX.Element {
-  const token = Cookies.get(cookieNames.TOKEN);
   useEffect(() => {
     if (!token) {
       Router.push("/login");
     }
-  }, [token]);
+  });
+
+  const [loadMe, { called, loading, data }] = useLazyQuery(ME_QUERY, {
+    variables: { token },
+  });
 
   if (!token) {
     return <></>;
   }
 
-  return <p>Du bist eingeloggt!</p>;
+  if (called && loading) {
+    return <Loading />;
+  } else if (!called) {
+    loadMe();
+    return <Loading />;
+  }
+
+  return (
+    <div>
+      <Dashboard user={data.me} />
+    </div>
+  );
 }
 
 export default Home;

docker/frontend/pages/login.tsx

@@ -5,7 +5,7 @@ import Router from "next/router";
 
 import * as cookieNames from "../lib/cookieNames";
 
-const LOGIN = gql`
+const LOGIN_MUTATION = gql`
   mutation Login($email: String!, $password: String!) {
     login(email: $email, password: $password) {
       token
@@ -14,7 +14,7 @@ const LOGIN = gql`
 `;
 
 function Login(): JSX.Element {
-  const [login, { error }] = useMutation(LOGIN);
+  const [login, { error }] = useMutation(LOGIN_MUTATION);
 
   const loginUser: FormEventHandler = async (
     event: FormEvent & { target: HTMLFormElement }
@@ -30,6 +30,7 @@ function Login(): JSX.Element {
         variables: { email: input.email, password: input.password },
       })
     ).data;
+
     if (data) {
       Cookies.set(cookieNames.TOKEN, data.login.token, { expires: 1 });
       Router.push("/");