Use data manager package

package.json

@@ -34,6 +34,7 @@
 		"@mui/lab": "^5.0.0-alpha.48",
 		"@mui/material": "^5.0.0",
 		"date-fns": "^2.8.1",
+		"frontal-data-manager": "^1.0.3",
 		"i18next": "^20.6.0",
 		"isemail": "^3.2.0",
 		"javascript-time-ago": "^2.3.10",

src/hooks/useData.ts

@@ -1,58 +1,19 @@
-import { useEffect, useState } from 'react';
-import { DataService } from '../infrastructure/data-service-base';
 import { handleServerRestError } from '../services/notifications.service';
+import { DataService, useData as originalUseData } from 'frontal-data-manager';
 
 export interface DataHookOptions {
 	/** Don't show toast message on data fetch failure */
 	skipErrorToastOnFailure?: boolean;
 }
 
 /**
- * Data hook, used to get the latest data and rerender in case of data update and also give the fetching mode.
- * Under the hood it's subscribe to the service data on mount and unsubscribe on unmount.
+ * Data hook, wrapping the @see useData from 'frontal-data-manager' package, just with injection to generic errorHandler by @see handleServerRestError
  * @param dataService The data service to get.
  * @param options The hook options
  * @returns A a collection of data and the loading mode, as [data, loading, error].
  */
 export function useData<T>(dataService: DataService<T>, options: DataHookOptions = {}): [T, boolean, boolean] {
-	// The data state, init with default value of not fetched yet
-	const [data, setData] = useState(dataService.data);
-	// The loading state
-	const [loading, setLoading] = useState<boolean>(true);
-	// The error flag in case of fetch issue
-	const [error, setError] = useState<boolean>(false);
-
-	useEffect(() => {
-		let dataDetacher: () => void;
-		// Mark as "loading"
-		setLoading(true);
-		(async () => {
-			try {
-				// Subscribe to the data
-				dataDetacher = await dataService.attachDataSubs((data) => {
-					setError(false);
-					setData(data);
-				});
-			} catch (error) {
-				// Mark as error accrue
-				setError(true);
-				console.error(`[useData] failed to load data ${JSON.stringify(error)}`);
-				if (!options.skipErrorToastOnFailure) {
-					await handleServerRestError(error);
-				}
-			}
-			// Mark "loading" OFF
-			setLoading(false);
-		})();
-
-		return () => {
-			// unsubscribe the feed on component unmount
-			dataDetacher?.();
-		};
-		// Run useEffect only once on the component mount
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
+	const [data, loading, error] = originalUseData(dataService, { ...options, errorHandler: handleServerRestError });
 	// Return the latest data and loading state
 	return [data, loading, error];
 }

src/infrastructure/session-manager.ts

@@ -1,5 +1,5 @@
+import { DataService } from 'frontal-data-manager';
 import { AppRoutes } from './consts';
-import { DataService } from './data-service-base';
 import { envFacade } from './env-facade';
 import { AuthScopes, User } from './generated/api/swagger/api';
 import { getLocalStorageItem, LocalStorageKey, removeLocalStorageItem, setLocalStorageItem } from './local-storage';

src/services/actions.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { Action, ApiFacade } from "../infrastructure/generated/api/swagger/api";
 
 class ActionsService extends DataService<Action[]> {

src/services/devices.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { ApiFacade, LocalNetworkDevice } from "../infrastructure/generated/api/swagger/api";
 
 class DevicesService extends DataService<LocalNetworkDevice[]> {

src/services/minions.kinds.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { ApiFacade, DeviceKind } from "../infrastructure/generated/api/swagger/api";
 
 class MinionsKindsService extends DataService<DeviceKind[]> {

src/services/minions.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { envFacade } from "../infrastructure/env-facade";
 import { sessionManager } from "../infrastructure/session-manager";
 import { API_KEY_HEADER, PULL_MINION_ACTIVATION } from "../infrastructure/consts";

src/services/settings.service.ts

@@ -1,5 +1,5 @@
 
-import { DataService } from '../infrastructure/data-service-base';
+import { DataService } from 'frontal-data-manager';
 import { ApiFacade, VersionInfo } from '../infrastructure/generated/api/swagger/api';
 class RemoteURLService extends DataService<string> {
 

src/services/timeline.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { ApiFacade, MinionTimeline } from "../infrastructure/generated/api/swagger/api";
 
 class TimelineService extends DataService<MinionTimeline[]> {

src/services/timings.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { envFacade } from "../infrastructure/env-facade";
 import { sessionManager } from "../infrastructure/session-manager";
 import { API_KEY_HEADER } from "../infrastructure/consts";

src/services/users.service.ts

@@ -1,4 +1,4 @@
-import { DataService } from "../infrastructure/data-service-base";
+import { DataService } from 'frontal-data-manager';
 import { ApiFacade, User } from "../infrastructure/generated/api/swagger/api";
 import { LocalStorageKey, setLocalStorageItem } from "../infrastructure/local-storage";
 

yarn.lock

@@ -2730,6 +2730,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.clonedeep@^4.5.7":
+  version "4.5.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.7.tgz#0e119f582ed6f9e6b373c04a644651763214f197"
+  integrity sha512-ccNqkPptFIXrpVqUECi60/DFxjNKsfoQxSQsgcBJCX/fuX1wgyQieojkcWH/KpE3xzLoWN/2k+ZeGqIN3paSvw==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.debounce@^4.0.7":
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
@@ -6644,6 +6651,17 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+frontal-data-manager@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/frontal-data-manager/-/frontal-data-manager-1.0.3.tgz#c026640eedc62f07286d099e57610396433c5b34"
+  integrity sha512-s23Z3Iyfa8eBFdFK8YaDhhYgnuq2q0OfppA59P5pvI5N+5S85drGFLxQICJnx1XGQV+FM20lDSOU41ZJimu+Tw==
+  dependencies:
+    "@types/lodash.clonedeep" "^4.5.7"
+    "@types/react" "^17.0.0"
+    lodash.clonedeep "^4.5.0"
+    react "^17.0.2"
+    ts-events "^3.4.1"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz"
@@ -13238,6 +13256,11 @@ ts-events@^3.4.0:
   resolved "https://registry.npmjs.org/ts-events/-/ts-events-3.4.0.tgz"
   integrity sha512-WRTuuxHzqCVJUs4ZpHp82z2SFv1kp2Bodr8w4WIg0qFSce3sax/BN8kfWEOdWun4IKEglpGPK5FCEyGB3EwR3w==
 
+ts-events@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ts-events/-/ts-events-3.4.1.tgz#7234d1f635954fc8c7dfe300648554b25e875d3b"
+  integrity sha512-px05Slmyh6Bnfi7ma0YIU6cYXnisi+iL/2lhClu+s0ZkTdfPosiGp0H8aoQW7ASSXgcXYXAqujD0CcKYr5YlAw==
+
 ts-jest@^28.0.7:
   version "28.0.7"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.7.tgz#e18757a9e44693da9980a79127e5df5a98b37ac6"