From bb2641f44791d010ab78eebbb699d2ede0bcafd3 Mon Sep 17 00:00:00 2001
From: stacksmash76 <98354295+stacksmash76@users.noreply.github.com>
Date: Sat, 18 Jun 2022 07:27:19 +0200
Subject: [PATCH] fix(web): correctly replace logout url (#316)

* chore(ErrorPage): clean up code, fix typo
fix(Logout): replace /logout URL after logging out to /

* chore: remove needless TS type export
---
 web/src/components/alerts/ErrorPage.tsx | 15 +++++----------
 web/src/screens/auth/login.tsx          |  2 +-
 web/src/screens/auth/logout.tsx         | 10 ++++++++--
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/src/components/alerts/ErrorPage.tsx b/web/src/components/alerts/ErrorPage.tsx
index b9fd295..e3152b9 100644
--- a/web/src/components/alerts/ErrorPage.tsx
+++ b/web/src/components/alerts/ErrorPage.tsx
@@ -3,20 +3,15 @@ import type { FallbackProps } from "react-error-boundary";
 import { RefreshIcon } from "@heroicons/react/solid";
 
 export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
-  const stack = new StackTracey(error).withSources();
+  const stack = new StackTracey(error);
   const summary = stack.clean().asTable({
     maxColumnWidths: {
       callee: 48,
       file: 48,
-      sourceLine: 256
+      sourceLine: 384
     }
   });
 
-  const type = String(
-    (error && error.constructor && error.constructor.name)
-    || typeof (error)
-  );
-  const msg = String(error && error.message);
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl">
@@ -59,7 +54,7 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
                 clipRule="evenodd"
               />
             </svg>
-            <h3 className="text-lg font-medium text-red-700 dark:text-red-800">{type}: {msg}</h3>
+            <h3 className="text-lg font-medium text-red-700 dark:text-red-800">{error.toString()}</h3>
           </div>
           {summary ? (
             <pre className="mt-2 mb-4 text-sm text-red-700 dark:text-red-800 overflow-x-auto">
@@ -67,7 +62,7 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
             </pre>
           ) : null}
           <span className="block text-gray-800 mb-2 text-md">
-            You can try resetting the page page using the button provided below.
+            You can try resetting the page state using the button provided below.
             However, this is not guaranteed to fix the error.
           </span>
           <button
@@ -85,4 +80,4 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/web/src/screens/auth/login.tsx b/web/src/screens/auth/login.tsx
index e594c1c..88e1030 100644
--- a/web/src/screens/auth/login.tsx
+++ b/web/src/screens/auth/login.tsx
@@ -8,7 +8,7 @@ import { APIClient } from "../../api/APIClient";
 import { AuthContext } from "../../utils/Context";
 import { PasswordInput, TextInput } from "../../components/inputs/text";
 
-export type LoginFormFields = {
+type LoginFormFields = {
   username: string;
   password: string;
 };
diff --git a/web/src/screens/auth/logout.tsx b/web/src/screens/auth/logout.tsx
index 242246b..8ba76aa 100644
--- a/web/src/screens/auth/logout.tsx
+++ b/web/src/screens/auth/logout.tsx
@@ -1,19 +1,25 @@
 import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 
 import { APIClient } from "../../api/APIClient";
-import Toast from "../../components/notifications/Toast";
 import { AuthContext } from "../../utils/Context";
+import Toast from "../../components/notifications/Toast";
 
 export const Logout = () => {
+  const navigate = useNavigate();
   useEffect(
     () => {
       APIClient.auth.logout()
         .then(() => {
+          AuthContext.reset();
           toast.custom((t) => (
             <Toast type="success" body="You have been logged out. Goodbye!" t={t} />
           ));
-          AuthContext.reset();
+
+          // Dirty way to fix URL without triggering a re-render.
+          // Ideally, we'd move the logout component to a function.
+          setInterval(() => navigate("/", { replace: true }), 250);
         });
     },
     []