Merge pull request #1121 from Arnei/reduce-api-requests

Reduce api requests

Author: Arnei

src/components/About.tsx

@@ -47,13 +47,11 @@ const About = () => {
 					{
 						path: "/about/imprint",
 						accessRole: "ROLE_UI_USERS_VIEW",
-						loadFn: () => { },
 						text: "ABOUT.IMPRINT"
 					},
 					{
 						path: "/about/privacy",
 						accessRole: "ROLE_UI_GROUPS_VIEW",
-						loadFn: () => { },
 						text: "ABOUT.PRIVACY"
 					},
 				]}

src/components/Header.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
+import { useNavigate } from "react-router";
 import i18n from "../i18n/i18n";
 import languages from "../i18n/languages";
 import opencastLogo from "../img/opencast-white.svg?url";
 import { setSpecificServiceFilter } from "../slices/tableFilterSlice";
-import { loadServicesIntoTable } from "../thunks/tableThunks";
 import { getErrorCount, getHealthStatus } from "../selectors/healthSelectors";
 import {
 	getOrgProperties,
@@ -73,14 +72,6 @@ const Header = () => {
 		registrationModalRef.current?.open()
 	};
 
-	const redirectToServices = async () => {
-		// Load services into table
-		await dispatch(loadServicesIntoTable());
-
-		// set the action filter value of services to true
-		await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" }));
-	};
-
 	const showHotKeyCheatSheet = () => {
 		hotKeyCheatSheetModalRef.current?.open()
 	};
@@ -216,7 +207,6 @@ const Header = () => {
 							{displayMenuNotify && (
 								<MenuNotify
 									healthStatus={healthStatus}
-									redirectToServices={redirectToServices}
 								/>
 							)}
 						</div>
@@ -302,20 +292,27 @@ const MenuLang = () => {
 
 const MenuNotify = ({
 	healthStatus,
-	redirectToServices
 }: {
 	healthStatus: HealthStatus[],
-	redirectToServices: () => Promise<void>,
 }) => {
+	const dispatch = useAppDispatch();
+	const navigate = useNavigate();
+
+	const redirectToServices = async () => {
+		// set the action filter value of services to true
+		await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" }));
+		navigate("/systems/services");
+	};
+
 	return (
 		<ul className="dropdown-ul">
 			{/* For each service in the serviceList (Background Services) one list item */}
 			{healthStatus.map((service, key) => (
 				<li key={key}>
 					{!!service.status && (
-						<Link
-							to="/systems/services"
-							onClick={async () => await redirectToServices()}
+						<button
+							className="button-like-anchor"
+							onClick={() => redirectToServices()}
 						>
 							<span> {service.name} </span>
 							{service.error ? (
@@ -327,7 +324,7 @@ const MenuNotify = ({
 									{service.status}
 								</span>
 							)}
-						</Link>
+						</button>
 					)}
 				</li>
 			))}

src/components/NavBar.tsx

@@ -1,12 +1,11 @@
 import React, { useRef } from "react";
 import { Link, useLocation } from "react-router";
 import { hasAccess } from "../utils/utils";
-import { AppDispatch, useAppDispatch, useAppSelector } from "../store";
+import { useAppSelector } from "../store";
 import { getUserInformation } from "../selectors/userInfoSelectors";
 import cn from "classnames";
 import { useTranslation } from "react-i18next";
 import MainNav from "./shared/MainNav";
-import { setOffset } from "../slices/tableSlice";
 import NewResourceModal, { NewResource } from "./shared/NewResourceModal";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ModalHandle } from "./shared/modals/Modal";
@@ -15,13 +14,6 @@ import { ParseKeys } from "i18next";
 /**
  * Component that renders the nav bar
  */
-type LinkType = {
-	path: string
-	accessRole: string
-	loadFn: (dispatch: AppDispatch) => void
-	text: ParseKeys
-}
-
 type CreateType = {
 	accessRole: string
 	onShowModal?: () => Promise<void>
@@ -45,12 +37,14 @@ const NavBar = ({
 	navAriaLabel?: ParseKeys
 	displayNavigation: boolean
 	setNavigation: React.Dispatch<React.SetStateAction<boolean>>
-	links: LinkType[]
+	links: {
+		path: string
+		accessRole: string
+		text: ParseKeys
+	}[]
 	create?: CreateType
 }) => {
-
 	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
 	const location = useLocation();
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -99,13 +93,6 @@ const NavBar = ({
 							key={index}
 							to={link.path}
 							className={cn({ active: location.pathname === link.path || (location.pathname === "/" && link.path === "/events/events") })}
-							onClick={() => {
-								if (location.pathname !== link.path) {
-									// Reset the current page to first page
-									dispatch(setOffset(0));
-								}
-								link.loadFn(dispatch)
-							}}
 						>
 							{t(link.text)}
 						</Link>

src/components/configuration/Themes.tsx

@@ -13,6 +13,7 @@ import MainView from "../MainView";
 import Footer from "../Footer";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
+import { resetTableProperties } from "../../slices/tableSlice";
 
 /**
  * This component renders the table view of events
@@ -25,27 +26,37 @@ const Themes = () => {
 
 	const themes = useAppSelector(state => getTotalThemes(state));
 
-	const loadThemes = async () => {
-		// Fetching themes from server
-		await dispatch(fetchThemes());
+	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
 
-		// Load users into table
-		dispatch(loadThemesIntoTable());
-	};
+		// Clear table of previous data
+		dispatch(resetTableProperties());
 
-	useEffect(() => {
 		dispatch(fetchFilters("themes"));
 
 		// Reset text filter
 		dispatch(editTextFilter(""));
 
 		// 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
 		let fetchThemesInterval = setInterval(loadThemes, 5000);
 
-		return () => clearInterval(fetchThemesInterval);
+		return () => {
+			allowLoadIntoTable = false;
+			clearInterval(fetchThemesInterval);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -59,7 +70,6 @@ const Themes = () => {
 					{
 						path: "/configuration/themes",
 						accessRole: "ROLE_UI_THEMES_VIEW",
-						loadFn: loadThemes,
 						text: "CONFIGURATION.NAVIGATION.THEMES"
 					},
 				]}

src/components/events/Events.tsx

@@ -36,8 +36,9 @@ import {
 } from "../../slices/eventSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
 import { showModal } from "../../selectors/eventDetailsSelectors";
-import { eventsLinks, loadEvents } from "./partials/EventsNavigation";
+import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
+import { resetTableProperties } from "../../slices/tableSlice";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -67,6 +68,12 @@ const Events = () => {
 	let location = useLocation();
 
 	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
+
+		// Clear redux of previous table data
+		dispatch(resetTableProperties());
+
 		dispatch(fetchFilters("events"))
 
 		// Reset text filter
@@ -76,7 +83,17 @@ const Events = () => {
 		dispatch(setShowActions(false));
 
 		// Load events on mount
-		loadEvents(dispatch);
+		const loadEvents = async () => {
+			// Fetching events from server
+			await dispatch(fetchEvents());
+
+			// Load events into table
+			if (allowLoadIntoTable) {
+				dispatch(loadEventsIntoTable());
+			}
+		}
+		// call the function
+		loadEvents();
 
 		// Function for handling clicks outside of an open dropdown menu
 		const handleClickOutside = (e: MouseEvent) => {
@@ -89,12 +106,13 @@ const Events = () => {
 		};
 
 		// Fetch events every five seconds
-		let fetchEventsInterval = setInterval(() => loadEvents(dispatch), 5000);
+		let fetchEventsInterval = setInterval(() => loadEvents(), 5000);
 
 		// Event listener for handle a click outside of dropdown menu
 		window.addEventListener("mousedown", handleClickOutside);
 
 		return () => {
+			allowLoadIntoTable = false;
 			window.removeEventListener("mousedown", handleClickOutside);
 			clearInterval(fetchEventsInterval);
 		};

src/components/events/Series.tsx

@@ -26,9 +26,10 @@ import {
 	showActionsSeries,
 } from "../../slices/seriesSlice";
 import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
-import { eventsLinks, loadSeries } from "./partials/EventsNavigation";
+import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { resetTableProperties } from "../../slices/tableSlice";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -52,6 +53,12 @@ const Series = () => {
 	const showActions = useAppSelector(state => isShowActions(state));
 
 	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
+
+		// Clear table of previous data
+		dispatch(resetTableProperties());
+
 		dispatch(fetchFilters("series"))
 
 		// Reset text filer
@@ -61,7 +68,16 @@ const Series = () => {
 		dispatch(showActionsSeries(false));
 
 		// Load events on mount
-		loadSeries(dispatch);
+		const loadSeries = async() => {
+			// fetching series from server
+			await dispatch(fetchSeries());
+
+			// load series into table
+			if (allowLoadIntoTable) {
+				dispatch(loadSeriesIntoTable());
+			}
+		};
+		loadSeries();
 
 		// Function for handling clicks outside of an dropdown menu
 		const handleClickOutside = (e: MouseEvent) => {
@@ -74,12 +90,13 @@ const Series = () => {
 		};
 
 		// Fetch series every minute
-		let fetchSeriesInterval = setInterval(() => loadSeries(dispatch), 5000);
+		let fetchSeriesInterval = setInterval(() => loadSeries(), 5000);
 
 		// Event listener for handle a click outside of dropdown menu
 		window.addEventListener("mousedown", handleClickOutside);
 
 		return () => {
+			allowLoadIntoTable = false;
 			window.removeEventListener("mousedown", handleClickOutside);
 			clearInterval(fetchSeriesInterval);
 		};

src/components/events/partials/EventsNavigation.tsx

@@ -1,49 +1,21 @@
 import { ParseKeys } from "i18next";
-import { fetchEvents } from "../../../slices/eventSlice";
-import { fetchSeries } from "../../../slices/seriesSlice";
-import { fetchStats } from "../../../slices/tableFilterSlice";
-import { AppDispatch } from "../../../store";
-import { loadEventsIntoTable, loadSeriesIntoTable } from "../../../thunks/tableThunks";
 
 /**
  * Utility file for the navigation bar
  */
-
-export const loadEvents = (dispatch: AppDispatch) => {
-	// Fetching stats from server
-	dispatch(fetchStats());
-
-	// Fetching events from server
-	dispatch(fetchEvents());
-
-	// Load events into table
-	dispatch(loadEventsIntoTable());
-};
-
-export const loadSeries = (dispatch: AppDispatch) => {
-	// fetching series from server
-	dispatch(fetchSeries());
-
-	// load series into table
-	dispatch(loadSeriesIntoTable());
-};
-
 export const eventsLinks: {
 	path: string,
 	accessRole: string,
-	loadFn: (dispatch: AppDispatch) => void,
 	text: ParseKeys
 }[] = [
 	{
 		path: "/events/events",
 		accessRole: "ROLE_UI_EVENTS_VIEW",
-		loadFn: loadEvents,
 		text: "EVENTS.EVENTS.NAVIGATION.EVENTS"
 	},
 	{
 		path: "/events/series",
 		accessRole: "ROLE_UI_SERIES_VIEW",
-		loadFn: loadSeries,
 		text: "EVENTS.EVENTS.NAVIGATION.SERIES"
 	}
 ];