Memoize getFilters

Fixes #1242.

This should stop the warning spam whenever
filters are used.
I except performance gains to be negligble though.

Author: Arnei

src/components/shared/DateTimeCell.tsx

@@ -7,6 +7,7 @@ import { renderValidDate } from "../../utils/dateUtils";
 import { IconButton } from "../shared/IconButton";
 import { ParseKeys } from "i18next";
 import { AsyncThunk } from "@reduxjs/toolkit";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -19,7 +20,7 @@ const DateTimeCell = ({
 	loadResourceIntoTable,
 	tooltipText,
 }: {
-	resource: string
+	resource: Resource
 	date: string
 	filterName: string
 	fetchResource: AsyncThunk<any, void, any>

src/components/shared/MultiValueCell.tsx

@@ -5,6 +5,7 @@ import { AppThunk, useAppDispatch, useAppSelector } from "../../store";
 import { IconButton } from "../shared/IconButton";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the presenters cells of events in the table view
@@ -17,7 +18,7 @@ const MultiValueCell = ({
 	loadResourceIntoTable,
 	tooltipText,
 }: {
-	resource: string
+	resource: Resource
 	values: string[]
 	filterName: string
 	fetchResource: AsyncThunk<any, void, any>

src/components/shared/TableFilterProfiles.tsx

@@ -18,6 +18,7 @@ import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the table filter profiles in the upper right corner when clicked on settings icon of the
@@ -34,7 +35,7 @@ const TableFiltersProfiles = ({
 	setFilterSettings: (_: boolean) => void,
 	loadResource: AsyncThunk<any, void, any>,
 	loadResourceIntoTable: () => AppThunk,
-	resource: string,
+	resource: Resource,
 }) => {
 	const dispatch = useAppDispatch();
 

src/components/shared/TableFilters.tsx

@@ -31,6 +31,7 @@ import DropDown from "./DropDown";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -42,7 +43,7 @@ const TableFilters = ({
 }: {
 	loadResource: AsyncThunk<any, void, any>,
 	loadResourceIntoTable: () => AppThunk,
-	resource: string,
+	resource: Resource,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();

src/selectors/tableFilterSelectors.ts

@@ -1,4 +1,6 @@
+import { createSelector } from "reselect";
 import { RootState } from "../store";
+import { Resource } from "../slices/tableSlice";
 
 /**
  * This file contains selectors regarding table filters
@@ -10,5 +12,9 @@ export const getTextFilter = (state: RootState) => state.tableFilters.textFilter
 export const getSelectedFilter = (state: RootState) => state.tableFilters.selectedFilter;
 export const getSecondFilter = (state: RootState) => state.tableFilters.secondFilter;
 export const getCurrentFilterResource = (state: RootState) => state.tableFilters.currentResource;
-export const getFilters = (state: RootState, resource: string) =>
-	state.tableFilters.data.filter(obj => obj.resource === resource);
+export const getFilters = createSelector(
+	[getAllFilters, (state, resource: Resource) => resource],
+	(filters, resource) => {
+		return filters.filter(obj => obj.resource === resource);
+	}
+);