use common admin page layout, fix styling

Author: dipamsen

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import SearchPage from "./pages/SearchPage";
 import UploadPage from "./pages/UploadPage";
 import OAuthPage from "./pages/OAuthPage";
+import AdminLayout from "./pages/AdminLayout";
 import AdminDashboard from "./pages/AdminDashboard";
 import TrashPage from "./pages/TrashPage";
 import { AuthProvider } from "./utils/auth";
@@ -26,14 +27,16 @@ function App() {
               path="/oauth"
               element={<OAuthPage />}
             />
-            <Route
-              path="/admin"
-              element={<AdminDashboard />}
-            />
-            <Route
-              path="/admin/trash"
-              element={<TrashPage />}
-            />
+            <Route path="/admin" element={<AdminLayout />}>
+              <Route
+                index
+                element={<AdminDashboard />}
+              />
+              <Route
+                path="trash"
+                element={<TrashPage />}
+              />
+            </Route>
           </Routes>
         </AuthProvider>
         <Footer />

frontend/src/pages/AdminDashboard.tsx

@@ -214,11 +214,7 @@ function AdminDashboard() {
 
 
 	useEffect(() => {
-		if (!auth.isAuthenticated) {
-			window.location.assign(OAUTH_LOGIN_URL);
-		} else {
 			fetchUnapprovedPapers();
-		}
 	}, []);
 
 	const storeOcrDetails = async (paper: IAdminDashboardQP) => {
@@ -263,22 +259,8 @@ function AdminDashboard() {
 	// 	ocrDetailsLoop();
 	// }, [ocrRequests])
 
-	return auth.isAuthenticated ? (
-		<div id="admin-dashboard">
-			<Header
-				title="Admin Dashboard"
-				subtitle="Top secret documents - to be approved inside n-sided polygon shaped buildings only."
-				link={{
-					onClick: (e) => {
-						e.preventDefault();
-						auth.logout();
-					},
-					text: "Want to destroy the paper trail?",
-					button_text: "Logout",
-					icon: MdLogout,
-				}}
-			/>
-
+	return (
+		<>
 			<div className="dashboard-container">
 				{awaitingResponse ? (
 					<Spinner />
@@ -356,9 +338,7 @@ function AdminDashboard() {
           editPaper={(id) => setSearchParams({ edit: id.toString() })}
         />
       )}
-		</div>
-	) : (
-		<p>You are unauthenticated. This incident will be reported.</p>
+		</>
 	);
 }
 

frontend/src/pages/AdminLayout.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { OAUTH_LOGIN_URL, useAuthContext } from "../utils/auth";
+import { Header } from "../components/Common/Common";
+import { MdLogout } from "react-icons/md";
+import { Outlet } from "react-router-dom";
+
+function AdminLayout() {
+  const auth = useAuthContext();
+
+  useEffect(() => {
+    if (!auth.isAuthenticated) {
+      window.location.assign(OAUTH_LOGIN_URL);
+    }
+  }, []);
+
+  return auth.isAuthenticated ? (
+    <div id="admin-dashboard">
+      <Header
+        title="Admin Dashboard"
+        subtitle="Top secret documents - to be approved inside n-sided polygon shaped buildings only."
+        link={{
+          onClick: (e) => {
+            e.preventDefault();
+            auth.logout();
+          },
+          text: "Want to destroy the paper trail?",
+          button_text: "Logout",
+          icon: MdLogout,
+        }}
+      />
+
+      <Outlet />
+    </div>
+  ) : (
+    <p>You are unauthenticated. This incident will be reported.</p>
+  );
+}
+
+export default AdminLayout;

frontend/src/pages/TrashPage.tsx

@@ -95,29 +95,11 @@ function TrashPage() {
 
 
 	useEffect(() => {
-		if (!auth.isAuthenticated) {
-			window.location.assign(OAUTH_LOGIN_URL);
-		} else {
-			fetchTrashedPapers();
-		}
+		fetchTrashedPapers();
 	}, []);
 
-	return auth.isAuthenticated ? (
-		<div id="admin-dashboard">
-			<Header
-				title="Admin Dashboard"
-				subtitle="Top secret documents - to be approved inside n-sided polygon shaped buildings only."
-				link={{
-					onClick: (e) => {
-						e.preventDefault();
-						auth.logout();
-					},
-					text: "Want to destroy the paper trail?",
-					button_text: "Logout",
-					icon: MdLogout,
-				}}
-			/>
-
+	return (
+		<div id="trash-page">
 			<div className="dashboard-container">
 				{awaitingResponse ? (
 					<Spinner />
@@ -194,8 +176,6 @@ function TrashPage() {
 				)}
 			</div>
 		</div>
-	) : (
-		<p>You are unauthenticated. This incident will be reported.</p>
 	);
 }
 

frontend/src/pages/styles/trash_page.scss

@@ -29,7 +29,7 @@
 	}
 }
 
-#admin-dashboard {
+#trash-page {
 	display: flex;
 	flex-direction: column;
 	justify-items: center;
@@ -109,6 +109,7 @@
 		color: inherit;
 		font-family: inherit;
 		font-size: inherit;
+		cursor: pointer;
 
 		&.icon-btn {
 			display: flex;
@@ -120,6 +121,10 @@
 			background-color: $accent-color-darker;
 			padding: 0.5rem;
 			border-radius: 10px;
+	
+			&:hover {
+				background-color: $accent-color;
+			}
 		}
 	}
 }