working header!

frontend/app/src/components/HeaderComponent.tsx

@@ -1,10 +1,10 @@
-import { UserOutlined } from "@ant-design/icons";
-import { Layout, Menu, MenuProps } from "antd";
+import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
+import { Button, Layout, Menu, MenuProps, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
-import { getLocalToken, store, updateUser } from "../config/store";
-import { User, useGetUserQuery } from "../slice/AuthApi";
+import { StorePrototype, logOut, store } from "../config/store";
+import { useSelector } from "react-redux";
 
 const { Header } = Layout;
 
@@ -12,31 +12,43 @@ type NullableUser = { name: string | null; username: string } | null;
 
 const HeaderComponent = () => {
   const [authModalOpen, setAuthModalOpen] = useState(false);
-  store.dispatch(getLocalToken());
-  const user: NullableUser = store.getState().auth.user;
 
-  // useEffect(() => {
-  //   console.log(data);
-  //   if (!isFetching && !isError) {
-  //     store.dispatch(updateUser(data));
-  //   }
-  // }, [data, isFetching, useGetUserQuery]);
+  const user: NullableUser = useSelector(
+    (state: StorePrototype) => state.auth.user
+  );
 
-  console.log(store.getState());
+  // const userMenuItems: MenuProps["userMenuItems"] = [
+  //   {
+  //     label: <Button>Log out</Button>,
+  //     key: "logout",
+  //     icon: <LogoutOutlined />,
+  //     onClick: () => store.dispatch(logOut()),
+  //   },
+  // ]
 
   const items: MenuProps["items"] = [
     {
-      label: user ? user.username : "Log In",
+      label: user ? (
+        <Tooltip
+          title={
+            <Button onClick={() => store.dispatch(logOut())}>Log out</Button>
+          }
+        >
+          {user.username}
+        </Tooltip>
+      ) : (
+        "Log In"
+      ),
       key: "login",
       icon: <UserOutlined />,
-      onClick: () => setAuthModalOpen(true),
+      onClick: () => !user && setAuthModalOpen(true),
     },
   ];
 
   return (
     <>
       <AuthModal open={authModalOpen} setOpen={setAuthModalOpen} />
-      <Header style={{ display: "flex", alignItems: "center" }}>
+      <Header>
         <div className="demo-logo" />
         <Menu
           theme="dark"