1 files changed, 97 insertions, 54 deletions

diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx
index 59263ff..ffce51c 100644
--- a/src/views/Modals/Inputs/CreateThingModal.jsx
+++ b/src/views/Modals/Inputs/CreateThingModal.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -14,8 +16,9 @@ import { useEffect, useState } from 'react'
 
 function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
   const [name, setName] = useState(currentThing?.name || '')
-  const [type, setType] = useState(currentThing?.type || 'numeric')
+  const [type, setType] = useState(currentThing?.type || 'number')
   const [state, setState] = useState(currentThing?.state || '')
+  const [errors, setErrors] = useState({})
   useEffect(() => {
     if (type === 'boolean') {
       if (state !== 'true' && state !== 'false') {
@@ -27,7 +30,31 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
       }
     }
   }, [type])
+
+  const isValid = () => {
+    const newErrors = {}
+    if (!name || name.trim() === '') {
+      newErrors.name = 'Name is required'
+    }
+
+    if (type === 'number' && isNaN(state)) {
+      newErrors.state = 'State must be a number'
+    }
+    if (type === 'boolean' && !['true', 'false'].includes(state)) {
+      newErrors.state = 'State must be true or false'
+    }
+    if ((type === 'text' && !state) || state.trim() === '') {
+      newErrors.state = 'State is required'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
   const handleSave = () => {
+    if (!isValid()) {
+      return
+    }
     onSave({ name, type, id: currentThing?.id, state: state || null })
     onClose()
   }
@@ -36,64 +63,81 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
     <Modal open={isOpen} onClose={onClose}>
       <ModalDialog>
         {/* <ModalClose /> */}
-        <Typography variant='h4'>P;lease add info</Typography>
-        <FormLabel>Name</FormLabel>
-
-        <Textarea
-          placeholder='Thing name'
-          value={name}
-          onChange={e => setName(e.target.value)}
-          sx={{ minWidth: 300 }}
-        />
-        <FormLabel>Type</FormLabel>
-        <Select value={type} sx={{ minWidth: 300 }}>
-          {['text', 'number', 'boolean'].map(type => (
-            <Option value={type} key={type} onClick={() => setType(type)}>
-              {type.charAt(0).toUpperCase() + type.slice(1)}
-            </Option>
-          ))}
-        </Select>
-
-        {type === 'text' && (
-          <>
-            <FormLabel>Value</FormLabel>
-            <Input
-              placeholder='Thing value'
-              value={state || ''}
-              onChange={e => setState(e.target.value)}
+        <Typography level='h4'>
+          {currentThing?.id ? 'Edit' : 'Create'} Thing
+        </Typography>
+        <FormControl>
+          <FormLabel>
+            Name
+            <Textarea
+              placeholder='Thing name'
+              value={name}
+              onChange={e => setName(e.target.value)}
               sx={{ minWidth: 300 }}
             />
-          </>
+          </FormLabel>
+          <FormHelperText color='danger'>{errors.name}</FormHelperText>
+        </FormControl>
+        <FormControl>
+          <FormLabel>
+            Type
+            <Select value={type} sx={{ minWidth: 300 }}>
+              {['text', 'number', 'boolean'].map(type => (
+                <Option value={type} key={type} onClick={() => setType(type)}>
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                </Option>
+              ))}
+            </Select>
+          </FormLabel>
+          <FormHelperText color='danger'>{errors.type}</FormHelperText>
+        </FormControl>
+        {type === 'text' && (
+          <FormControl>
+            <FormLabel>
+              Value
+              <Input
+                placeholder='Thing value'
+                value={state || ''}
+                onChange={e => setState(e.target.value)}
+                sx={{ minWidth: 300 }}
+              />
+            </FormLabel>
+            <FormHelperText color='danger'>{errors.state}</FormHelperText>
+          </FormControl>
         )}
         {type === 'number' && (
-          <>
-            <FormLabel>Value</FormLabel>
-            <Input
-              placeholder='Thing value'
-              type='number'
-              value={state || ''}
-              onChange={e => {
-                setState(e.target.value)
-              }}
-              sx={{ minWidth: 300 }}
-            />
-          </>
+          <FormControl>
+            <FormLabel>
+              Value
+              <Input
+                placeholder='Thing value'
+                type='number'
+                value={state || ''}
+                onChange={e => {
+                  setState(e.target.value)
+                }}
+                sx={{ minWidth: 300 }}
+              />
+            </FormLabel>
+          </FormControl>
         )}
         {type === 'boolean' && (
-          <>
-            <FormLabel>Value</FormLabel>
-            <Select sx={{ minWidth: 300 }} value={state}>
-              {['true', 'false'].map(value => (
-                <Option
-                  value={value}
-                  key={value}
-                  onClick={() => setState(value)}
-                >
-                  {value.charAt(0).toUpperCase() + value.slice(1)}
-                </Option>
-              ))}
-            </Select>
-          </>
+          <FormControl>
+            <FormLabel>
+              Value
+              <Select sx={{ minWidth: 300 }} value={state}>
+                {['true', 'false'].map(value => (
+                  <Option
+                    value={value}
+                    key={value}
+                    onClick={() => setState(value)}
+                  >
+                    {value.charAt(0).toUpperCase() + value.slice(1)}
+                  </Option>
+                ))}
+              </Select>
+            </FormLabel>
+          </FormControl>
         )}
 
         <Box display={'flex'} justifyContent={'space-around'} mt={1}>
@@ -108,5 +152,4 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
     </Modal>
   )
 }
-
 export default CreateThingModal