migrates logout method

softwaremill · Aug 25, 2024 · 5ec529f · 5ec529f
1 parent 16ac4df
commit 5ec529f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 24 deletions.
diff --git a/ui/src/main/Main/Main.tsx b/ui/src/main/Main/Main.tsx
@@ -3,6 +3,7 @@ import useLoginOnApiKey from "./useLoginOnApiKey";
 import useLocalStoragedApiKey from "./useLocalStoragedApiKey";
 import { UserContext } from "contexts";
 import { Top, ForkMe, Routes, Footer, Loader } from "../";
+import { logout } from "services";
 
 export const Main: React.FC = () => {
  const {
@@ -18,7 +19,7 @@ export const Main: React.FC = () => {
 
  return (
  <>
- <Top />
+ <Top onLogout={logout} />
  <ForkMe>
  <Routes />
  </ForkMe>

diff --git a/ui/src/main/Top/Top.test.tsx b/ui/src/main/Top/Top.test.tsx
@@ -3,7 +3,6 @@ import { userEvent } from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import { UserContext, UserState, initialUserState } from "contexts";
 import { Top } from "./Top";
-import { userService } from "../../services";
 import { renderWithClient } from "../../tests";
 
 const loggedUserState: UserState = {
@@ -12,7 +11,7 @@ const loggedUserState: UserState = {
  loggedIn: true,
 };
 
-jest.mock("services");
+const onLogout = jest.fn();
 
 const dispatch = jest.fn();
 
@@ -24,7 +23,7 @@ test("renders brand name", () => {
  renderWithClient(
  <MemoryRouter initialEntries={[""]}>
  <UserContext.Provider value={{ state: initialUserState, dispatch }}>
- <Top />
+ <Top onLogout={onLogout} />
  </UserContext.Provider>
  </MemoryRouter>,
  );
@@ -36,7 +35,7 @@ test("renders nav bar unlogged user", () => {
  renderWithClient(
  <MemoryRouter initialEntries={["/main"]}>
  <UserContext.Provider value={{ state: initialUserState, dispatch }}>
- <Top />
+ <Top onLogout={onLogout} />
  </UserContext.Provider>
  </MemoryRouter>,
  );
@@ -51,7 +50,7 @@ test("renders nav bar for logged user", () => {
  renderWithClient(
  <MemoryRouter initialEntries={["/main"]}>
  <UserContext.Provider value={{ state: loggedUserState, dispatch }}>
- <Top />
+ <Top onLogout={onLogout} />
  </UserContext.Provider>
  </MemoryRouter>,
  );
@@ -63,12 +62,12 @@ test("renders nav bar for logged user", () => {
 });
 
 test("handles logout logged user", async () => {
- (userService.logout as jest.Mock).mockResolvedValueOnce({});
+ onLogout.mockResolvedValueOnce({});
 
  renderWithClient(
  <MemoryRouter initialEntries={["/main"]}>
  <UserContext.Provider value={{ state: loggedUserState, dispatch }}>
- <Top />
+ <Top onLogout={onLogout} />
  </UserContext.Provider>
  </MemoryRouter>,
  );

diff --git a/ui/src/main/Top/Top.tsx b/ui/src/main/Top/Top.tsx
@@ -6,15 +6,18 @@ import { Link } from "react-router-dom";
 import { BiPowerOff, BiHappy } from "react-icons/bi";
 import { UserContext } from "contexts";
 import { useMutation } from "react-query";
-import { userService } from "../../services";
 
-export const Top: React.FC = () => {
+type Props = {
+ onLogout(apiKey: string): Promise<void>;
+};
+
+export const Top: React.FC<Props> = ({ onLogout }) => {
  const {
  state: { user, loggedIn, apiKey },
  dispatch,
  } = React.useContext(UserContext);
 
- const handleLogOut = useMutation(() => userService.logout(apiKey), {
+ const handleLogOut = useMutation((apiKeyValue: string) => onLogout(apiKeyValue), {
  onSuccess: () => dispatch({ type: "LOG_OUT" }),
  });
 
@@ -34,13 +37,13 @@ export const Top: React.FC = () => {
  Home
  </Nav.Link>
  <div className="flex-grow-1" />
- {loggedIn ? (
+ {loggedIn && apiKey !== null ? (
  <>
  <Nav.Link as={Link} to="/profile" className="text-lg-end">
  <BiHappy />
  &nbsp;{user?.login}
  </Nav.Link>{" "}
- <Nav.Link className="text-lg-end" onClick={() => handleLogOut.mutate()}>
+ <Nav.Link className="text-lg-end" onClick={() => handleLogOut.mutate(apiKey)}>
  <BiPowerOff />
  &nbsp;Logout
  </Nav.Link>

diff --git a/ui/src/pages/Login/Login.test.tsx b/ui/src/pages/Login/Login.test.tsx
@@ -9,8 +9,6 @@ import { renderWithClient } from "tests";
 const history = createMemoryHistory({ initialEntries: ["/login"] });
 const dispatch = jest.fn();
 
-jest.mock("services");
-
 const onLogin = jest.fn();
 
 beforeEach(() => {

diff --git a/ui/src/pages/Register/Register.test.tsx b/ui/src/pages/Register/Register.test.tsx
@@ -9,8 +9,6 @@ import { renderWithClient } from "tests";
 const history = createMemoryHistory({ initialEntries: ["/login"] });
 const dispatch = jest.fn();
 
-jest.mock("services");
-
 const onRegisterUser = jest.fn();
 
 beforeEach(() => {

diff --git a/ui/src/services/UserService/UserService.ts b/ui/src/services/UserService/UserService.ts
@@ -30,12 +30,21 @@ export const register = (payload: RegisterParamsPayload) =>
  .then((client) => client.postUserRegister(null, payload))
  .then(({ data }) => apiKeySchema.validate(data));
 
-const logout = (apiKey: string | null) =>
- _securedRequest(apiKey, {
- method: "POST",
- url: `${context}/logout`,
- data: { apiKey },
- }).then(({ data }) => emptySchema.validate(data));
+export const logout = (apiKey: string) =>
+ api
+ .getClient<Client>()
+ .then((client) =>
+ client.postUserLogout(
+ null,
+ { apiKey },
+ {
+ headers: {
+ Authorization: `Bearer ${apiKey}`,
+ },
+ },
+ ),
+ )
+ .then(({ data }) => emptySchema.validate(data).then(() => undefined));
 
 const getCurrentUser = (apiKey: string | null) =>
  _securedRequest(apiKey, {
@@ -66,7 +75,6 @@ const _securedRequest = (apiKey: string | null, config: AxiosRequestConfig) =>
  });
 
 export const userService = {
- logout,
  getCurrentUser,
  changeProfileDetails,
  changePassword,