From b910e9fc9e96c3e9b81ef696f5a41b99e06252b8 Mon Sep 17 00:00:00 2001
From: Sigrid <55406589+sigtheidiot@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:10:55 +0200
Subject: [PATCH] Change to functions (#123)

---
 .../components/vibes-buttons/SignInButton.tsx | 40 +++++++++----------
 .../vibes-buttons/SignInSignOutButton.tsx     | 27 +++++++------
 .../vibes-buttons/SignOutButton.tsx           |  4 +-
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/vibes-buttons/SignInButton.tsx b/frontend/src/components/vibes-buttons/SignInButton.tsx
index 1066db83..72b53be8 100644
--- a/frontend/src/components/vibes-buttons/SignInButton.tsx
+++ b/frontend/src/components/vibes-buttons/SignInButton.tsx
@@ -3,25 +3,25 @@ import { useMsal } from "@azure/msal-react";
 import LoginIcon from "@mui/icons-material/Login";
 import { IconButton } from "@mui/material";
 
-const SignInButton = () => {
-    const { instance } = useMsal();
+export default function SignInButton() {
+  const { instance } = useMsal();
 
-    const handleLogin = () => {
-        instance.loginRedirect(loginRequest).catch((e) => { console.error(`loginRedirect failed: ${e}`) })
-    };
+  function handleLogin() {
+    instance.loginRedirect(loginRequest).catch((e) => {
+      console.error(`loginRedirect failed: ${e}`);
+    });
+  }
 
-    return (
-        <div>
-            <IconButton
-                onClick={handleLogin}
-                size="small"
-                color="inherit"
-                sx={{ ml: 2 }}
-            >
-                <LoginIcon />
-            </IconButton>
-        </div>
-    )
-};
-
-export default SignInButton;
\ No newline at end of file
+  return (
+    <div>
+      <IconButton
+        onClick={handleLogin}
+        size="small"
+        color="inherit"
+        sx={{ ml: 2 }}
+      >
+        <LoginIcon />
+      </IconButton>
+    </div>
+  );
+}
diff --git a/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx b/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx
index 0c1529ad..3bbf1b49 100644
--- a/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx
+++ b/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx
@@ -3,18 +3,19 @@ import { useIsAuthenticated, useMsal } from "@azure/msal-react";
 import SignInButton from "./SignInButton";
 import SignOutButton from "./SignOutButton";
 
-const SignInSignOutButton = () => {
-    const { inProgress } = useMsal();
-    const isAuthenticated = useIsAuthenticated();
+export default function SignInSignOutButton() {
+  const { inProgress } = useMsal();
+  const isAuthenticated = useIsAuthenticated();
 
-    if (isAuthenticated) {
-        return <SignOutButton />;
-    } else if (inProgress !== InteractionStatus.Startup && inProgress !== InteractionStatus.HandleRedirect) {
-        // inProgress check prevents sign-in button from being displayed briefly after returning from a redirect sign-in. Processing the server response takes a render cycle or two
-        return <SignInButton />;
-    } else {
-        return null;
-    }
+  if (isAuthenticated) {
+    return <SignOutButton />;
+  } else if (
+    inProgress !== InteractionStatus.Startup &&
+    inProgress !== InteractionStatus.HandleRedirect
+  ) {
+    // inProgress check prevents sign-in button from being displayed briefly after returning from a redirect sign-in. Processing the server response takes a render cycle or two
+    return <SignInButton />;
+  } else {
+    return null;
+  }
 }
-
-export default SignInSignOutButton;
\ No newline at end of file
diff --git a/frontend/src/components/vibes-buttons/SignOutButton.tsx b/frontend/src/components/vibes-buttons/SignOutButton.tsx
index 07dcbaf1..ddbe216b 100644
--- a/frontend/src/components/vibes-buttons/SignOutButton.tsx
+++ b/frontend/src/components/vibes-buttons/SignOutButton.tsx
@@ -15,11 +15,11 @@ export default function SignOutButton() {
   const [anchorEl, setAnchorEl] = useState<AnchorProp>(null);
   const open = Boolean(anchorEl);
 
-  const handleLogout = () => {
+  function handleLogout() {
     instance.logoutRedirect().catch((e) => {
       console.error(`logoutPopup failed: ${e}`);
     });
-  };
+  }
 
   return (
     <div>