From fca5190a87a5266135c15d932a1f0c93017d3029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aljoscha=20Z=C3=B6ller?= <mail@aljoschazoeller.com>
Date: Tue, 11 Jun 2024 22:39:46 +0200
Subject: [PATCH] Fix syntax error and update logging in user authentication

Fixed a syntax error within the getBackgroundColor function in Button.styled.ts. Moreover, enhanced the logging messages in the login, logout, and loadUser functions in ProfilePage to provide more detailed information about the user's activities. Also, added SWR mutation after successful logout to ensure data revalidation.
---
 frontend/src/components/Button/Button.styled.ts |  2 +-
 frontend/src/pages/ProfilePage.tsx              | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Button/Button.styled.ts b/frontend/src/components/Button/Button.styled.ts
index a1cdb94..7c20041 100644
--- a/frontend/src/components/Button/Button.styled.ts
+++ b/frontend/src/components/Button/Button.styled.ts
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { ButtonTypeTypes } from "./Button.tsx";
 
 const getBackgroundColor = {
-  default: "var(--default-color",
+  default: "var(--default-color)",
   delete: "var(--delete-color)",
 };
 
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 0002f6f..f2fffe9 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -5,8 +5,11 @@ import axios from "axios";
 import { logtail } from "../logger.ts";
 import Button from "../components/Button/Button.tsx";
 import { useNavigate } from "react-router-dom";
+import { mutate } from "swr";
 
 export default function ProfilePage() {
+  const [user, setUser] = useState<UserType | undefined>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const navigate = useNavigate();
 
   function login() {
@@ -16,13 +19,15 @@ export default function ProfilePage() {
         : window.location.origin;
 
     window.open(host + "/oauth2/authorization/github", "_self");
+    logtail.info(`Logged in user successfully`);
   }
 
   function logout() {
     axios
       .get("/api/auth/logout")
       .then(() => {
-        logtail.info("Logged out successfully");
+        logtail.info(`Logged out user with ID ${user?.id} successfully`);
+        mutate("/", () => {}, true);
         navigate("/");
       })
       .catch((error) => {
@@ -32,18 +37,17 @@ export default function ProfilePage() {
       });
   }
 
-  const [user, setUser] = useState<UserType | undefined>();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
   function loadUser() {
     axios
       .get("/api/auth/me")
       .then((response) => {
-        logtail.info("User loaded");
+        logtail.info(
+          `Loaded user data for user with ID ${response.data.id} successfully`
+        );
         setUser(response.data);
       })
       .catch((error) => {
-        logtail.error(error.message, {
+        logtail.error("Failed to load user data", {
           error: error,
         });
       })