having log out work and now atdesign nice

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

@@ -1,7 +1,9 @@
+import { $authTokens } from "../../controller/recoil";
 import Login from "../../pages/Login";
 import SkeletonLoader from "../loading/skeleton";
 import { useEffect } from "react";
 import { useGetUserDetails } from "../../controller/index";
+import { useRecoilValue } from "recoil";
 
 export default function ProtectedRoute({
   children,
@@ -10,6 +12,14 @@ export default function ProtectedRoute({
 }) {
   const { data, isLoading, isError, refetch } = useGetUserDetails();
 
+  const authTokens = useRecoilValue($authTokens);
+
+  useEffect(() => {
+    if (!authTokens) {
+      refetch();
+    }
+  }, [authTokens]);
+
   if (isLoading)
     return (
       <div className="container h-screen w-screen">

packages/desktop/src/components/loading/skeleton.tsx

@@ -1,11 +1,5 @@
-import { Skeleton } from "@mui/material";
+import { Skeleton } from "antd";
 
 export default function SkeletonLoader() {
-  return (
-    <div>
-      <Skeleton variant="text" width={210} />
-      <Skeleton variant="circular" width={40} height={40} />
-      <Skeleton variant="rectangular" width={210} height={118} />
-    </div>
-  );
+  return <Skeleton avatar paragraph={{ rows: 4 }} />;
 }

packages/desktop/src/index.css

@@ -12,3 +12,5 @@ body {
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import "~antd/dist/antd.css";

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

@@ -1,17 +1,34 @@
+import { $authTokens, $searchQuery } from "../../../controller/recoil";
+import { Dropdown, Menu } from "antd";
 import Logo, { LogoType } from "../../../components/Logo";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
-import { $searchQuery } from "../../../controller/recoil";
+import { STORE_ITEMS } from "../../../electron/constants";
 import { useGetUserDetails } from "../../../controller/index";
-import { useRecoilState } from "recoil";
 
 export default function Header() {
   const { data: user, isLoading } = useGetUserDetails();
   const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
 
+  const setAuthTokens = useSetRecoilState($authTokens);
+
   if (isLoading) {
     return <span>getting data</span>;
   }
 
+  const logOut = () => {
+    window.electronAPI.store.set(STORE_ITEMS.AUTH_TOKENS, null);
+    setAuthTokens(null);
+  };
+
+  const ProfileMenu = (
+    <Menu>
+      <Menu.Item key="0">
+        <button onClick={logOut}>Log Out</button>
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
     <div className="flex flex-row items-center bg-slate-800 h-20">
       <Logo type={LogoType.small} className="scale-[0.4]" />
@@ -26,14 +43,16 @@ export default function Header() {
         flow state
       </button>
 
-      <span className="relative mx-5">
-        <img
-          src={user.picture}
-          className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
-          alt="cannot find"
-        />
-        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
-      </span>
+      <Dropdown overlay={ProfileMenu} trigger={["click"]}>
+        <span className="relative mx-5">
+          <img
+            src={user.picture}
+            className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+            alt="cannot find"
+          />
+          <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+        </span>
+      </Dropdown>
     </div>
   );
 }