Update footer links and add EditThingStateModal component

src/views/Landing/Footer.jsx

@@ -108,15 +108,19 @@ function Footer() {
           >
             Roadmap
           </Link>
-          <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+          <Link
-            Documentation(soon)
+            href='https://docs.donetick.com/'
+            level='body2'
+            sx={{ display: 'block' }}
+          >
+            Documentation
           </Link>
           <Link
             href='https://github.com/donetick/donetick/releases'
             level='body2'
             sx={{ display: 'block' }}
           >
-            Changelog(soon)
+            Changelog
           </Link>
           <Link disabled={true} level='body2' sx={{ display: 'block' }}>
             V{version}

src/views/Modals/Inputs/EditThingState.jsx

@@ -0,0 +1,69 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  Input,
+  Modal,
+  ModalDialog,
+  Typography,
+} from '@mui/joy'
+import { useState } from 'react'
+
+function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
+  const [state, setState] = useState(currentThing?.state || '')
+  const [errors, setErrors] = useState({})
+
+  const isValid = () => {
+    const newErrors = {}
+
+    if (state.trim() === '') {
+      newErrors.state = 'State is required'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSave = () => {
+    if (!isValid()) {
+      return
+    }
+    onSave({
+      name,
+      type: currentThing?.type,
+      id: currentThing?.id,
+      state: state || null,
+    })
+    onClose()
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose}>
+      <ModalDialog>
+        <Typography level='h4'>Update state</Typography>
+
+        <FormControl>
+          <Typography>Value</Typography>
+          <Input
+            placeholder='Thing value'
+            value={state || ''}
+            onChange={e => setState(e.target.value)}
+            sx={{ minWidth: 300 }}
+          />
+          <FormHelperText color='danger'>{errors.state}</FormHelperText>
+        </FormControl>
+
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+            {currentThing?.id ? 'Update' : 'Create'}
+          </Button>
+          <Button onClick={onClose} variant='outlined'>
+            {currentThing?.id ? 'Cancel' : 'Close'}
+          </Button>
+        </Box>
+      </ModalDialog>
+    </Modal>
+  )
+}
+export default EditThingStateModal

src/views/Things/ThingsView.jsx

@@ -29,6 +29,7 @@ import {
 } from '../../utils/Fetcher'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import CreateThingModal from '../Modals/Inputs/CreateThingModal'
+import EditThingStateModal from '../Modals/Inputs/EditThingState'
 const ThingCard = ({
   thing,
   onEditClick,
@@ -164,6 +165,7 @@ const ThingCard = ({
 const ThingsView = () => {
   const [things, setThings] = useState([])
   const [isShowCreateThingModal, setIsShowCreateThingModal] = useState(false)
+  const [isShowEditThingStateModal, setIsShowEditStateModal] = useState(false)
   const [createModalThing, setCreateModalThing] = useState(null)
   const [confirmModelConfig, setConfirmModelConfig] = useState({})
 
@@ -206,8 +208,8 @@ const ThingsView = () => {
     setIsSnackbarOpen(true)
   }
   const handleEditClick = thing => {
+    setIsShowEditStateModal(true)
     setCreateModalThing(thing)
-    setIsShowCreateThingModal(true)
   }
   const handleDeleteClick = thing => {
     setConfirmModelConfig({
@@ -240,31 +242,27 @@ const ThingsView = () => {
   }
 
   const handleStateChangeRequest = thing => {
-    if (thing?.type === 'text') {
+    if (thing?.type === 'number') {
-      setCreateModalThing(thing)
+      thing.state = Number(thing.state) + 1
-      setIsShowCreateThingModal(true)
+    } else if (thing?.type === 'boolean') {
-    } else {
+      if (thing.state === 'true') {
-      if (thing?.type === 'number') {
+        thing.state = 'false'
-        thing.state = Number(thing.state) + 1
+      } else {
-      } else if (thing?.type === 'boolean') {
+        thing.state = 'true'
-        if (thing.state === 'true') {
-          thing.state = 'false'
-        } else {
-          thing.state = 'true'
-        }
       }
-
-      UpdateThingState(thing).then(result => {
-        result.json().then(data => {
-          const currentThings = [...things]
-          const thingIndex = currentThings.findIndex(
-            currentThing => currentThing.id === thing.id,
-          )
-          currentThings[thingIndex] = data.res
-          setThings(currentThings)
-        })
-      })
     }
+
+    UpdateThingState(thing).then(result => {
+      result.json().then(data => {
+        const currentThings = [...things]
+        const thingIndex = currentThings.findIndex(
+          currentThing => currentThing.id === thing.id,
+        )
+        currentThings[thingIndex] = data.res
+        setThings(currentThings)
+      })
+    })
+
     setSnackbarMessage('Thing state updated successfully')
     setIsSnackbarOpen(true)
   }
@@ -342,6 +340,18 @@ const ThingsView = () => {
             currentThing={createModalThing}
           />
         )}
+        {isShowEditThingStateModal && (
+          <EditThingStateModal
+            isOpen={isShowEditThingStateModal}
+            onClose={() => {
+              setIsShowEditStateModal(false)
+              setCreateModalThing(null)
+            }}
+            onSave={handleStateChangeRequest}
+            currentThing={createModalThing}
+          />
+        )}
+
         <ConfirmationModal config={confirmModelConfig} />
       </Box>
       <Snackbar

src/views/components/NavBar.jsx

@@ -121,6 +121,7 @@ const NavBar = () => {
           sx={{
             fontWeight: 700,
             fontSize: 20,
+            cursor: 'pointer',
           }}
         >
           Done