From 8758d7b64e35b3a3fc0dafcd99ab8b22c684033c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Sun, 28 Aug 2022 12:55:49 +0200
Subject: [PATCH] Working sensor modal

---
 client/src/assets/style.scss                  |  1 +
 client/src/pages/sensors/SensorsPage.tsx      |  2 +-
 .../sensors/components/SensorFormModal.tsx    | 29 +++++++++++++------
 .../pages/sensors/components/SensorItem.tsx   |  5 ++--
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/client/src/assets/style.scss b/client/src/assets/style.scss
index 29edc40..2e33aa6 100644
--- a/client/src/assets/style.scss
+++ b/client/src/assets/style.scss
@@ -253,6 +253,7 @@ section.content {
 .settings-modal .actions {
 	display: flex;
 	align-items: center;
+	justify-content: flex-end;
 }
 
 .settings-modal .actions .remove {
diff --git a/client/src/pages/sensors/SensorsPage.tsx b/client/src/pages/sensors/SensorsPage.tsx
index 1119dae..40b0790 100644
--- a/client/src/pages/sensors/SensorsPage.tsx
+++ b/client/src/pages/sensors/SensorsPage.tsx
@@ -33,7 +33,7 @@ export const SensorsPage = () => {
 						<div className="actions"></div>
 					</div>
 					{sensors.data?.map((i) => (
-						<SensorItem key={i.id} sensor={i} />
+						<SensorItem key={i.id} sensor={i} onEdit={setEdited} />
 					))}
 				</div>
 			</div>
diff --git a/client/src/pages/sensors/components/SensorFormModal.tsx b/client/src/pages/sensors/components/SensorFormModal.tsx
index 1cc9871..0974d02 100644
--- a/client/src/pages/sensors/components/SensorFormModal.tsx
+++ b/client/src/pages/sensors/components/SensorFormModal.tsx
@@ -1,7 +1,7 @@
 import { createSensor, SensorInfo, updateSensor } from '@/api/sensors'
 import { Modal } from '@/components/Modal'
 import { useState } from 'preact/hooks'
-import { useMutation } from 'react-query'
+import { useMutation, useQueryClient } from 'react-query'
 
 type Props = {
 	open: boolean
@@ -10,24 +10,31 @@ type Props = {
 }
 
 export const SensorFormModal = ({ open, onClose, sensor }: Props) => {
+	const queryClient = useQueryClient()
+	const createMutation = useMutation(createSensor)
+	const updateMutation = useMutation(updateSensor)
+
 	const [formState, setFormState] = useState(() => ({
 		name: sensor?.name ?? '',
 	}))
 
-	const createMutation = useMutation(createSensor)
-	const updateMutation = useMutation(updateSensor)
-
 	const handleSave = async (e: Event) => {
 		e.preventDefault()
 		e.stopPropagation()
 
-		onClose()
+		if (isLoading) {
+			return
+		}
 
 		if (sensor) {
-			updateMutation.mutate({ id: sensor.id, name: formState.name })
+			await updateMutation.mutateAsync({ id: sensor.id, name: formState.name })
 		} else {
-			createMutation.mutate(formState.name)
+			await createMutation.mutateAsync(formState.name)
 		}
+
+		queryClient.invalidateQueries(['/sensors'])
+
+		onClose()
 	}
 
 	const handleChange = (e: Event) => {
@@ -39,6 +46,8 @@ export const SensorFormModal = ({ open, onClose, sensor }: Props) => {
 		})
 	}
 
+	const isLoading = createMutation.isLoading || updateMutation.isLoading
+
 	return (
 		<Modal onClose={onClose} open={open}>
 			<form onSubmit={handleSave}>
@@ -50,14 +59,16 @@ export const SensorFormModal = ({ open, onClose, sensor }: Props) => {
 						minLength={1}
 						required
 						onChange={handleChange}
+						autoFocus
+						value={formState.name}
 					/>
 				</div>
 
 				<div className="actions">
-					<button className="cancel" type="button">
+					<button className="cancel" type="button" onClick={onClose}>
 						Cancel
 					</button>
-					<button>Save</button>
+					<button disabled={isLoading}>Save</button>
 				</div>
 			</form>
 		</Modal>
diff --git a/client/src/pages/sensors/components/SensorItem.tsx b/client/src/pages/sensors/components/SensorItem.tsx
index cb69b4f..256d34a 100644
--- a/client/src/pages/sensors/components/SensorItem.tsx
+++ b/client/src/pages/sensors/components/SensorItem.tsx
@@ -4,9 +4,10 @@ import { useState } from 'preact/hooks'
 
 type Props = {
 	sensor: SensorInfo
+	onEdit: (sensor: SensorInfo) => void
 }
 
-export const SensorItem = ({ sensor }: Props) => {
+export const SensorItem = ({ sensor, onEdit }: Props) => {
 	const [showPassword, setShowPassword] = useState(false)
 
 	return (
@@ -25,7 +26,7 @@ export const SensorItem = ({ sensor }: Props) => {
 				</button>
 			</div>
 			<div className="actions">
-				<button>
+				<button onClick={() => onEdit(sensor)}>
 					<EditIcon /> Edit
 				</button>
 				<button>