import {
Add,
Delete,
Edit,
Flip,
PlusOne,
ToggleOff,
ToggleOn,
Widgets,
} from '@mui/icons-material'
import {
Box,
Card,
Chip,
Container,
Grid,
IconButton,
Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react'
import {
CreateThing,
DeleteThing,
GetThings,
SaveThing,
UpdateThingState,
} from '../../utils/Fetcher'
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
import CreateThingModal from '../Modals/Inputs/CreateThingModal'
const ThingCard = ({
thing,
onEditClick,
onStateChangeRequest,
onDeleteClick,
}) => {
const getThingIcon = type => {
if (type === 'text') {
return
} else if (type === 'number') {
return
} else if (type === 'boolean') {
if (thing.state === 'true') {
return
} else {
return
}
} else {
return
}
}
return (
{thing?.name}
{thing?.type}
Current state:
{thing?.state}
{/* */}
{
onStateChangeRequest(thing)
}}
sx={{
borderRadius: '50%',
width: 50,
height: 50,
zIndex: 1,
}}
>
{getThingIcon(thing?.type)}
{
onEditClick(thing)
}}
sx={{
borderRadius: '50%',
width: 25,
height: 25,
position: 'relative',
left: -10,
}}
>
{/* add delete icon: */}
{
onDeleteClick(thing)
}}
sx={{
borderRadius: '50%',
width: 25,
height: 25,
position: 'relative',
left: -10,
}}
>
)
}
const ThingsView = () => {
const [things, setThings] = useState([])
const [isShowCreateThingModal, setIsShowCreateThingModal] = useState(false)
const [createModalThing, setCreateModalThing] = useState(null)
const [confirmModelConfig, setConfirmModelConfig] = useState({})
useEffect(() => {
// fetch things
GetThings().then(result => {
result.json().then(data => {
setThings(data.res)
})
})
}, [])
const handleSaveThing = thing => {
let saveFunc = CreateThing
if (thing?.id) {
saveFunc = SaveThing
}
saveFunc(thing).then(result => {
result.json().then(data => {
if (thing?.id) {
const currentThings = [...things]
const thingIndex = currentThings.findIndex(
currentThing => currentThing.id === thing.id,
)
currentThings[thingIndex] = data.res
setThings(currentThings)
} else {
const currentThings = [...things]
currentThings.push(data.res)
setThings(currentThings)
}
})
})
}
const handleEditClick = thing => {
setCreateModalThing(thing)
setIsShowCreateThingModal(true)
}
const handleDeleteClick = thing => {
setConfirmModelConfig({
isOpen: true,
title: 'Delete Things',
confirmText: 'Delete',
cancelText: 'Cancel',
message: 'Are you sure you want to delete this Thing?',
onClose: isConfirmed => {
if (isConfirmed === true) {
DeleteThing(thing.id).then(response => {
if (response.ok) {
const currentThings = [...things]
const thingIndex = currentThings.findIndex(
currentThing => currentThing.id === thing.id,
)
currentThings.splice(thingIndex, 1)
setThings(currentThings)
}
})
}
setConfirmModelConfig({})
},
})
}
const handleStateChangeRequest = thing => {
if (thing?.type === 'text') {
setCreateModalThing(thing)
setIsShowCreateThingModal(true)
} else {
if (thing?.type === 'number') {
thing.state = Number(thing.state) + 1
} else if (thing?.type === 'boolean') {
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)
})
})
}
}
return (
{things.length === 0 && (
No things has been created/found
)}
{things.map(thing => (
))}
}
onClick={() => {
setIsShowCreateThingModal(true)
}}
>
{isShowCreateThingModal && (
{
setIsShowCreateThingModal(false)
setCreateModalThing(null)
}}
onSave={handleSaveThing}
currentThing={createModalThing}
/>
)}
)
}
export default ThingsView