import React, { useState, useEffect } from 'react';
import * as Yup from 'yup';
import { Formik } from 'formik';
import _ from 'lodash';
import { useDispatch, useSelector } from 'react-redux';
import { getMenus } from 'src/slices/menu';
import useAuth from 'src/hooks/useAuth';
import {
Box,
Button,
Card,
CardContent,
CardHeader,
Checkbox,
CircularProgress,
Divider,
FormHelperText,
Grid,
Link,
TextField,
Typography
} from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import wait from 'src/utils/wait';
import axios from 'axios';
const CardForm = ({ item, index, menuItem, subMenu }) => {
const [isAlertVisible, setAlertVisible] = useState(false);
const [response, setResponse] = useState({});
const dispatch = useDispatch();
const { establishment } = useAuth();
useEffect(() => {
console.log('running....')
dispatch(getMenus(establishment._id));
}, []);
const sendEdit = async values => {
console.log(values, 'dette skal sendes inn');
const menu = _.cloneDeep(menuItem);
let update = menu.sections[subMenu.index].items.splice([index], 1, values);
const accessToken = window.localStorage.getItem('accessToken');
const config = {
headers: { Auhorization: `Bearer ${accessToken}` }
};
const data = await axios
.put(`http://localhost:5000/api/menus/${menu._id}`, menu, config)
.then(result => {
setResponse(result);
// Update state
dispatch(getMenus(establishment._id));
return result;
})
.catch(err => {
setResponse(err);
return new Promise(err);
});
return data;
};
return (
<Formik
initialValues={{
price: item.price,
name: item.name,
id: item.id,
description: item.description,
// policy: false,
submit: null
}}
validationSchema={Yup.object().shape({
price: Yup.string().required('Required'),
name: Yup.string().required('Required'),
id: Yup.string().required('Required'),
description: Yup.string()
.min(3, 'Må være minst 3 bokstaver')
.max(255)
.required('Required')
// policy: Yup.boolean().oneOf([true], 'This field must be checked')
})}
onSubmit={async (
values,
{ resetForm, setErrors, setStatus, setSubmitting }
) => {
try {
// NOTE: Make API request
// await wait(1000);
await sendEdit(values);
resetForm();
setStatus({ success: true });
setSubmitting(false);
setAlertVisible(true);
resetForm();
} catch (err) {
console.error(err);
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
}
}}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
isSubmitting,
touched,
values
}) => (
<Card>
<CardHeader title={`Rediger ${item.name}`} />
<Divider />
<CardContent>
{isAlertVisible && (
<Box mb={3}>
<Alert
onClose={() => setAlertVisible(false)}
severity={response.status ? 'success' : 'error'}
>
{response.status === 200
? `Flott! Da er den oppdatert.`
: 'Beklager, det har skjedd en feil. Din beskjed er ikke registrert'}
</Alert>
</Box>
)}
{isSubmitting ? (
<Box display="flex" justifyContent="center" my={5}>
<CircularProgress />
</Box>
) : (
<form onSubmit={handleSubmit}>
<Grid container spacing={2}>
<Grid item md={6} xs={12}>
<TextField
error={Boolean(touched.name && errors.name)}
fullWidth
helperText={touched.name && errors.name}
label="Navn"
name="name"
onBlur={handleBlur}
onChange={handleChange}
value={values.name}
variant="outlined"
/>
</Grid>
<Grid item md={6} xs={12}>
<TextField
error={Boolean(touched.id && errors.id)}
fullWidth
helperText={touched.id && errors.id}
label="Meny nummer"
name="id"
onBlur={handleBlur}
onChange={handleChange}
value={values.id}
variant="outlined"
/>
</Grid>
</Grid>
<Box mt={2}>
<TextField
error={Boolean(touched.price && errors.price)}
fullWidth
helperText={touched.price && errors.price}
label="Pris"
name="price"
onBlur={handleBlur}
onChange={handleChange}
type="price"
value={values.price}
variant="outlined"
/>
</Box>
<Box mt={2}>
<TextField
error={Boolean(touched.description && errors.description)}
fullWidth
helperText={touched.description && errors.description}
label="Beskrivelse"
name="description"
onBlur={handleBlur}
onChange={handleChange}
type="description"
value={values.description}
variant="outlined"
/>
</Box>
{/* <Box alignItems="center" display="flex" mt={2} ml={-1}>
<Checkbox
checked={values.policy}
name="policy"
onChange={handleChange}
/>
<Typography variant="body2" color="textSecondary">
I have read the{' '}
<Link component="a" href="#" color="secondary">
Terms and Conditions
</Link>
</Typography>
</Box>
{Boolean(touched.policy && errors.policy) && (
<FormHelperText error>{errors.policy}</FormHelperText>
)} */}
<Box mt={2}>
<Button
color="secondary"
disabled={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
>
Lagre
</Button>
</Box>
</form>
)}
</CardContent>
</Card>
)}
</Formik>
);
};
export default CardForm;
