import {
Box,
Button,
FormLabel,
Input,
Select,
SimpleGrid,
Spinner,
Textarea,
useToast,
} from '@chakra-ui/react'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import {
selectDeviceList,
selectSendingSMS,
sendSMS,
} from '../../store/deviceSlice'
import { useAppDispatch } from '../../store/hooks'
export const SendSMSForm = ({ deviceList, formData, handleChange }) => {
return (
<>
Select Device
Recipient
Message
>
)
}
export default function SendSMS() {
const deviceList = useSelector(selectDeviceList)
const toast = useToast()
const dispatch = useAppDispatch()
const sendingSMS = useSelector(selectSendingSMS)
const [formData, setFormData] = useState({
device: '',
recipients: '',
message: '',
})
const handSend = (e) => {
e.preventDefault()
const { device: deviceId, recipients, message } = formData
const recipientsArray = recipients.replace(' ', '').split(',')
if (!deviceId || !recipients || !message) {
toast({
title: 'Please fill all fields',
status: 'error',
})
return
}
for (let recipient of recipientsArray) {
// TODO: validate phone numbers
}
dispatch(
sendSMS({
deviceId,
payload: {
recipients: recipientsArray,
message,
},
})
)
}
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
})
}
return (
<>
>
)
}