From d5f5e08a3c600e728129fa3dd66dc81715e4aea3 Mon Sep 17 00:00:00 2001
From: "Tanner Collin (aider)" <git@tannercollin.com>
Date: Thu, 3 Jul 2025 22:27:39 +0000
Subject: [PATCH] refactor: Abstract Lux components into single component

---
 client/src/App.js | 100 +++-------------------------------------------
 1 file changed, 6 insertions(+), 94 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 56951d7..434993b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1088,100 +1088,12 @@ function BedroomSleep({end, duration}) {
 	);
 }
 
-function LivingRoomLux({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('lux', 'Living Room', end, duration);
+function Lux({name, sensorName, end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('lux', sensorName, end, duration);
 
 	return (
 		<ChartContainer
-			name='Living Room Lux'
-			data={data}
-			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
-			loading={loading}
-		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='lux'
-				domain={[0, 250]}
-			/>
-
-			<CartesianGrid strokeDasharray='3 3'/>
-			<Tooltip
-				formatter={(v, name) => v.toFixed(1) + units[name]}
-				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
-				separator=': '
-			/>
-
-			<ReferenceLine yAxisId='lux' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-
-			<Line
-				yAxisId='lux'
-				type='monotone'
-				dataKey='lux'
-				name='Lux'
-				stroke='black'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-		</ChartContainer>
-	);
-}
-
-function KitchenLux({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('lux', 'Kitchen', end, duration);
-
-	return (
-		<ChartContainer
-			name='Kitchen Lux'
-			data={data}
-			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
-			loading={loading}
-		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='lux'
-				domain={[0, 250]}
-			/>
-
-			<CartesianGrid strokeDasharray='3 3'/>
-			<Tooltip
-				formatter={(v, name) => v.toFixed(1) + units[name]}
-				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
-				separator=': '
-			/>
-
-			<ReferenceLine yAxisId='lux' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-
-			<Line
-				yAxisId='lux'
-				type='monotone'
-				dataKey='lux'
-				name='Lux'
-				stroke='black'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-		</ChartContainer>
-	);
-}
-
-function BedroomLux({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('lux', 'Bedroom', end, duration);
-
-	return (
-		<ChartContainer
-			name='Bedroom Lux'
+			name={name}
 			data={data}
 			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
 			loading={loading}
@@ -1292,9 +1204,9 @@ function Graphs({end, duration}) {
 			<Gas end={end} duration={duration} />
 			<Water end={end} duration={duration} />
 			<BedroomSleep end={end} duration={duration} />
-			<LivingRoomLux end={end} duration={duration} />
-			<KitchenLux end={end} duration={duration} />
-			<BedroomLux end={end} duration={duration} />
+			<Lux name='Living Room Lux' sensorName='Living Room' end={end} duration={duration} />
+			<Lux name='Kitchen Lux' sensorName='Kitchen' end={end} duration={duration} />
+			<Lux name='Bedroom Lux' sensorName='Bedroom' end={end} duration={duration} />
 			<SoilMoisture name='Dumb Cane Soil Moisture' sensorName='Dumb Cane' sensorId='soil' end={end} duration={duration} />
 			<SoilMoisture name='Kitchen Pothos Soil Moisture' sensorName='Kitchen Pothos' sensorId='soil' end={end} duration={duration} />
 			<SoilMoisture name='Dracaena Soil Moisture' sensorName='Dracaena' sensorId='soil' end={end} duration={duration} />