From 70468f5f790d5674514a0789ce2aece561980508 Mon Sep 17 00:00:00 2001
From: melsener <melsener@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:03:58 +0300
Subject: [PATCH] fix: Change login flow

---
 .../LoginContainer/LoginContainer.tsx         | 74 +++++++++++++------
 .../containers/LoginContainer/hooks/index.ts  |  1 -
 .../LoginContainer/hooks/useLogin.ts          | 46 ------------
 3 files changed, 50 insertions(+), 71 deletions(-)
 delete mode 100644 src/client/containers/LoginContainer/hooks/index.ts
 delete mode 100644 src/client/containers/LoginContainer/hooks/useLogin.ts

diff --git a/src/client/containers/LoginContainer/LoginContainer.tsx b/src/client/containers/LoginContainer/LoginContainer.tsx
index 3d7e7201..a557b24d 100644
--- a/src/client/containers/LoginContainer/LoginContainer.tsx
+++ b/src/client/containers/LoginContainer/LoginContainer.tsx
@@ -1,12 +1,22 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useState } from "react";
 
 import { useInitialize } from "../../hooks";
-import { useLogin } from "./hooks";
+import { authentication } from "@microsoft/teams-js";
 import { Login } from "./components";
 import { Loader } from "@fluentui/react-northstar";
 import { useRouter } from "next/router";
 import { url, requester, storage } from "../../lib";
 
+const errorToText = (error?: string): string => {
+    switch (error) {
+        case "CancelledByUser":
+        case "access_denied":
+            return "You need to authorize Microsoft Teams app to connect your Zeplin projects and styleguides.";
+        default:
+            return "Authorization failed due to an API related connectivity issue. Please retry logging in.";
+    }
+};
+
 export const LoginContainer: FunctionComponent = () => {
     const {
         query: {
@@ -20,30 +30,46 @@ export const LoginContainer: FunctionComponent = () => {
     } = useRouter();
 
     const { isInitializeLoading } = useInitialize();
-    const [login, { loginError }] = useLogin({
-        onSuccess: async (code?: string) => {
-            try {
-                const { accessToken, refreshToken } = await requester.createAuthToken(String(code));
-                storage.setAccessToken(accessToken);
-                storage.setRefreshToken(refreshToken);
-            } catch (err) {
-                // TODO: log to sentry
+    const [loginError, setLoginError] = useState<string | undefined>();
+
+    async function authenticate() {
+        try {
+            const code = await authentication.authenticate({
+                height: 476,
+                url: "/api/auth/authorize"
+            });
+            return code;
+        } catch (err) {
+            setLoginError(errorToText((err as unknown as Error).message));
+        }
+    }
+
+    async function login() {
+        try {
+            const code = await authenticate();
+            if (!code) {
+                throw Error("Authentication code is missing");
             }
-            replace(id
-                ? url.getConfigurationUpdateUrl({
-                    channel: channel as string,
-                    id: id as string,
-                    resourceName: resourceName as string,
-                    resourceType: resourceType as string,
-                    theme: theme as string
-                })
-                : url.getConfigurationCreateUrl({
-
-                    channel: channel as string,
-                    theme: theme as string
-                }));
+            const { accessToken, refreshToken } = await requester.createAuthToken(String(code));
+            storage.setAccessToken(accessToken);
+            storage.setRefreshToken(refreshToken);
+        } catch (err) {
+            // TODO: log to sentry
         }
-    });
+
+        replace(id
+            ? url.getConfigurationUpdateUrl({
+                channel: channel as string,
+                id: id as string,
+                resourceName: resourceName as string,
+                resourceType: resourceType as string,
+                theme: theme as string
+            })
+            : url.getConfigurationCreateUrl({
+                channel: channel as string,
+                theme: theme as string
+            }));
+    }
 
     if (isInitializeLoading) {
         return <Loader styles={{ height: "100vh" }} />;
diff --git a/src/client/containers/LoginContainer/hooks/index.ts b/src/client/containers/LoginContainer/hooks/index.ts
deleted file mode 100644
index c07ce0b2..00000000
--- a/src/client/containers/LoginContainer/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./useLogin";
diff --git a/src/client/containers/LoginContainer/hooks/useLogin.ts b/src/client/containers/LoginContainer/hooks/useLogin.ts
deleted file mode 100644
index 6cc9a926..00000000
--- a/src/client/containers/LoginContainer/hooks/useLogin.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { authentication } from "@microsoft/teams-js";
-import { useCallback, useState } from "react";
-
-interface UseLoginParams {
-    onSuccess: (code?: string) => Promise<void>;
-}
-
-type UseLoginResult = [
-    () => void,
-    {
-        loginError?: string;
-    }
-]
-
-const errorToText = (error?: string): string => {
-    switch (error) {
-        case "CancelledByUser":
-        case "access_denied":
-            return "You need to authorize Microsoft Teams app to connect your Zeplin projects and styleguides.";
-        default:
-            return "Authorization failed due to an API related connectivity issue. Please retry logging in.";
-    }
-};
-
-export const useLogin = ({ onSuccess }: UseLoginParams): UseLoginResult => {
-    const [loginError, setError] = useState<string|undefined>();
-
-    const login = useCallback(
-        async () => {
-            try {
-                // TODO: Check output
-                const authenticateResult = await authentication.authenticate({
-                    height: 476,
-                    url: "/api/auth/authorize"
-                });
-                onSuccess();
-                return authenticateResult;
-            } catch (err: unknown) {
-                setError(errorToText((err as Error)?.message || "Authenticate Error"));
-            }
-        },
-        []
-    );
-
-    return [login, { loginError }];
-};