starting to use materia uil

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -13,7 +13,7 @@ export default function ProtectedRoute({
 }: {
   children?: React.ReactNode;
 }) {
-  const { isLoading, isError, isSuccess, refetch } = useAuthCheck();
+  const { isLoading, isError, isFetching, isSuccess, refetch } = useAuthCheck();
 
   const [jwtToken, setJwtToken] = useRecoilState($jwtToken);
 
@@ -31,6 +31,8 @@ export default function ProtectedRoute({
   }, []);
 
   useEffect(() => {
+    console.log("change in jwt token");
+
     if (jwtToken) {
       window.electronAPI.store.set(STORE_ITEMS.AUTH_SESSION_JWT, jwtToken);
     } else {
@@ -41,7 +43,7 @@ export default function ProtectedRoute({
     refetch();
   }, [jwtToken]);
 
-  if (isLoading) {
+  if (isLoading || isFetching) {
     return (
       <div className="container h-screen w-screen flex flex-col justify-center mx-10">
         <SkeletonLoader />

packages/desktop/src/pages/Home/header/index.tsx

@@ -1,17 +1,23 @@
 import { $jwtToken, $searchQuery } from "../../../controller/recoil";
-import { Dropdown, Menu } from "antd";
+import {
+  Avatar,
+  Divider,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  MenuProps,
+} from "@mui/material";
+import { Check, Logout } from "@mui/icons-material";
 import Logo, { LogoType } from "../../../components/Logo";
 import { useRecoilState, useSetRecoilState } from "recoil";
+import { useRef, useState } from "react";
 
 import { GlobalHotKeys } from "react-hotkeys";
-import NirvanaApi from "../../../controller/nirvanaApi";
-import { STORE_ITEMS } from "../../../electron/constants";
 import SocketChannels from "@nirvana/core/sockets/channels";
 import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
 import { UserStatus } from "@nirvana/core/models";
 import { socket } from "../../../nirvanaApp";
 import { useGetUserDetails } from "../../../controller/index";
-import { useRef } from "react";
 
 export default function Header() {
   const { data: userDetailsResponse, isLoading } = useGetUserDetails();
@@ -21,11 +27,23 @@ export default function Header() {
 
   const inputRef = useRef(null);
 
+  const [anchorEl, setAnchorEl] = useState(null);
+  const openAvatarMenu = Boolean(anchorEl);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   if (isLoading) {
     return <span>getting data</span>;
   }
 
   const logOut = () => {
+    console.log("logging out!");
     setJwtToken(undefined);
   };
 
@@ -38,25 +56,6 @@ export default function Header() {
     );
   };
 
-  const ProfileMenu = (
-    <Menu>
-      <Menu.Item key="0">
-        <button onClick={logOut}>Log Out</button>
-      </Menu.Item>
-      <Menu.Item key="1">
-        {userDetailsResponse.user.status === UserStatus.ONLINE ? (
-          <button onClick={() => updateStatus(UserStatus.OFFLINE)}>
-            Set status as away
-          </button>
-        ) : (
-          <button onClick={() => updateStatus(UserStatus.ONLINE)}>
-            Set status as online
-          </button>
-        )}
-      </Menu.Item>
-    </Menu>
-  );
-
   // hot keys for selecting search
   const handleSearch = () => {
     if (inputRef?.current) {
@@ -89,14 +88,76 @@ export default function Header() {
           flow state
         </button>
 
-        <Dropdown overlay={ProfileMenu} trigger={["click"]}>
+        <span className="px-5" onClick={handleClick}>
-          <span className="px-5">
+          {userDetailsResponse?.user && (
-            {userDetailsResponse?.user && (
+            <UserAvatarWithStatus user={userDetailsResponse?.user} />
-              <UserAvatarWithStatus user={userDetailsResponse?.user} />
+          )}
-            )}
+        </span>
-          </span>
-        </Dropdown>
       </div>
+
+      <Menu
+        anchorEl={anchorEl as Element}
+        id="account-menu"
+        open={openAvatarMenu}
+        onClose={handleClose}
+        onClick={handleClose}
+        PaperProps={{
+          elevation: 0,
+          sx: {
+            overflow: "visible",
+            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+            mt: 1.5,
+            "& .MuiAvatar-root": {
+              width: 32,
+              height: 32,
+              ml: -0.5,
+              mr: 1,
+            },
+            "&:before": {
+              content: '""',
+              display: "block",
+              position: "absolute",
+              top: 0,
+              right: 14,
+              width: 10,
+              height: 10,
+              bgcolor: "background.paper",
+              transform: "translateY(-50%) rotate(45deg)",
+              zIndex: 0,
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+      >
+        <MenuItem onClick={() => updateStatus(UserStatus.ONLINE)}>
+          <ListItemIcon>
+            <Check fontSize="small" />
+          </ListItemIcon>
+          Online
+        </MenuItem>
+        <MenuItem onClick={() => updateStatus(UserStatus.OFFLINE)}>
+          <ListItemIcon>
+            <Check fontSize="small" />
+          </ListItemIcon>
+          Away
+        </MenuItem>
+        <MenuItem onClick={() => updateStatus(UserStatus.FLOW_STATE)}>
+          <ListItemIcon>
+            <Check fontSize="small" />
+          </ListItemIcon>
+          Flow State
+        </MenuItem>
+
+        <Divider />
+
+        <MenuItem onClick={logOut}>
+          <ListItemIcon>
+            <Logout fontSize="small" />
+          </ListItemIcon>
+          Sign Out
+        </MenuItem>
+      </Menu>
     </>
   );
 }