💄 UI Cleanup + log out button

IsaacInsoll · Nov 9, 2024 · 818b5ad · 818b5ad
1 parent 1e47868
commit 818b5ad
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 68 deletions.
diff --git a/frontend/src/PicrIcons.tsx b/frontend/src/PicrIcons.tsx
@@ -7,6 +7,7 @@ import {
   TbInfoCircle,
   TbInfoTriangle,
   TbLink,
+  TbLogout,
   TbSearch,
   TbThumbDown,
   TbThumbUp,
@@ -38,3 +39,4 @@ export const WarningIcon = (props: IconBaseProps) => (
   <TbInfoTriangle {...props} />
 );
 export const FolderIcon = (props: IconBaseProps) => <TbFolder {...props} />;
+export const LogOutIcon = (props: IconBaseProps) => <TbLogout {...props} />;
diff --git a/frontend/src/components/Header/LoggedInHeader.tsx b/frontend/src/components/Header/LoggedInHeader.tsx
@@ -1,13 +1,16 @@
 import { useMe } from '../../hooks/useMe';
 import { Page } from '../Page';
-import { Box, Button, ButtonProps, Group, Text } from '@mantine/core';
+import { ActionIcon, Box, Button, Group, Menu, Text } from '@mantine/core';
 
 import classes from './LoggedInHeader.module.css';
 import { PicrLogo } from '../../pages/LoginForm';
 import { PicrAvatar } from '../PicrAvatar';
 import { useSetFolder } from '../../hooks/useSetFolder';
-import { useQuickFind } from '../QuickFind';
+import { useQuickFind } from '../QuickFind/useQuickFind';
 import { useNavigate } from 'react-router-dom';
+import { LogOutIcon, SearchIcon, UserSettingsIcon } from '../../PicrIcons';
+import { useSetAtom } from 'jotai/index';
+import { authKeyAtom } from '../../atoms/authAtom';
 
 export const LoggedInHeader = () => {
   const me = useMe();
@@ -29,47 +32,76 @@ const LeftSide = ({ me }) => {
   const navigate = useNavigate();
   return (
     <Box style={{ flexGrow: 1 }}>
-      <Group gap="xs">
-        <PicrLogo style={{ maxWidth: 16 }} />
-        <Text size="xs" c="dimmed">
-          <HeaderButton onClick={() => setFolder(me.folder)}>Home</HeaderButton>
-          <HeaderButton
-            onClick={() => {
-              setOpened(true);
-            }}
-          >
-            Search
-          </HeaderButton>
-          <HeaderButton onClick={() => navigate('/admin/settings')}>
-            Settings
-          </HeaderButton>
-        </Text>
+      <Group gap="md">
+        <Button
+          onClick={() => {
+            setFolder(me.folder);
+          }}
+          leftSection={<PicrLogo style={{ maxWidth: 16 }} />}
+          variant="subtle"
+          color="gray"
+          size="xs"
+        >
+          {me.folder?.name ?? 'Home'}
+        </Button>
+
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          onClick={() => {
+            setOpened(true);
+          }}
+        >
+          <SearchIcon />
+        </ActionIcon>
       </Group>
     </Box>
   );
 };
 
 const RightSide = ({ me }) => {
+  const navigate = useNavigate();
+  const logOut = useLogout();
   return (
-    <Box style={{ flexGrow: 1 }}>
-      {me.isUser ? (
-        <Group justify="right" gap="sm">
-          <Text c="dimmed" size="xs">
-            {me.name}
-          </Text>
-          <PicrAvatar user={me} size="sm" />
-        </Group>
-      ) : (
-        <></>
-      )}
-    </Box>
+    <Menu
+      shadow="md"
+      width={200}
+      openDelay={0}
+      trigger="hover"
+      position="bottom-end"
+    >
+      <Menu.Target>
+        <Button variant="subtle" px="xs" size="sm">
+          <Group justify="right" gap="sm">
+            <Text c="dimmed" size="xs">
+              {me.name}
+            </Text>
+            <PicrAvatar user={me} size="sm" />
+          </Group>
+        </Button>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Label>PICR</Menu.Label>
+        <Menu.Item
+          leftSection={<UserSettingsIcon />}
+          onClick={() => navigate('/admin/settings')}
+        >
+          Settings
+        </Menu.Item>
+        <Menu.Item leftSection={<LogOutIcon />} onClick={logOut}>
+          Log out
+        </Menu.Item>{' '}
+      </Menu.Dropdown>
+    </Menu>
   );
 };
 
-const HeaderButton = (props: ButtonProps) => {
-  return (
-    <Button variant="subtle" color="gray" size="xs" {...props}>
-      {props.children}
-    </Button>
-  );
+const useLogout = () => {
+  const setAuthKey = useSetAtom(authKeyAtom);
+  return () => {
+    console.log('logging out');
+    setAuthKey('');
+    window.location.reload();
+  };
 };
diff --git a/frontend/src/components/QuickFind.module.css b/frontend/src/components/QuickFind.module.css
diff --git a/frontend/src/components/QuickFind.tsx → ...nd/src/components/QuickFind/QuickFind.tsx b/frontend/src/components/QuickFind.tsx → ...nd/src/components/QuickFind/QuickFind.tsx
@@ -1,4 +1,4 @@
-import { useDebouncedValue, useDisclosure, useHotkeys } from '@mantine/hooks';
+import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
 import {
   Alert,
   Button,
@@ -11,31 +11,25 @@ import {
   Stack,
   TextInput,
 } from '@mantine/core';
-import { useMe } from '../hooks/useMe';
-import { MinimalFolder } from '../../types';
+import { useMe } from '../../hooks/useMe';
+import { MinimalFolder } from '../../../types';
 import { atom, useAtomValue } from 'jotai';
 import { useAtom, useSetAtom } from 'jotai/index';
 import { Suspense, useEffect, useRef, useState } from 'react';
-import { LoadingIndicator } from './LoadingIndicator';
+import { LoadingIndicator } from '../LoadingIndicator';
 import { useQuery } from 'urql';
-import { PrettyFolderPath } from './PrettyFolderPath';
-import { useSetFolder } from '../hooks/useSetFolder';
-import { InfoIcon } from '../PicrIcons';
-import { Joiner } from './FolderName';
-import { searchQuery } from './searchQuery';
-
-import classes from './QuickFind.module.css';
+import { PrettyFolderPath } from '../PrettyFolderPath';
+import { useSetFolder } from '../../hooks/useSetFolder';
+import { InfoIcon } from '../../PicrIcons';
+import { Joiner } from '../FolderName';
+import { searchQuery } from '../searchQuery';
+import { useQuickFind } from './useQuickFind';
 
 type Scope = 'all' | 'current';
 type ScopeType = 'all' | 'file' | 'folder';
 const scopeAtom = atom<Scope>('current');
 const scopeTypeAtom = atom<ScopeType>('all');
 const queryAtom = atom('');
-const quickFindOpenAtom = atom(false);
-
-export const useQuickFind = () => {
-  return useAtom(quickFindOpenAtom);
-};
 
 export const QuickFind = ({ folder }: { folder?: MinimalFolder }) => {
   const [opened, setOpened] = useQuickFind();

diff --git a/frontend/src/components/QuickFind/useQuickFind.ts b/frontend/src/components/QuickFind/useQuickFind.ts
@@ -0,0 +1,7 @@
+import { atom, useAtom } from 'jotai/index';
+
+const quickFindOpenAtom = atom(false);
+
+export const useQuickFind = () => {
+  return useAtom(quickFindOpenAtom);
+};
diff --git a/frontend/src/pages/ViewFolder.tsx b/frontend/src/pages/ViewFolder.tsx
@@ -21,7 +21,7 @@ import { ModalManager } from '../components/ModalManager';
 import { GenerateThumbnailsButton } from './GenerateThumbnailsButton';
 import { Page } from '../components/Page';
 import { useBaseViewFolderURL } from '../hooks/useBaseViewFolderURL';
-import { QuickFind } from '../components/QuickFind';
+import { QuickFind } from '../components/QuickFind/QuickFind';
 
 export const ViewFolder = () => {
   const { folderId } = useParams();

diff --git a/frontend/src/pages/management/ManageUsers.tsx b/frontend/src/pages/management/ManageUsers.tsx
@@ -10,16 +10,6 @@ import { TbUserPlus } from 'react-icons/tb';
 import { userColumns } from './userColumns';
 
 export const ManageUsers = () => {
-  return (
-    <>
-      <Suspense fallback={<ModalLoadingIndicator />}>
-        <ManageUsersBody />
-      </Suspense>
-    </>
-  );
-};
-
-const ManageUsersBody = () => {
   const [result, reQuery] = useQuery({ query: viewAdminsQuery });
   const [userId, setUserId] = useState<string | null>(null);
 

diff --git a/frontend/src/pages/management/Settings.tsx b/frontend/src/pages/management/Settings.tsx
@@ -12,7 +12,7 @@ import { useMe } from '../../hooks/useMe';
 import { Tips } from '../../components/Tips';
 import { TaskSummary } from '../../components/TaskSummary';
 import { PicrTitle } from '../../components/PicrTitle';
-import { QuickFind } from '../../components/QuickFind';
+import { QuickFind } from '../../components/QuickFind/QuickFind';
 
 export const Settings = () => {
   const { tab } = useParams();