Fix typescript conflict for initial state of table field "resource"

Fixes #1149.
Fixes a typescript error that was caused by adding the empty string
to a string enumeration.

This patch fixes that removing the empty string from the type
and fixing reason the empty string was introduced in the first place
in a different manner (also see commit 28aa982).

This has the downside of forcing us to set "resource" to a concrete
value, which is technically wrong.
However, I find this preferable to allowing "resource" to be undefined.
It makes our typing tighter and easier to handle. Furthermore,
"resource" must be set on table load anyway, so the technically wrong
value gets overwritten asap.

Author: Arnei

src/components/shared/Table.tsx

@@ -1,6 +1,7 @@
 import React, { JSX, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+	getMultiSelect,
 	getPageOffset,
 	getTable,
 	getTableDirection,
@@ -60,6 +61,7 @@ const Table = ({
 	const rows = useAppSelector(state => getTableRows(state));
 	const sortBy = useAppSelector(state => getTableSorting(state));
 	const reverse = useAppSelector(state => getTableDirection(state));
+	const multiSelect = useAppSelector(state => getMultiSelect(state));
 
 	// Size options for pagination
 	const sizeOptions = [10, 20, 50, 100, 1000];
@@ -179,7 +181,7 @@ const Table = ({
 				<thead>
 					<tr>
 						{/* Only show if multiple selection is possible */}
-						{table.multiSelect ? (
+						{multiSelect ? (
 							<th className="small">
 								{/*Checkbox to select all rows*/}
 								<input
@@ -245,7 +247,7 @@ const Table = ({
 							<tr key={key}>
 								{/* Show if multi selection is possible */}
 								{/* Checkbox for selection of row */}
-								{table.multiSelect && "id" in row && (
+								{multiSelect && "id" in row && (
 									<td>
 										<input
 											type="checkbox"

src/selectors/tableSelectors.ts

@@ -16,6 +16,7 @@ export const getNumberDirectAccessiblePages = (state: RootState) => state.table.
 export const getResourceType = (state: RootState) => state.table.resource;
 export const getTableSorting = (state: RootState) => state.table.sortBy[state.table.resource];
 export const getTableDirection = (state: RootState) => state.table.reverse[state.table.resource];
+export const getMultiSelect = (state: RootState) => state.table.multiSelect[state.table.resource];
 export const getTable = (state: RootState) => state.table;
 export const getDeactivatedColumns = (state: RootState) =>
 	state.table.columns.filter((column) => column.deactivated);

src/slices/tableSlice.ts

@@ -1,5 +1,5 @@
 import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit'
-import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { aclsTableConfig, TableConfig } from '../configs/tableConfigs/aclsTableConfig';
 import { Server } from './serverSlice';
 import { Recording } from './recordingSlice';
 import { Job } from './jobSlice';
@@ -10,6 +10,15 @@ import { AclResult } from './aclSlice';
 import { ThemeDetailsType } from './themeSlice';
 import { Series } from './seriesSlice';
 import { Event } from './eventSlice';
+import { eventsTableConfig } from '../configs/tableConfigs/eventsTableConfig';
+import { seriesTableConfig } from '../configs/tableConfigs/seriesTableConfig';
+import { recordingsTableConfig } from '../configs/tableConfigs/recordingsTableConfig';
+import { jobsTableConfig } from '../configs/tableConfigs/jobsTableConfig';
+import { serversTableConfig } from '../configs/tableConfigs/serversTableConfig';
+import { servicesTableConfig } from '../configs/tableConfigs/servicesTableConfig';
+import { usersTableConfig } from '../configs/tableConfigs/usersTableConfig';
+import { groupsTableConfig } from '../configs/tableConfigs/groupsTableConfig';
+import { themesTableConfig } from '../configs/tableConfigs/themesTableConfig';
 
 /*
 Overview of the structure of the data in arrays in state
@@ -70,14 +79,14 @@ export function isSeries(row: Row | Event | Series | Recording | Server | Job |
 // TODO: Improve row typing. While this somewhat correctly reflects the current state of our code, it is rather annoying to work with.
 export type Row = { selected: boolean } & ( Event | Series | Recording | Server | Job | Service | User | Group | AclResult | ThemeDetailsType )
 
-export type Resource = "" | "events" | "series" | "recordings" | "jobs" | "servers" | "services" | "users" | "groups" | "acls" | "themes"
+export type Resource = "events" | "series" | "recordings" | "jobs" | "servers" | "services" | "users" | "groups" | "acls" | "themes"
 
 export type ReverseOptions = "ASC" | "DESC"
 
 export type TableState = {
 	status: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	error: SerializedError | null,
-	multiSelect: boolean,
+	multiSelect: { [key in Resource]: boolean },
 	resource: Resource,
 	pages: Page[],
 	columns: TableConfig["columns"],
@@ -93,8 +102,19 @@ export type TableState = {
 const initialState: TableState = {
 	status: 'uninitialized',
 	error: null,
-	multiSelect: false,
-	resource: "",
+	multiSelect: {
+		events: eventsTableConfig.multiSelect,
+		series: seriesTableConfig.multiSelect,
+		recordings: recordingsTableConfig.multiSelect,
+		jobs: jobsTableConfig.multiSelect,
+		servers: serversTableConfig.multiSelect,
+		services: servicesTableConfig.multiSelect,
+		users: usersTableConfig.multiSelect,
+		groups: groupsTableConfig.multiSelect,
+		acls: aclsTableConfig.multiSelect,
+		themes: themesTableConfig.multiSelect,
+	},
+	resource: "events",
 	pages: [],
 	columns: [],
 	sortBy: {
@@ -137,7 +157,7 @@ const tableSlice = createSlice({
 	initialState,
 	reducers: {
 		loadResourceIntoTable(state, action: PayloadAction<{
-			multiSelect: TableState["multiSelect"],
+			multiSelect: TableState["multiSelect"][Resource],
 			columns: TableConfig["columns"],
 			resource: TableState["resource"],
 			pages: TableState["pages"],
@@ -146,7 +166,7 @@ const tableSlice = createSlice({
 			reverse: TableState["reverse"][Resource],
 			totalItems: TableState["pagination"]["totalItems"],
 		}>) {
-			state.multiSelect = action.payload.multiSelect;
+			state.multiSelect[action.payload.resource] = action.payload.multiSelect;
 			state.columns = action.payload.columns;
 			state.resource = action.payload.resource;
 			state.pages = action.payload.pages;

src/thunks/tableThunks.ts

@@ -1,13 +1,4 @@
-import { eventsTableConfig } from "../configs/tableConfigs/eventsTableConfig";
-import { seriesTableConfig } from "../configs/tableConfigs/seriesTableConfig";
-import { recordingsTableConfig } from "../configs/tableConfigs/recordingsTableConfig";
-import { jobsTableConfig } from "../configs/tableConfigs/jobsTableConfig";
-import { serversTableConfig } from "../configs/tableConfigs/serversTableConfig";
-import { servicesTableConfig } from "../configs/tableConfigs/servicesTableConfig";
-import { usersTableConfig } from "../configs/tableConfigs/usersTableConfig";
-import { groupsTableConfig } from "../configs/tableConfigs/groupsTableConfig";
-import { TableConfig, aclsTableConfig } from "../configs/tableConfigs/aclsTableConfig";
-import { themesTableConfig } from "../configs/tableConfigs/themesTableConfig";
+import { TableConfig } from "../configs/tableConfigs/aclsTableConfig";
 import {
 	deselectAll,
 	loadResourceIntoTable,
@@ -78,21 +69,13 @@ export const loadEventsIntoTable = (): AppThunk => async (dispatch, getState) =>
 		resource: "events" as const,
 		rows: resource,
 		columns: events.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["events"],
 		pages: pages,
 		sortBy: table.sortBy["events"],
 		reverse: table.reverse["events"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "events") {
-		const multiSelect = eventsTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -125,21 +108,13 @@ export const loadSeriesIntoTable = (): AppThunk => (dispatch, getState) => {
 		resource: "series" as const,
 		rows: resource,
 		columns: series.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["series"],
 		pages: pages,
 		sortBy: table.sortBy["series"],
 		reverse: table.reverse["series"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "series") {
-		const multiSelect = seriesTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -154,7 +129,7 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => {
 	let tableData = {
 		resource: "recordings" as const,
 		columns: recordings.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["recordings"],
 		pages: pages,
 		sortBy: table.sortBy["recordings"],
 		reverse: table.reverse["recordings"],
@@ -164,15 +139,6 @@ export const loadRecordingsIntoTable = (): AppThunk => (dispatch, getState) => {
 		totalItems: total,
 	};
 
-	if (table.resource !== "recordings") {
-		const multiSelect = recordingsTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
-
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -190,21 +156,13 @@ export const loadJobsIntoTable = (): AppThunk => (dispatch, getState) => {
 			return { ...obj, selected: false }
 		}),
 		columns: jobs.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["jobs"],
 		pages: pages,
 		sortBy: table.sortBy["jobs"],
 		reverse: table.reverse["jobs"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "jobs") {
-		const multiSelect = jobsTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -222,21 +180,13 @@ export const loadServersIntoTable = (): AppThunk => (dispatch, getState) => {
 			return { ...obj, selected: false }
 		}),
 		columns: servers.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["servers"],
 		pages: pages,
 		sortBy: table.sortBy["servers"],
 		reverse: table.reverse["servers"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "servers") {
-		const multiSelect = serversTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -256,20 +206,11 @@ export const loadServicesIntoTable = (): AppThunk => (dispatch, getState) => {
 		totalItems: total,
 		resource: "services" as const,
 		columns: services.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["services"],
 		sortBy: table.sortBy["services"],
 		reverse: table.reverse["services"],
 	};
 
-	if (table.resource !== "services") {
-		const multiSelect = servicesTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
-
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -287,21 +228,13 @@ export const loadUsersIntoTable = (): AppThunk => (dispatch, getState) => {
 			return { ...obj, selected: false }
 		}),
 		columns: users.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["users"],
 		pages: pages,
 		sortBy: table.sortBy["users"],
 		reverse: table.reverse["users"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "users") {
-		const multiSelect = usersTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -319,21 +252,13 @@ export const loadGroupsIntoTable = (): AppThunk => (dispatch, getState) => {
 			return { ...obj, selected: false }
 		}),
 		columns: groups.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["groups"],
 		pages: pages,
 		sortBy: table.sortBy["groups"],
 		reverse: table.reverse["groups"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "groups") {
-		const multiSelect = groupsTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -351,20 +276,13 @@ export const loadAclsIntoTable = (): AppThunk => (dispatch, getState) => {
 			return { ...obj, selected: false }
 		}),
 		columns: acls.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["acls"],
 		pages: pages,
 		sortBy: table.sortBy["acls"],
 		reverse: table.reverse["acls"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "acls") {
-		const multiSelect = aclsTableConfig.multiSelect;
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };
 
@@ -382,21 +300,13 @@ export const loadThemesIntoTable = (): AppThunk => (dispatch, getState) => {
 			return { ...obj, selected: false }
 		}),
 		columns: themes.columns,
-		multiSelect: table.multiSelect,
+		multiSelect: table.multiSelect["themes"],
 		pages: pages,
 		sortBy: table.sortBy["themes"],
 		reverse: table.reverse["themes"],
 		totalItems: total,
 	};
 
-	if (table.resource !== "themes") {
-		const multiSelect = themesTableConfig.multiSelect;
-
-		tableData = {
-			...tableData,
-			multiSelect: multiSelect,
-		};
-	}
 	dispatch(loadResourceIntoTable(tableData));
 };