dashboard: prerender current status and total downtime

app/components/dashboard/Dashboard.server.tsx

@@ -4,6 +4,7 @@ import DashboardUptime from './DashboardUptime.client';
 import DashboardCardTotalDisconnectTime from './DashboardCardTotalDisconnectTime.client';
 import SpeedMeter from './SpeedMeter.client';
 import { getUptime } from '@/lib/get-uptime';
+import { connectionLogsListToHumanFormat } from '@/lib/logs-list-to-human-format';
 
 export type connectionLogsList = {
 	id: number;
@@ -21,14 +22,20 @@ export default function Dashboard() {
 			.prepare('SELECT * FROM connectionlogs ORDER BY id DESC LIMIT 1')
 			.all() as connectionLogsList;
 	}
+	let humanReadableDisconnectedTimePrerender = connectionLogsListToHumanFormat(
+		allConnectionLogsFromServer
+	);
+	let currentStatusPrerender = allConnectionLogsFromServer[0].status;
 	return (
 		<>
 			<DashboardCardNetWork />
 			<DashboardCardCurrentStatus
-				allConnectionStatus={allConnectionLogsFromServer}
+				currentStatusPrerender={currentStatusPrerender}
 			/>
 			<DashboardCardTotalDisconnectTime
-				allConnectionLogs={allConnectionLogsFromServer}
+				humanReadableDisconnectedTimePrerender={
+					humanReadableDisconnectedTimePrerender
+				}
 			/>
 		</>
 	);

app/components/dashboard/DashboardCardCurrentStatus.client.tsx

@@ -1,20 +1,15 @@
 'use client';
 import DashboardCardBase from './DashboardBase.server';
 import { connectionLogsList } from './Dashboard.server';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 export function DashboardCardCurrentStatus({
-	allConnectionStatus
+	currentStatusPrerender
 }: {
-	allConnectionStatus: connectionLogsList;
+	currentStatusPrerender: string;
 }) {
-	const [isConnected, setIsConnected] = useState(false);
-	let lastStatus = allConnectionStatus[0];
-	useMemo(() => {
-		setIsConnected(returnStatusBool(lastStatus));
-	}, []);
-	useEffect(() => {
-		setIsConnected(returnStatusBool(lastStatus));
-	}, [allConnectionStatus]);
+	const [isConnected, setIsConnected] = useState(
+		returnStatusBool(currentStatusPrerender)
+	);
 	return (
 		<>
 			<DashboardCardBase
@@ -29,12 +24,12 @@ export function DashboardCardCurrentStatus({
 	);
 }
 
-function returnStatusBool(status: connectionLogsList[0]) {
+function returnStatusBool(status: string) {
 	if (!status) {
 		return false;
 	} else {
-		if (status.status === 'connected') return true;
-		if (status.status === 'disconnected') return false;
+		if (status === 'connected') return true;
+		if (status === 'disconnected') return false;
 	}
 	return false;
 }

app/components/dashboard/DashboardCardTotalDisconnectTime.client.tsx

@@ -8,14 +8,14 @@ import Image from 'next/image';
 import { connectionLogsListToHumanFormat } from '@/lib/logs-list-to-human-format';
 
 export default function DashboardCardTotalDisconnectTime({
-	allConnectionLogs
+	humanReadableDisconnectedTimePrerender
 }: {
-	allConnectionLogs: connectionLogsList;
+	humanReadableDisconnectedTimePrerender: string;
 }) {
 	const [humanReadableDisconnectedTime, setHumanReadableDisconnectedTime] =
-		useState('Loading...');
+		useState(humanReadableDisconnectedTimePrerender);
 	const [backgroundColor, setBackgroundColor] = useState(
-		dashboardColor(allConnectionLogs)
+		dashboardColor(humanReadableDisconnectedTimePrerender)
 	);
 	let connectionLogsListModalRef = useRef<HTMLDialogElement>(null);
 	function toggleConnectionLogsListModal() {
@@ -25,12 +25,6 @@ export default function DashboardCardTotalDisconnectTime({
 			connectionLogsListModalRef.current?.showModal();
 		}
 	}
-	useEffect(() => {
-		setHumanReadableDisconnectedTime(
-			connectionLogsListToHumanFormat(allConnectionLogs)
-		);
-		setBackgroundColor(dashboardColor(allConnectionLogs));
-	}, []);
 	return (
 		<>
 			<DashboardCardBase backgroundColor={backgroundColor}>
@@ -54,12 +48,10 @@ export default function DashboardCardTotalDisconnectTime({
 	);
 }
 
-function dashboardColor(allConnectionLogs: connectionLogsList) {
-	let backgroundColor = 'bg-emerald-700';
-	allConnectionLogs.forEach((status) => {
-		if (status.status === 'disconnected') {
-			backgroundColor = 'bg-red-800';
-		}
-	});
+function dashboardColor(humanReadableDisconnectedTime: string) {
+	let backgroundColor = 'bg-red-800';
+	if (humanReadableDisconnectedTime.includes('No Disconnects')) {
+		backgroundColor = 'bg-emerald-700';
+	}
 	return backgroundColor;
 }