From 565a2125482922e2b532d62f1011baf530030523 Mon Sep 17 00:00:00 2001
From: Sean Preston <sean@ethyca.com>
Date: Thu, 25 Aug 2022 10:06:06 -0400
Subject: [PATCH] hook up API request to logout action [Unticketed] (#1139)

* hook up API request to logout action

* run format

* update import orer

* add lint:fix
---
 clients/ops/admin-ui/package.json             |  3 ++-
 .../admin-ui/src/features/auth/auth.slice.ts  | 16 +++++++++++++--
 .../ops/admin-ui/src/features/auth/types.ts   |  3 +++
 .../admin-ui/src/features/common/Header.tsx   | 20 +++++++++++--------
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/clients/ops/admin-ui/package.json b/clients/ops/admin-ui/package.json
index ff6c62771..44b2837ea 100644
--- a/clients/ops/admin-ui/package.json
+++ b/clients/ops/admin-ui/package.json
@@ -8,6 +8,7 @@
     "build": "next build && next export",
     "start": "next start",
     "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --fix --ext .ts,.tsx",
     "format": "prettier --write src/ __tests__/",
     "format:ci": "prettier --check src/ __tests__/",
     "test": "jest --watch",
@@ -70,4 +71,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}
\ No newline at end of file
diff --git a/clients/ops/admin-ui/src/features/auth/auth.slice.ts b/clients/ops/admin-ui/src/features/auth/auth.slice.ts
index a672910b7..06f968998 100644
--- a/clients/ops/admin-ui/src/features/auth/auth.slice.ts
+++ b/clients/ops/admin-ui/src/features/auth/auth.slice.ts
@@ -10,7 +10,12 @@ import { BASE_URL, STORED_CREDENTIALS_KEY } from "../../constants";
 import { addCommonHeaders } from "../common/CommonHeaders";
 import { utf8ToB64 } from "../common/utils";
 import { User } from "../user-management/types";
-import { LoginRequest, LoginResponse } from "./types";
+import {
+  LoginRequest,
+  LoginResponse,
+  LogoutRequest,
+  LogoutResponse,
+} from "./types";
 
 export interface AuthState {
   user: User | null;
@@ -93,8 +98,15 @@ export const authApi = createApi({
       }),
       invalidatesTags: () => ["Auth"],
     }),
+    logout: build.mutation<LogoutResponse, LogoutRequest>({
+      query: () => ({
+        url: "logout",
+        method: "POST",
+      }),
+      invalidatesTags: () => ["Auth"],
+    }),
   }),
 });
 
-export const { useLoginMutation } = authApi;
+export const { useLoginMutation, useLogoutMutation } = authApi;
 export const { reducer } = authSlice;
diff --git a/clients/ops/admin-ui/src/features/auth/types.ts b/clients/ops/admin-ui/src/features/auth/types.ts
index 7236658d2..34c131e22 100644
--- a/clients/ops/admin-ui/src/features/auth/types.ts
+++ b/clients/ops/admin-ui/src/features/auth/types.ts
@@ -11,3 +11,6 @@ export interface LoginResponse {
     access_token: string;
   };
 }
+
+export interface LogoutRequest {}
+export interface LogoutResponse {}
diff --git a/clients/ops/admin-ui/src/features/common/Header.tsx b/clients/ops/admin-ui/src/features/common/Header.tsx
index add8ac303..b25a4cba0 100644
--- a/clients/ops/admin-ui/src/features/common/Header.tsx
+++ b/clients/ops/admin-ui/src/features/common/Header.tsx
@@ -15,22 +15,26 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { INDEX_ROUTE } from "../../constants";
-import { logout, selectUser } from "../auth";
+import { logout, selectUser, useLogoutMutation } from "../auth";
 import { UserIcon } from "./Icon";
 import Image from "./Image";
 
 const useHeader = () => {
-  const dispatch = useDispatch();
-  const handleLogout = () => dispatch(logout());
   const { username } = useSelector(selectUser) ?? { username: "" };
-  return {
-    handleLogout,
-    username,
-  };
+  return { username };
 };
 
 const Header: React.FC = () => {
-  const { handleLogout, username } = useHeader();
+  const { username } = useHeader();
+  const [logoutMutation] = useLogoutMutation();
+  const dispatch = useDispatch();
+
+  const handleLogout = async () => {
+    logoutMutation({})
+      .unwrap()
+      .then(() => dispatch(logout()));
+  };
+
   return (
     <header>
       <Flex