From e74c9d0793670e82a3f5e022850967fd9b631a4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Sun, 28 Aug 2022 22:52:57 +0200
Subject: [PATCH] Added dashboard migration, reworked types

---
 client/src/api/dashboards.ts                  |  2 +-
 .../src/pages/dashboard/NewDashboardPage.tsx  |  2 +-
 .../components/BoxSettings/BoxSettings.tsx    | 79 ++++++++-----------
 .../BoxSettings/components/DialSettings.tsx   | 44 +++++++----
 .../BoxSettings/components/GraphSettings.tsx  | 42 ++++++----
 .../components/BoxDialContent.tsx             | 12 +--
 .../components/BoxGraphContent.tsx            | 10 ++-
 .../DashboardGrid/components/EditableBox.tsx  |  6 +-
 client/src/pages/dashboard/types.ts           |  2 +-
 client/src/utils/createDashboardContent.ts    |  2 +-
 .../dashboard/createDashboardMigration.ts     |  9 +++
 .../utils/dashboard/getDashboardMigrations.ts | 11 +++
 .../src/utils/dashboard/migrations/index.ts   |  1 +
 .../dashboard/migrations/migrationOf10to11.ts | 17 ++++
 .../utils/{ => dashboard}/parseDashboard.ts   | 15 +++-
 client/src/utils/hooks/useForm.ts             |  4 +-
 16 files changed, 158 insertions(+), 100 deletions(-)
 create mode 100644 client/src/utils/dashboard/createDashboardMigration.ts
 create mode 100644 client/src/utils/dashboard/getDashboardMigrations.ts
 create mode 100644 client/src/utils/dashboard/migrations/index.ts
 create mode 100644 client/src/utils/dashboard/migrations/migrationOf10to11.ts
 rename client/src/utils/{ => dashboard}/parseDashboard.ts (67%)

diff --git a/client/src/api/dashboards.ts b/client/src/api/dashboards.ts
index 1e02267..2373afc 100644
--- a/client/src/api/dashboards.ts
+++ b/client/src/api/dashboards.ts
@@ -1,4 +1,4 @@
-import { DashboardContent } from '@/utils/parseDashboard'
+import { DashboardContent } from '@/utils/dashboard/parseDashboard'
 import { request } from './request'
 
 export type DashboardInfo = {
diff --git a/client/src/pages/dashboard/NewDashboardPage.tsx b/client/src/pages/dashboard/NewDashboardPage.tsx
index da1c9ef..ad66487 100644
--- a/client/src/pages/dashboard/NewDashboardPage.tsx
+++ b/client/src/pages/dashboard/NewDashboardPage.tsx
@@ -5,7 +5,7 @@ import {
 } from '@/api/dashboards'
 import { UserLayout } from '@/layouts/UserLayout/UserLayout'
 import { createDashboardContent } from '@/utils/createDashboardContent'
-import { parseDashboard } from '@/utils/parseDashboard'
+import { parseDashboard } from '@/utils/dashboard/parseDashboard'
 import { useEffect, useMemo, useState } from 'preact/hooks'
 import { useQuery, useQueryClient } from 'react-query'
 import { DashboardGrid } from './components/DashboardGrid/DashboardGrid'
diff --git a/client/src/pages/dashboard/components/BoxSettings/BoxSettings.tsx b/client/src/pages/dashboard/components/BoxSettings/BoxSettings.tsx
index e1ff990..d2b5b3e 100644
--- a/client/src/pages/dashboard/components/BoxSettings/BoxSettings.tsx
+++ b/client/src/pages/dashboard/components/BoxSettings/BoxSettings.tsx
@@ -1,7 +1,11 @@
 import { getSensors } from '@/api/sensors'
 import { Modal } from '@/components/Modal'
 import { useConfirmModal } from '@/contexts/ConfirmModalsContext'
-import { DashboardDialData, DashboardGraphData } from '@/utils/parseDashboard'
+import {
+	DashboardDialData,
+	DashboardGraphData,
+} from '@/utils/dashboard/parseDashboard'
+import { useForm } from '@/utils/hooks/useForm'
 import { useState } from 'preact/hooks'
 import { useQuery } from 'react-query'
 import { BoxDefinition } from '../../types'
@@ -18,14 +22,28 @@ type Props = {
 export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 	const sensors = useQuery(['/sensors'], getSensors)
 
-	const [formState, setFormState] = useState(() => ({
-		sensor: value.sensor,
-		title: value.title,
-		type: value.data?.type ?? 'graph',
-	}))
-
 	const [data, setData] = useState(() => value.data)
 
+	const {
+		value: formState,
+		handleChange,
+		handleSubmit,
+	} = useForm({
+		defaultValue: () => ({
+			title: value.title,
+			type: value.data?.type ?? '',
+		}),
+		onSubmit: async (v) => {
+			onClose()
+
+			onSave({
+				...value,
+				title: v.title,
+				data: data,
+			})
+		},
+	})
+
 	const deleteConfirm = useConfirmModal({
 		content: 'Are you sure you want to delete the box?',
 		onConfirm: () => {
@@ -33,48 +51,10 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 		},
 	})
 
-	const handleSave = async (e: Event) => {
-		e.preventDefault()
-		e.stopPropagation()
-
-		onClose()
-
-		onSave({
-			...value,
-			sensor: formState.sensor,
-			title: formState.title,
-			data: data,
-		})
-	}
-
-	const handleChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement | HTMLInputElement
-
-		setFormState({
-			...formState,
-			[target.name]: target.value,
-		})
-	}
-
 	return (
 		<Modal onClose={onClose} open>
-			<form onSubmit={handleSave}>
-				<div className="input">
-					<label>Sensor</label>
-					<select
-						name="sensor"
-						value={formState.sensor || ''}
-						onChange={handleChange}
-					>
-						{sensors.data?.map((s) => (
-							<option key={s.id} value={s.id}>
-								{s.name}
-							</option>
-						))}
-					</select>
-				</div>
-
-				{formState.sensor && (
+			<form onSubmit={handleSubmit}>
+				{
 					<>
 						<div className="input">
 							<label>Title</label>
@@ -90,6 +70,7 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 								name="type"
 								value={formState.type}
 								onChange={handleChange}
+								required
 							>
 								<option value="graph">Graph</option>
 								<option value="dial">Dial</option>
@@ -100,6 +81,7 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 							<GraphSettings
 								value={data as DashboardGraphData}
 								onChange={setData}
+								sensors={sensors.data ?? []}
 							/>
 						)}
 
@@ -107,10 +89,11 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 							<DialSettings
 								value={data as DashboardDialData}
 								onChange={setData}
+								sensors={sensors.data ?? []}
 							/>
 						)}
 					</>
-				)}
+				}
 
 				<div className="actions">
 					<button className="remove" type="button" onClick={deleteConfirm.show}>
diff --git a/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx b/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx
index 0bf494a..9413182 100644
--- a/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx
+++ b/client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx
@@ -1,26 +1,21 @@
-import { DashboardDialData } from '@/utils/parseDashboard'
-import { useEffect, useState } from 'preact/hooks'
+import { SensorInfo } from '@/api/sensors'
+import { DashboardDialData } from '@/utils/dashboard/parseDashboard'
+import { useForm } from '@/utils/hooks/useForm'
+import { omit } from '@/utils/omit'
+import { useEffect } from 'preact/hooks'
 
 type Props = {
+	sensors: SensorInfo[]
 	value?: DashboardDialData
 	onChange: (data: DashboardDialData) => void
 }
 
-export const DialSettings = ({ value, onChange }: Props) => {
-	const [formState, setFormState] = useState(() => ({
-		unit: value?.unit,
-		decimals: value?.decimals,
-		multiplier: value?.multiplier,
-	}))
-
-	const handleChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement | HTMLInputElement
-
-		setFormState({
-			...formState,
-			[target.name]: target.value,
-		})
-	}
+export const DialSettings = ({ sensors, value, onChange }: Props) => {
+	const { value: formState, handleChange } = useForm({
+		defaultValue: () => ({
+			...(value && omit(value, ['type'])),
+		}),
+	})
 
 	useEffect(() => {
 		onChange({ ...formState, type: 'dial' })
@@ -28,6 +23,21 @@ export const DialSettings = ({ value, onChange }: Props) => {
 
 	return (
 		<>
+			<div className="input">
+				<label>Sensor</label>
+				<select
+					name="sensor"
+					value={formState.sensor || ''}
+					onChange={handleChange}
+					required
+				>
+					{sensors.map((s) => (
+						<option key={s.id} value={s.id}>
+							{s.name}
+						</option>
+					))}
+				</select>
+			</div>
 			<div className="input">
 				<label>Unit</label>
 				<input name="unit" value={formState.unit} onChange={handleChange} />
diff --git a/client/src/pages/dashboard/components/BoxSettings/components/GraphSettings.tsx b/client/src/pages/dashboard/components/BoxSettings/components/GraphSettings.tsx
index 6546465..c0415e3 100644
--- a/client/src/pages/dashboard/components/BoxSettings/components/GraphSettings.tsx
+++ b/client/src/pages/dashboard/components/BoxSettings/components/GraphSettings.tsx
@@ -1,25 +1,21 @@
+import { SensorInfo } from '@/api/sensors'
+import { DashboardGraphData } from '@/utils/dashboard/parseDashboard'
+import { useForm } from '@/utils/hooks/useForm'
 import { omit } from '@/utils/omit'
-import { DashboardGraphData } from '@/utils/parseDashboard'
-import { useEffect, useState } from 'preact/hooks'
+import { useEffect } from 'preact/hooks'
 
 type Props = {
+	sensors: SensorInfo[]
 	value?: DashboardGraphData
 	onChange: (data: DashboardGraphData) => void
 }
 
-export const GraphSettings = ({ value, onChange }: Props) => {
-	const [formState, setFormState] = useState(() => ({
-		...(value && omit(value, ['type'])),
-	}))
-
-	const handleChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement | HTMLInputElement
-
-		setFormState({
-			...formState,
-			[target.name]: target.value,
-		})
-	}
+export const GraphSettings = ({ value, onChange, sensors }: Props) => {
+	const { value: formState, handleChange } = useForm({
+		defaultValue: () => ({
+			...(value && omit(value, ['type'])),
+		}),
+	})
 
 	useEffect(() => {
 		onChange({ ...formState, type: 'graph' })
@@ -27,6 +23,22 @@ export const GraphSettings = ({ value, onChange }: Props) => {
 
 	return (
 		<>
+			<div className="input">
+				<label>Sensor</label>
+				<select
+					name="sensor"
+					value={formState.sensor || ''}
+					onChange={handleChange}
+					required
+				>
+					{sensors.map((s) => (
+						<option key={s.id} value={s.id}>
+							{s.name}
+						</option>
+					))}
+				</select>
+			</div>
+
 			<div className="input">
 				<label>Graph Type</label>
 				<select
diff --git a/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx b/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx
index 723c962..211f885 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx
@@ -1,5 +1,5 @@
 import { getLatestSensorValue } from '@/api/sensorValues'
-import { DashboardDialData } from '@/utils/parseDashboard'
+import { DashboardDialData } from '@/utils/dashboard/parseDashboard'
 import { RefObject } from 'preact'
 import { useMemo } from 'preact/hooks'
 import { useQuery } from 'react-query'
@@ -13,16 +13,18 @@ type Props = {
 	refreshRef: RefObject<() => void>
 }
 
-export const BoxDialContent = ({ box, data, refreshRef }: Props) => {
+export const BoxDialContent = ({ data, refreshRef }: Props) => {
 	const { filter } = useDashboardContext()
 
 	const valuesQuery = {
-		sensor: box.sensor ?? '-1',
+		sensor: data.sensor ?? '-1',
 		to: filter.customTo,
 	}
 
-	const value = useQuery(['/sensor/values/latest', valuesQuery], () =>
-		getLatestSensorValue(valuesQuery)
+	const value = useQuery(
+		['/sensor/values/latest', valuesQuery],
+		() => getLatestSensorValue(valuesQuery),
+		{ enabled: !!data.sensor }
 	)
 
 	refreshRef.current = () => {
diff --git a/client/src/pages/dashboard/components/DashboardGrid/components/BoxGraphContent.tsx b/client/src/pages/dashboard/components/DashboardGrid/components/BoxGraphContent.tsx
index 2b69b94..b06d9de 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/components/BoxGraphContent.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/components/BoxGraphContent.tsx
@@ -3,7 +3,7 @@ import { useDashboardContext } from '@/pages/dashboard/contexts/DashboardContext
 import { BoxDefinition } from '@/pages/dashboard/types'
 import { max } from '@/utils/max'
 import { min } from '@/utils/min'
-import { DashboardGraphData } from '@/utils/parseDashboard'
+import { DashboardGraphData } from '@/utils/dashboard/parseDashboard'
 import { RefObject } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 import { useQuery } from 'react-query'
@@ -21,13 +21,15 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
 	const bodyRef = useRef<HTMLDivElement>(null)
 
 	const valuesQuery = {
-		sensor: box.sensor ?? '-1',
+		sensor: data.sensor ?? '-1',
 		from: filter.customFrom,
 		to: filter.customTo,
 	}
 
-	const values = useQuery(['/sensor/values', valuesQuery], () =>
-		getSensorValues(valuesQuery)
+	const values = useQuery(
+		['/sensor/values', valuesQuery],
+		() => getSensorValues(valuesQuery),
+		{ enabled: !!data.sensor }
 	)
 
 	refreshRef.current = () => {
diff --git a/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx b/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx
index b69d3b3..bedd900 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx
@@ -132,7 +132,7 @@ export const EditableBox = ({
 				<div className="box" style={{ height: '100%' }}>
 					<div className="header">
 						<div className="drag-handle" onMouseDown={handleMouseDown}>
-							<div className="name">{box.title || box.sensor || ''}</div>
+							<div className="name">{box.title || ''}</div>
 						</div>
 						<div className="actions">
 							<div className="action" onClick={() => refreshRef.current?.()}>
@@ -144,14 +144,14 @@ export const EditableBox = ({
 						</div>
 					</div>
 					<div className="body">
-						{box.sensor && box.data?.type === 'graph' && (
+						{box.data?.type === 'graph' && (
 							<BoxGraphContent
 								box={box}
 								data={box.data}
 								refreshRef={refreshRef}
 							/>
 						)}
-						{box.sensor && box.data?.type === 'dial' && (
+						{box.data?.type === 'dial' && (
 							<BoxDialContent
 								box={box}
 								data={box.data}
diff --git a/client/src/pages/dashboard/types.ts b/client/src/pages/dashboard/types.ts
index a2c3b23..d07220a 100644
--- a/client/src/pages/dashboard/types.ts
+++ b/client/src/pages/dashboard/types.ts
@@ -1,3 +1,3 @@
-import { DashboardContentBox } from '@/utils/parseDashboard'
+import { DashboardContentBox } from '@/utils/dashboard/parseDashboard'
 
 export type BoxDefinition = DashboardContentBox
diff --git a/client/src/utils/createDashboardContent.ts b/client/src/utils/createDashboardContent.ts
index 629f807..f17231f 100644
--- a/client/src/utils/createDashboardContent.ts
+++ b/client/src/utils/createDashboardContent.ts
@@ -1,4 +1,4 @@
-import { DashboardContent } from './parseDashboard'
+import { DashboardContent } from './dashboard/parseDashboard'
 
 export const createDashboardContent = (): DashboardContent => ({
 	version: '1.0',
diff --git a/client/src/utils/dashboard/createDashboardMigration.ts b/client/src/utils/dashboard/createDashboardMigration.ts
new file mode 100644
index 0000000..707fcea
--- /dev/null
+++ b/client/src/utils/dashboard/createDashboardMigration.ts
@@ -0,0 +1,9 @@
+export type DashboardMigration = {
+	from: string
+	to: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	migrate: (v: any) => any
+}
+
+export const createDashboardMigration = (migration: DashboardMigration) =>
+	migration
diff --git a/client/src/utils/dashboard/getDashboardMigrations.ts b/client/src/utils/dashboard/getDashboardMigrations.ts
new file mode 100644
index 0000000..bc0caa1
--- /dev/null
+++ b/client/src/utils/dashboard/getDashboardMigrations.ts
@@ -0,0 +1,11 @@
+import * as migrations from './migrations'
+
+export const getDashboardMigrations = (version: string) => {
+	const sortedMigrations = Object.values(migrations).sort((a, b) =>
+		a.from.localeCompare(b.to)
+	)
+
+	const migration = sortedMigrations.findIndex((m) => m.from === version)
+
+	return migration < 0 ? [] : sortedMigrations.slice(migration)
+}
diff --git a/client/src/utils/dashboard/migrations/index.ts b/client/src/utils/dashboard/migrations/index.ts
new file mode 100644
index 0000000..e8d772d
--- /dev/null
+++ b/client/src/utils/dashboard/migrations/index.ts
@@ -0,0 +1 @@
+export * from './migrationOf10to11'
diff --git a/client/src/utils/dashboard/migrations/migrationOf10to11.ts b/client/src/utils/dashboard/migrations/migrationOf10to11.ts
new file mode 100644
index 0000000..79d71c0
--- /dev/null
+++ b/client/src/utils/dashboard/migrations/migrationOf10to11.ts
@@ -0,0 +1,17 @@
+import { createDashboardMigration } from '../createDashboardMigration'
+
+export const migrationOf100To101 = createDashboardMigration({
+	from: '1.0',
+	to: '1.1',
+	migrate(v) {
+		for (const box of v.boxes) {
+			if (box.data) {
+				box.data.sensor = box.sensor
+			}
+
+			delete box.sensor
+		}
+
+		return v
+	},
+})
diff --git a/client/src/utils/parseDashboard.ts b/client/src/utils/dashboard/parseDashboard.ts
similarity index 67%
rename from client/src/utils/parseDashboard.ts
rename to client/src/utils/dashboard/parseDashboard.ts
index 02b8f46..62fe8fc 100644
--- a/client/src/utils/parseDashboard.ts
+++ b/client/src/utils/dashboard/parseDashboard.ts
@@ -1,3 +1,5 @@
+import { getDashboardMigrations } from './getDashboardMigrations'
+
 export type DashboardContent = {
 	version: string
 	boxes: DashboardContentBox[]
@@ -9,13 +11,13 @@ export type DashboardContentBox = {
 	y: number
 	w: number
 	h: number
-	sensor?: string
 	title?: string
 	data?: DashboardGraphData | DashboardDialData
 }
 
 export type DashboardGraphData = {
 	type: 'graph'
+	sensor?: string
 	min?: string
 	max?: string
 	unit?: string
@@ -34,11 +36,20 @@ export type DashboardGraphData = {
 
 export type DashboardDialData = {
 	type: 'dial'
+	sensor?: string
 	unit?: string
 	decimals?: string
 	multiplier?: string
 }
 
 export const parseDashboard = (input: string) => {
-	return JSON.parse(input) as DashboardContent
+	const data = JSON.parse(input) as DashboardContent
+	const migrations = getDashboardMigrations(data.version)
+
+	return migrations.reduce((acc, migration) => {
+		const res = migration.migrate(acc)
+		res.version = migration.to
+
+		return res
+	}, data)
 }
diff --git a/client/src/utils/hooks/useForm.ts b/client/src/utils/hooks/useForm.ts
index 4e1c544..6a6dd6f 100644
--- a/client/src/utils/hooks/useForm.ts
+++ b/client/src/utils/hooks/useForm.ts
@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 type Props<TValue> = {
-	onSubmit: (value: TValue) => void
+	onSubmit?: (value: TValue) => void
 	defaultValue: TValue | (() => TValue)
 }
 
@@ -33,7 +33,7 @@ export const useForm = <TValue = unknown>({
 		e.preventDefault()
 		e.stopPropagation()
 
-		submitRef.current(stateRef.current)
+		submitRef.current?.(stateRef.current)
 	}, [])
 
 	return {