Working sensor modal

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 {

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>

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>

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>