refactor: rename vars, delete comments, fix links

src/App.tsx

@@ -28,15 +28,19 @@ function App(): ReactElement {
                     <div style={divStyle} className="ons-page__container ons-container">
                         <DefaultErrorBoundary>
                             <Routes>
-                                <Route path={"/users/change-password/:user"} element={<ChangePassword />} />
+                                <Route path={"/users/change-password/:user"} element={
+                                    <ErrorBoundary errorMessageText={"Unable to load Change Password page. Please try again."}>
+                                        <ChangePassword />
+                                    </ErrorBoundary>
+                                } />
                                 <Route path={"/users/delete/:user"} element={<DeleteUser />} />
                                 <Route path="/users/change-role/:user" element={
-                                    <ErrorBoundary errorMessageText={"Unable to change role for user. Please try again."}>
+                                    <ErrorBoundary errorMessageText={"Unable to load Change Role page. Please try again."}>
                                         <ChangeRole />
                                     </ErrorBoundary>
                                 } />
                                 <Route path="/users/:user" element={
-                                    <ErrorBoundary errorMessageText={"Unable to load user. Please try again."}>
+                                    <ErrorBoundary errorMessageText={"Unable to load User Profile Page. Please try again."}>
                                         <UserProfile />
                                     </ErrorBoundary>
                                 } />

src/Components/PageNotFound.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 export default function PageNotFound() {
     return (<>
@@ -9,7 +10,7 @@ export default function PageNotFound() {
                         <h1>Page not found</h1>
                         <p>If you entered a web address, check it is correct.</p>
                         <p>If you pasted the web address, check you copied the whole address.</p>
-                        <p>If the web address is correct, or you selected a link or button, <a href="#0">contact us</a>.</p>
+                        <p>Go back <Link to={"/"}>home</Link>.</p>
                     </main>
                 </div>
             </div>

src/api/http/users.ts

@@ -15,7 +15,6 @@ async function getAllUsers(): Promise<GetUsersListResponse> {
     }
 }
 
-// NOTE: Catch block is different due to the use of AsyncContent and AsyncRequest
 async function getUser(user: string): Promise<GetUserResponse> {
     try {
         const authManager = new AuthManager();

src/pages/users/UserProfileEdits/ChangePassword.tsx

@@ -5,17 +5,19 @@ import { BreadcrumbItem } from "../../../Interfaces";
 import { AuthManager } from "blaise-login-react/blaise-login-react-client";
 import { UserRouteParams } from "../../../Interfaces/usersPage";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import UserSignInErrorPanel from "../../../Components/UserSignInErrorPanel";
 
-function ChangePassword(): ReactElement {
-    const { user }: UserRouteParams = useParams() as unknown as UserRouteParams;
-    const { state: { currentUser } } = useLocation();
+export default function ChangePassword(): ReactElement {
+    const { user: viewedUsername }: UserRouteParams = useParams() as unknown as UserRouteParams;
+    const { state } = useLocation();
+    const { currentUser } = state || { currentUser: null, viewedUserDetails: null };
     const [buttonLoading, setButtonLoading] = useState<boolean>(false);
     const [password, setPassword] = useState<string>("");
     const [confirmPassword, setConfirmPassword] = useState<string>("");
     const [message, setMessage] = useState<string>("");
     const [redirect, setRedirect] = useState<boolean>(false);
 
-    function changePassword() {
+    const changePassword = () => {
         if (password === "") {
             setMessage("Passwords cannot be blank");
             return;
@@ -27,7 +29,7 @@ function ChangePassword(): ReactElement {
 
         setButtonLoading(true);
         const authManager = new AuthManager();
-        fetch("/api/change-password/" + user, {
+        fetch("/api/change-password/" + viewedUsername, {
             "headers": Object.assign({}, {
                 "password": password
             }, authManager.authHeader())
@@ -44,24 +46,28 @@ function ChangePassword(): ReactElement {
                 setMessage("Set password failed");
                 setButtonLoading(false);
             });
-    }
+    };
 
     const breadcrumbList: BreadcrumbItem[] = [
         { link: "/", title: "Home" },
         { link: "/users/", title: "Manage users" },
-        { link: `/users/${user}`, title: "View user", state: { currentUser } }
+        { link: `/users/${viewedUsername}`, title: "View user", state: { currentUser } }
     ];
 
+    if (!currentUser) {
+        return (<UserSignInErrorPanel/>);
+    }
+
     return (
         <>
             {
                 redirect && <Navigate
-                    to={{ pathname: `/users/${user}` }}
+                    to={{ pathname: `/users/${viewedUsername}` }}
                     state={{
                         currentUser,
                         updatedPanel: {
                             visible: true,
-                            message: "Password for user " + user + " changed at " + (new Date()).toLocaleTimeString("en-UK") + " " + (new Date()).toLocaleDateString("en-UK"),
+                            message: "Password for user " + viewedUsername + " changed at " + (new Date()).toLocaleTimeString("en-UK") + " " + (new Date()).toLocaleDateString("en-UK"),
                             status: "success"
                         }
                     }}
@@ -70,7 +76,7 @@ function ChangePassword(): ReactElement {
             <Breadcrumbs BreadcrumbList={breadcrumbList} />
 
             <main id="main-content" className="ons-page__main ons-u-mt-no">
-                <h1 className="ons-u-mb-l">Change password for user <em>{user}</em></h1>
+                <h1 className="ons-u-mb-l">Change password for user <em>{viewedUsername}</em></h1>
                 <ONSPanel hidden={(message === "")} status="error">
                     {message}
                 </ONSPanel>
@@ -91,6 +97,4 @@ function ChangePassword(): ReactElement {
             </main>
         </>
     );
-}
-
-export default ChangePassword;
+}

src/pages/users/UserProfileEdits/ChangeRole.tsx

@@ -11,7 +11,7 @@ import Form from "../../../Components/form";
 import UserSignInErrorPanel from "../../../Components/UserSignInErrorPanel";
 
 export default function ChangeRole(): ReactElement {
-    const { user }: UserRouteParams = useParams() as unknown as UserRouteParams;
+    const { user: viewedUsername }: UserRouteParams = useParams() as unknown as UserRouteParams;
     const { state } = useLocation();
     const { currentUser, viewedUserDetails } = state || { currentUser: null, viewedUserDetails: null };
     const [role, setRole] = useState<string>(viewedUserDetails?.data?.role ?? "");
@@ -43,7 +43,7 @@ export default function ChangeRole(): ReactElement {
 
         if (Object.values(ValidUserRoles).includes(role as ValidUserRoles)) {
             // TODO: Change role and ensure the user has the correct permissions to server parks
-            const res = await patchUserRolesAndPermissions(user, role, viewedUserDetails.serverParks, viewedUserDetails.defaultServerPark);
+            const res = await patchUserRolesAndPermissions(viewedUsername, role, viewedUserDetails.serverParks, viewedUserDetails.defaultServerPark);
             setRedirectWithData({ redirect: true, visible: true, message: res.message, statusType: res.status === 500 ? "error" : "success" });
         } else {
             window.alert(`Invalid role: ${role}`);
@@ -55,7 +55,7 @@ export default function ChangeRole(): ReactElement {
     const breadcrumbList: BreadcrumbItem[] = [
         { link: "/", title: "Home" },
         { link: "/users/", title: "Manage users" },
-        { link: `/users/${user}`, title: "View user", state: { currentUser } }
+        { link: `/users/${viewedUsername}`, title: "View user", state: { currentUser } }
     ];
 
     useEffect(() => {
@@ -70,7 +70,7 @@ export default function ChangeRole(): ReactElement {
         <>
             {
                 redirectWithData.redirect && <Navigate
-                    to={{ pathname: `/users/${user}` }}
+                    to={{ pathname: `/users/${viewedUsername}` }}
                     state={{
                         currentUser,
                         updatedPanel: {
@@ -83,7 +83,7 @@ export default function ChangeRole(): ReactElement {
             }
             <Breadcrumbs BreadcrumbList={breadcrumbList} />
             <main id="main-content" className="ons-page__main ons-u-mt-no">
-                <h1 className="ons-u-mb-l">Change current role for user <em>{user}</em></h1>
+                <h1 className="ons-u-mb-l">Change current role for user <em>{viewedUsername}</em></h1>
                 <h2 className="ons-u-mb-l">Current role: <em>{viewedUserDetails?.data?.role ?? "N/A"}</em></h2>
                 <Form onSubmit={() => changeBlaiseUserRolesAndServerParks()}>
                     <p className="ons-field">

src/pages/users/UserProfileEdits/DeleteUser.tsx

@@ -12,7 +12,7 @@ function DeleteUser(): ReactElement {
     const [message, setMessage] = useState<string>("");
     const [redirect, setRedirect] = useState<boolean>(false);
     const [returnPanel, setReturnPanel] = useState<ReturnPanel>({ visible: false, message: "", status: "info" });
-    const { user }: UserRouteParams = useParams() as unknown as UserRouteParams;
+    const { user: viewedUsername }: UserRouteParams = useParams() as unknown as UserRouteParams;
 
     async function deleteUserConfirm() {
 
@@ -22,15 +22,15 @@ function DeleteUser(): ReactElement {
             return;
         }
 
-        const deleted = await deleteUser(user);
+        const deleted = await deleteUser(viewedUsername);
 
         if (!deleted) {
             setMessage("Failed to delete user");
             setButtonLoading(false);
             return;
         }
 
-        setReturnPanel({ visible: true, message: "User " + user + " deleted", status: "success" });
+        setReturnPanel({ visible: true, message: "User " + viewedUsername + " deleted", status: "success" });
         setRedirect(true);
     }
 
@@ -51,7 +51,7 @@ function DeleteUser(): ReactElement {
             <Breadcrumbs BreadcrumbList={breadcrumbList}/>
 
             <main id="main-content" className="ons-page__main ons-u-mt-no">
-                <h1 className="ons-u-mb-l">Are you sure you want to delete user <em className="ons-highlight">{user}</em>?</h1>
+                <h1 className="ons-u-mb-l">Are you sure you want to delete user <em className="ons-highlight">{viewedUsername}</em>?</h1>
 
                 <ONSPanel hidden={(message === "")} status="error">
                     {message}
@@ -74,7 +74,7 @@ function DeleteUser(): ReactElement {
                                         onChange={() => setConfirm(true)}
                                     />
                                     <label className="ons-radio__label " htmlFor="yes-delete-item">
-                            Yes, delete {user}
+                            Yes, delete {viewedUsername}
                                     </label>
                                 </span>
                             </p>
@@ -91,7 +91,7 @@ function DeleteUser(): ReactElement {
                                         onChange={() => setConfirm(false)}
                                     />
                                     <label className="ons-radio__label " htmlFor="no-delete-item">
-                            No, do not delete {user}
+                            No, do not delete {viewedUsername}
                                     </label>
                                 </span></p>
                         </div>