import React, { useEffect } from 'react'; import { Box, Button, TextField } from '@mui/material'; import Head from 'next/head'; import { ChevronLeftOutlined } from '@mui/icons-material'; import Loading from 'components/Loading'; import { useFormik } from 'formik'; import { useRouter } from 'next/dist/client/router'; import * as yup from 'yup'; const validationSchema = yup.object({ patient_name: yup .string('Enter your name') .min(2, 'Name should be of minimum 2 characters length') .required('Name is required'), patient_hkid: yup .string('Enter your HKID') .matches(/^[A-Z]{1,2}[0-9]{6}\([0-9]\)$/, 'HKID should be in format of XX123456(1-9)') .required('HKID is required'), patient_age: yup .number('Enter your age') .min(1, 'Age should be greater than 0') .max(90, 'Age should be less than 90') .required('Age is required'), patient_mobile: yup .string('Enter your mobile number') .matches(/^[0-9]{8}$/, 'Mobile number should be 8 numbers') .required('Mobile number is required'), }); export default () => { const router = useRouter(); const { id } = router.query; const [changing_page, setChangingPage] = React.useState(false); const [loading, setLoading] = React.useState(true); const formik = useFormik({ enableReinitialize: true, initialValues: { patient_name: '', patient_hkid: '', patient_age: 0, patient_mobile: '', // bruisesScratchesMinorBurns: false, chestPain: false, headache: false, myMuiCheck: false, nauseaAndVomiting: false, runnyOrStuffyNose: false, soreThroat: false, }, validationSchema, onSubmit: values => { fetch('/api/patient_queue/update_queue_item', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id, queue_type: 'semi-urgent', values }), }) .then(response => response.json()) .then(data => { if (data.status) { alert('saved !'); router.reload(); } else { // alert(data.message); alert('sorry there are something wrong, please try again'); } }) .catch(err => { console.error(err); alert('server error'); }); }, }); useEffect(() => { console.log({ t: `/api/patient_queue/read_queue_item?queue_type=semi-urgent&id=${id}` }); if (id) { fetch(`/api/patient_queue/read_queue_item?queue_type=semi-urgent&id=${id}`, { method: 'GET', }) .then(response => response.json()) .then(data => { if (data.status) { console.log(data); const { name, hkid, mobile, age, bruisesScratchesMinorBurns, chestPain, headache, myMuiCheck, nauseaAndVomiting, runnyOrStuffyNose, soreThroat, } = data.queueItem; formik.setValues({ patient_name: name, patient_hkid: hkid, patient_mobile: mobile, patient_age: age, bruisesScratchesMinorBurns, chestPain, headache, myMuiCheck, nauseaAndVomiting, runnyOrStuffyNose, soreThroat, }); } else { alert(data.message); } setLoading(false); }) .catch(err => { console.error(err); alert('server error'); }) .finally(() => { setLoading(false); }); } }, [id]); if (loading) { return ; } return ( <> dashboard - non-urgent case
Edit Registration {/* */}
); };