Reduce duplicate code in main page

src/components/About.tsx

@@ -1,18 +1,15 @@
 import { useEffect, useState } from "react";
-import Header from "./Header";
-import NavBar from "./NavBar";
-import Footer from "./Footer";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
 import axios from "axios";
 import i18n from "../i18n/i18n";
 import DOMPurify from "dompurify";
+import MainPage from "./shared/MainPage";
 
 const About = () => {
 	const { t } = useTranslation();
 	const location = useLocation();
 
-	const [displayNavigation, setNavigation] = useState(false);
 	const [aboutContent, setAboutContent] = useState<string>("");
 
 	useEffect(() => {
@@ -35,34 +32,29 @@ const About = () => {
 						setAboutContent(t("ABOUT.NOCONTENT").toString());
 					});
 			});
-           // eslint-disable-next-line react-hooks/exhaustive-deps
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]); // Listen to changes in pathname
 
+
 	return (
-		<span>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={[
-					{
-						path: "/about/imprint",
-						accessRole: "ROLE_UI_USERS_VIEW",
-						text: "ABOUT.IMPRINT",
-					},
-					{
-						path: "/about/privacy",
-						accessRole: "ROLE_UI_GROUPS_VIEW",
-						text: "ABOUT.PRIVACY",
-					},
-				]}
-			>
-			</NavBar>
+		<MainPage
+			navBarLinks={[
+				{
+					path: "/about/imprint",
+					accessRole: "ROLE_UI_USERS_VIEW",
+					text: "ABOUT.IMPRINT",
+				},
+				{
+					path: "/about/privacy",
+					accessRole: "ROLE_UI_GROUPS_VIEW",
+					text: "ABOUT.PRIVACY",
+				},
+			]}
+		>
 			<div className="about">
 				<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(aboutContent) }} ></div>
 			</div>
-			<Footer />
-		</span>
+		</MainPage>
 	);
 };
 

src/components/NavBar.tsx

@@ -14,7 +14,13 @@ import { ParseKeys } from "i18next";
 /**
  * Component that renders the nav bar
  */
-type CreateType = {
+export type NavBarLink = {
+	path: string
+	accessRole: string
+	text: ParseKeys
+}
+
+export type CreateType = {
 	accessRole: string
 	onShowModal?: () => Promise<void>
 	onHideModal?: () => void
@@ -37,11 +43,7 @@ const NavBar = ({
 	navAriaLabel?: ParseKeys
 	displayNavigation: boolean
 	setNavigation: React.Dispatch<React.SetStateAction<boolean>>
-	links: {
-		path: string
-		accessRole: string
-		text: ParseKeys
-	}[]
+	links: NavBarLink[]
 	create?: CreateType
 }) => {
 	const { t } = useTranslation();

src/components/configuration/Themes.tsx

@@ -1,101 +1,34 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
 import { getTotalThemes } from "../../selectors/themeSelectors";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
-import Notifications from "../shared/Notifications";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of events
  */
 const Themes = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const themes = useAppSelector(state => getTotalThemes(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("themes"));
-
-		// Load themes on mount
-		const loadThemes = async () => {
-			// Fetching themes from server
-			await dispatch(fetchThemes());
-
-			// Load users into table
-			if (allowLoadIntoTable) {
-				dispatch(loadThemesIntoTable());
-			}
-		};
-		loadThemes();
-
-		// Fetch themes every minute
-		const fetchThemesInterval = setInterval(loadThemes, 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchThemesInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={[
-					{
-						path: "/configuration/themes",
-						accessRole: "ROLE_UI_THEMES_VIEW",
-						text: "CONFIGURATION.NAVIGATION.THEMES",
-					},
-				]}
-				create={{
-					accessRole: "ROLE_UI_THEMES_CREATE",
-					text: "CONFIGURATION.ACTIONS.ADD_THEME",
-					resource: "themes",
-				}}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchThemes}
-						loadResourceIntoTable={loadThemesIntoTable}
-						resource={"themes"}
-					/>
-					<h1>{t("CONFIGURATION.THEMES.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: themes })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={themesTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"themes"}
+			fetchResource={fetchThemes}
+			loadResourceIntoTable={loadThemesIntoTable}
+			getTotalResources={getTotalThemes}
+			navBarLinks={[
+				{
+					path: "/configuration/themes",
+					accessRole: "ROLE_UI_THEMES_VIEW",
+					text: "CONFIGURATION.NAVIGATION.THEMES",
+				},
+			]}
+			navBarCreate={{
+				accessRole: "ROLE_UI_THEMES_CREATE",
+				text: "CONFIGURATION.ACTIONS.ADD_THEME",
+				resource: "themes",
+			}}
+			caption={"CONFIGURATION.THEMES.TABLE.CAPTION"}
+			templateMap={themesTemplateMap}
+		/>
 	);
 };