From 265887a1736b1a805ec47a7e51550b858795d470 Mon Sep 17 00:00:00 2001
From: danielshid <danielshi74@gmail.com>
Date: Fri, 4 Oct 2024 16:36:38 -0400
Subject: [PATCH] code does not work needs debugging

---
 .../components/IntervalControlsComponent.tsx  | 54 +++++++++----------
 src/client/app/translations/data.ts           |  6 +--
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/client/app/components/IntervalControlsComponent.tsx b/src/client/app/components/IntervalControlsComponent.tsx
index 5f59d893a..8933abad9 100644
--- a/src/client/app/components/IntervalControlsComponent.tsx
+++ b/src/client/app/components/IntervalControlsComponent.tsx
@@ -38,17 +38,20 @@ export default function IntervalControlsComponent() {
 	const [daysCustom, setDaysCustom] = React.useState<number>(duration.asDays());
 	// True if custom duration input for bar or map is active.
 	const [showCustomDuration, setShowCustomDuration] = React.useState<boolean>(false);
+	// Define a flag to track if custom input is actively being used
+	const [isCustomInput, setIsCustomInput] = React.useState<boolean>(false);
 
 	// Keeps react-level state, and redux state in sync.
 	// Two different layers in state may differ especially when externally updated (chart link, history buttons.)
 	React.useEffect(() => {
-		// Assume value is valid since it is coming from state.
-		// Do not allow bad values in state.
-		const isCustom = !['1', '7', '28'].includes(duration.asDays().toString());
-		setShowCustomDuration(isCustom);
-		setDaysCustom(duration.asDays());
-		setDays(isCustom ? CUSTOM_INPUT : duration.asDays().toString());
-	}, [duration]);
+		// If user is in custom input mode, don't reset to standard options
+		if (!isCustomInput) {
+			const isCustom = !['1', '7', '28'].includes(duration.asDays().toString());
+			setShowCustomDuration(isCustom);
+			setDaysCustom(duration.asDays());
+			setDays(isCustom ? CUSTOM_INPUT : duration.asDays().toString());
+		}
+	}, [duration, isCustomInput]);
 
 	// Returns true if this is a valid duration.
 	const daysValid = (days: number) => {
@@ -57,6 +60,7 @@ export default function IntervalControlsComponent() {
 
 	// Updates values when the standard duration menu for bar or map is used.
 	const handleDaysChange = (value: string) => {
+		setIsCustomInput(false);
 		if (value === CUSTOM_INPUT) {
 			// Set menu value from standard value to special value to show custom
 			// and show the custom input area.
@@ -73,6 +77,7 @@ export default function IntervalControlsComponent() {
 
 	// Updates value when the custom duration input is used for bar or map.
 	const handleCustomDaysChange = (value: number) => {
+		setIsCustomInput(true);
 		setDaysCustom(value);
 	};
 
@@ -103,22 +108,6 @@ export default function IntervalControlsComponent() {
 		FourWeeks: '4.weeks'
 	};
 
-	// Defines the set of options for the dropdown
-	const options = chartType === ChartTypes.compare
-		? Object.entries(ComparePeriod).map(([key, value]) => (
-			<option value={value} key={key}>
-				{translate(comparePeriodTranslations[key as keyof typeof comparePeriodTranslations])}
-			</option>
-		))
-		: (
-			<>
-				<option value='1'>{translate('day')}</option>
-				<option value='7'>{translate('week')}</option>
-				<option value='28'>{translate('4.weeks')}</option>
-				<option value={CUSTOM_INPUT}>{translate('custom.value')}</option>
-			</>
-		);
-
 	return (
 		<div>
 			<div style={divTopBottomPadding}>
@@ -130,7 +119,7 @@ export default function IntervalControlsComponent() {
 					)}:
 					<TooltipMarkerComponent page='home' helpTextId={
 						chartType === ChartTypes.bar ? 'help.home.bar.days.tip' :
-							chartType === ChartTypes.map ? 'help.home.map.days.tip' :
+							chartType === ChartTypes.map ? 'help.home.map.interval.tip' :
 								'help.home.compare.period.tip'
 					} />
 				</p>
@@ -141,10 +130,21 @@ export default function IntervalControlsComponent() {
 					value={chartType === ChartTypes.compare ? comparePeriod?.toString() : days}
 					onChange={e => chartType === ChartTypes.compare ? handleComparePeriodChange(e.target.value) : handleDaysChange(e.target.value)}
 				>
-					{options}
+					{Object.entries(ComparePeriod).map(
+						([key, value]) => (
+							<option value={value} key={key}>
+								{translate(comparePeriodTranslations[key as keyof typeof comparePeriodTranslations])}
+							</option>
+						)
+					)}
+					{/* TODO: Compare is currently not ready for the custom option. */}
+					{chartType !== ChartTypes.compare &&
+						<option value={CUSTOM_INPUT}>
+							{translate('custom.value')}
+						</option>
+					}
 				</Input>
-				{/* TODO: Compare is currently not ready for a custom option. */}
-				{showCustomDuration && chartType !== ChartTypes.compare &&
+				{showCustomDuration &&
 					<FormGroup>
 						<Label for='days'>{translate('days.enter')}:</Label>
 						<Input
diff --git a/src/client/app/translations/data.ts b/src/client/app/translations/data.ts
index aaf65d524..8abd9c06f 100644
--- a/src/client/app/translations/data.ts
+++ b/src/client/app/translations/data.ts
@@ -29,7 +29,6 @@ const LocaleTranslationData = {
 		"as.meter.unit": "as meter unit",
 		"as.meter.defaultgraphicunit": "as meter default graphic unit",
 		"bar": "Bar",
-		"days.enter": "Enter in days and then hit enter",
 		"bar.interval": "Bar Interval",
 		"bar.raw": "Cannot create bar graph on raw units such as temperature",
 		"bar.stacking": "Bar Stacking",
@@ -121,6 +120,7 @@ const LocaleTranslationData = {
 		"date.range": 'Date Range',
 		"day": "Day",
 		"days": "Days",
+		"days.enter": "Enter in days and then hit enter",
 		"decreasing": "decreasing",
 		"default.area.normalize": "Normalize readings by area by default",
 		"default.area.unit": "Default Area Unit",
@@ -538,7 +538,6 @@ const LocaleTranslationData = {
 		"as.meter.unit": "as meter unit\u{26A1}",
 		"as.meter.defaultgraphicunit": "as meter default graphic unit\u{26A1}",
 		"bar": "Bande",
-		"bar.days.enter": "Enter in days and then hit enter\u{26A1}",
 		"bar.interval": "Intervalle du Diagramme à Bandes",
 		"bar.raw": "Cannot create bar graph on raw units such as temperature\u{26A1}",
 		"bar.stacking": "Empilage de Bandes",
@@ -630,6 +629,7 @@ const LocaleTranslationData = {
 		"date.range": 'Plage de dates',
 		"day": "Journée",
 		"days": "Journées",
+		"days.enter": "Enter in days and then hit enter\u{26A1}",
 		"decreasing": "decreasing\u{26A1}",
 		"default.area.normalize": "Normalize readings by area by default\u{26A1}",
 		"default.area.unit": "Default Area Unit\u{26A1}",
@@ -1047,7 +1047,6 @@ const LocaleTranslationData = {
 		"as.meter.unit": "como unidad de medidor",
 		"as.meter.defaultgraphicunit": "como unidad gráfica predeterminada del medidor",
 		"bar": "Barra",
-		"bar.days.enter": "Ingrese los días y presione \"Enter\"",
 		"bar.interval": "Intervalo de barra",
 		"bar.raw": "No se puede crear un gráfico de barras con unidades crudas como la temperatura",
 		"bar.stacking": "Apilamiento de barras",
@@ -1139,6 +1138,7 @@ const LocaleTranslationData = {
 		"date.range": 'Rango de fechas',
 		"day": "Día",
 		"days": "Días",
+		"days.enter": "Ingrese los días y presione \"Enter\"",
 		"decreasing": "decreciente",
 		"default.area.normalize": "Normalizar lecturas según el área por defecto",
 		"default.area.unit": "Unidad de área predeterminada",