Merge pull request #4644 from beyondessential/waitp-1205-logout

WAITP-1205: Logout button
beyondessential · Jun 16, 2023 · 3cf3581 · 3cf3581
2 parents 3ffd22b + 907e92d
commit 3cf3581
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/packages/tupaia-web/src/api/mutations/index.ts b/packages/tupaia-web/src/api/mutations/index.ts
@@ -4,8 +4,9 @@
  *
  */
 
-export * from './useLogin';
 export * from './useOneTimeLogin';
+export { useLogin } from './useLogin';
+export { useLogout } from './useLogout';
 export * from './useRegister';
 export * from './useResendVerificationEmail';
 export * from './useResetPassword';

diff --git a/packages/tupaia-web/src/api/mutations/useLogout.ts b/packages/tupaia-web/src/api/mutations/useLogout.ts
@@ -0,0 +1,17 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+
+import { useMutation, useQueryClient } from 'react-query';
+import { get } from '../api';
+
+export const useLogout = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation('logout', () => get('logout'), {
+    onSuccess: () => {
+      queryClient.invalidateQueries();
+    },
+  });
+};
diff --git a/packages/tupaia-web/src/api/queries/useUser.ts b/packages/tupaia-web/src/api/queries/useUser.ts
@@ -12,6 +12,6 @@ export const useUser = () => {
 
   return {
     ...userResponse,
-    isLoggedIn: data?.email ? true : false, // when the name is public
+    isLoggedIn: !!data?.email,
   };
 };
diff --git a/packages/tupaia-web/src/layout/UserMenu/UserMenu.tsx b/packages/tupaia-web/src/layout/UserMenu/UserMenu.tsx
@@ -9,6 +9,7 @@ import { Button, useTheme } from '@material-ui/core';
 import styled from 'styled-components';
 import { useParams } from 'react-router';
 import { useLandingPage, useUser } from '../../api/queries';
+import { useLogout } from '../../api/mutations';
 import { PopoverMenu } from './PopoverMenu';
 import { DrawerMenu } from './DrawerMenu';
 import { MenuItem } from './MenuList';
@@ -37,6 +38,7 @@ const MenuIcon = styled(MuiMenuIcon)`
 `;
 
 export const UserMenu = () => {
+  const { mutate: logout } = useLogout();
   const [menuOpen, setMenuOpen] = useState(false);
   const toggleUserMenu = () => {
     setMenuOpen(!menuOpen);
@@ -68,6 +70,12 @@ export const UserMenu = () => {
     </BaseMenuItem>
   );
 
+  const Logout = (
+    <BaseMenuItem key="logout" onClick={logout}>
+      Logout
+    </BaseMenuItem>
+  );
+
   const ViewProjects = (
     <BaseMenuItem key="projects" modal={MODAL_ROUTES.PROJECTS}>
       View projects
@@ -78,9 +86,11 @@ export const UserMenu = () => {
     <BaseMenuItem modal={MODAL_ROUTES.RESET_PASSWORD}>Change password</BaseMenuItem>
   );
   // The custom landing pages need different menu items to the other views
-  const customLandingPageMenuItems = isLoggedIn ? [VisitMainSite, ChangePassword] : [VisitMainSite];
+  const customLandingPageMenuItems = isLoggedIn
+    ? [VisitMainSite, ChangePassword, Logout]
+    : [VisitMainSite];
 
-  const baseMenuItems = isLoggedIn ? [ViewProjects, ChangePassword] : [ViewProjects];
+  const baseMenuItems = isLoggedIn ? [ViewProjects, ChangePassword, Logout] : [ViewProjects];
 
   const menuItems = isLandingPage ? customLandingPageMenuItems : baseMenuItems;