Merge pull request #1871 from bluewave-labs/feat/depin-details-initial-data

feat: depin details initial data

src/Components/Sidebar/index.jsx

@@ -63,7 +63,7 @@ const menu = [
 
 	{ name: "Status pages", path: "status", icon: <StatusPages /> },
 	{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
-	{ name: "Integrations", path: "integrations", icon: <Integrations /> },
+	// { name: "Integrations", path: "integrations", icon: <Integrations /> },
 	{
 		name: "Settings",
 		icon: <Settings />,

src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx

@@ -1,49 +1,7 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { networkService } from "../../../../main";
+import { createToast } from "../../../../Utils/toastUtils";
 
-const getRandomDevice = () => {
-	const manufacturers = {
-		Apple: ["iPhone 15 Pro Max", "iPhone 15", "iPhone 14 Pro", "iPhone 14", "iPhone 13"],
-		Samsung: [
-			"Galaxy S23 Ultra",
-			"Galaxy S23+",
-			"Galaxy S23",
-			"Galaxy Z Fold5",
-			"Galaxy Z Flip5",
-		],
-		Google: ["Pixel 8 Pro", "Pixel 8", "Pixel 7a", "Pixel 7", "Pixel 6a"],
-		OnePlus: [
-			"OnePlus 11",
-			"OnePlus 10T",
-			"OnePlus Nord 3",
-			"OnePlus 10 Pro",
-			"OnePlus Nord 2T",
-		],
-		Xiaomi: ["13 Pro", "13", "Redmi Note 12", "POCO F5", "Redmi 12"],
-		Huawei: ["P60 Pro", "Mate X3", "Nova 11", "P50 Pro", "Mate 50"],
-		Sony: ["Xperia 1 V", "Xperia 5 V", "Xperia 10 V", "Xperia Pro-I", "Xperia 1 IV"],
-		Motorola: ["Edge 40 Pro", "Edge 40", "G84", "G54", "Razr 40 Ultra"],
-		ASUS: [
-			"ROG Phone 7",
-			"Zenfone 10",
-			"ROG Phone 6",
-			"Zenfone 9",
-			"ROG Phone 7 Ultimate",
-		],
-	};
-
-	const manufacturerNames = Object.keys(manufacturers);
-	const randomManufacturer =
-		manufacturerNames[Math.floor(Math.random() * manufacturerNames.length)];
-
-	const models = manufacturers[randomManufacturer];
-	const randomModel = models[Math.floor(Math.random() * models.length)];
-
-	return {
-		manufacturer: randomManufacturer,
-		model: randomModel,
-	};
-};
 const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [connectionStatus, setConnectionStatus] = useState(undefined);
@@ -51,9 +9,6 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 	const [networkError, setNetworkError] = useState(false);
 	const [monitor, setMonitor] = useState(undefined);
 	const [lastUpdateTrigger, setLastUpdateTrigger] = useState(0);
-	const [devices, setDevices] = useState(Array.from({ length: 5 }, getRandomDevice));
-
-	const prevDateRangeRef = useRef(dateRange);
 
 	useEffect(() => {
 		if (typeof monitorId === "undefined") {
@@ -64,6 +19,35 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 			return;
 		}
 
+		// Get initial data
+
+		const fetchInitialData = async () => {
+			try {
+				const res = await networkService.getDistributedUptimeDetails({
+					monitorId,
+					dateRange: dateRange,
+					normalize: true,
+				});
+				const responseData = res?.data?.data;
+
+				if (typeof responseData === "undefined") {
+					throw new Error("No data");
+				}
+
+				setLastUpdateTrigger(Date.now());
+				setMonitor(responseData);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({
+					body: error.message,
+				});
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchInitialData();
+
 		try {
 			const cleanup = networkService.subscribeToDistributedUptimeDetails({
 				monitorId,
@@ -77,15 +61,7 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 						setNetworkError(false);
 					}
 					setLastUpdateTrigger(Date.now());
-					const latestChecksWithDevice = data?.monitor?.latestChecks.map((check, idx) => {
-						check.device = devices[idx];
-						return check;
-					});
-					const monitorWithDevice = {
-						...data.monitor,
-						latestChecks: latestChecksWithDevice,
-					};
-					setMonitor(monitorWithDevice);
+					setMonitor(data.monitor);
 				},
 				onOpen: () => {
 					setConnectionStatus("up");
@@ -107,21 +83,11 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 		retryCount,
 		setConnectionStatus,
 		networkError,
-		devices,
 		isLoading,
 		isPublic,
 		isPublished,
 	]);
 
-	useEffect(() => {
-		const hasDateRangeChanged = prevDateRangeRef.current !== dateRange;
-		prevDateRangeRef.current = dateRange; // Update the ref to the current dateRange
-
-		if (!hasDateRangeChanged) {
-			setDevices(Array.from({ length: 5 }, getRandomDevice));
-		}
-	}, [dateRange]);
-
 	return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger];
 };
 

src/Utils/NetworkService.js

@@ -897,6 +897,15 @@ class NetworkService {
 		};
 	}
 
+	getDistributedUptimeDetails(config) {
+		const params = new URLSearchParams();
+		const { monitorId, onUpdate, onOpen, onError, dateRange, normalize } = config;
+		if (dateRange) params.append("dateRange", dateRange);
+		if (normalize) params.append("normalize", normalize);
+		const url = `${this.axiosInstance.defaults.baseURL}/distributed-uptime/monitors/details/${monitorId}/initial?${params.toString()}`;
+		return this.axiosInstance.get(url);
+	}
+
 	subscribeToDistributedUptimeDetails(config) {
 		const params = new URLSearchParams();
 		const { monitorId, onUpdate, onOpen, onError, dateRange, normalize } = config;