added product update endpoint
This commit was merged in pull request #28.
This commit is contained in:
victorAnumudu
@@ -1,45 +1,53 @@
|
||||
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
||||
import {Formik, Form} from 'formik'
|
||||
import * as Yup from "yup";
|
||||
import InputText from '../InputText'
|
||||
import {addCustomTemplate} from '../../services/siteServices'
|
||||
import queryKeys from '../../services/queryKeys';
|
||||
// import InputText from '../InputText'
|
||||
import {updateProduct} from '../../services/siteServices'
|
||||
// import queryKeys from '../../services/queryKeys';
|
||||
|
||||
|
||||
const initialValues = {
|
||||
custom_id: "",
|
||||
provision_name: "",
|
||||
};
|
||||
|
||||
// To get the validation schema
|
||||
const validationSchema = Yup.object().shape({
|
||||
custom_id: Yup.string().required("custom_id is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
|
||||
provision_name: Yup.string().required("provision_name is required").min(6, 'must be upto 6 characters').max(200, 'must not exceed 200 characters'),
|
||||
details: Yup.string().required("details text is required").min(6, 'must be upto 6 characters').max(500, 'must not exceed 500 characters'),
|
||||
sale_text: Yup.string().required("sales text is required").min(6, 'must be upto 6 characters').max(500, 'must not exceed 500 characters'),
|
||||
});
|
||||
|
||||
export default function ProductDetails() {
|
||||
export default function ProductDetails({productDetails}) {
|
||||
|
||||
const initialValues = {
|
||||
details: productDetails?.details,
|
||||
sale_text: productDetails?.sale_text,
|
||||
};
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const customTemplate = useMutation({
|
||||
const productUpdate = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
if (!fields.custom_id || !fields.provision_name) {
|
||||
throw new Error('Please provide all fields marked *')
|
||||
}
|
||||
return addCustomTemplate(fields)
|
||||
return updateProduct(fields)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({
|
||||
queryKey: [...queryKeys.custom_template],
|
||||
// type: 'active',
|
||||
// exact: true,
|
||||
})
|
||||
// queryClient.refetchQueries({
|
||||
// queryKey: [...queryKeys.custom_template],
|
||||
// // type: 'active',
|
||||
// // exact: true,
|
||||
// })
|
||||
},
|
||||
onSettled: ()=>{
|
||||
setTimeout(()=>{
|
||||
productUpdate.reset()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
|
||||
//FUNCTION TO HANDLE ADD TEMPLATE
|
||||
const handleSubmit = (values, helper) => {
|
||||
// customTemplate.mutate(values)
|
||||
const reqData = {
|
||||
details: values.details,
|
||||
product_detail_id: productDetails?.product_detail_id,
|
||||
product_id: productDetails?.product_id,
|
||||
sale_text: values.sale_text,
|
||||
}
|
||||
productUpdate.mutate(reqData)
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -54,50 +62,50 @@ export default function ProductDetails() {
|
||||
className='flex flex-col w-full bg-white dark:bg-black-box text-black-body dark:text-white-body rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
<div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
|
||||
<label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.custom_id && props.touched.custom_id) && 'text-red-500'}`}>
|
||||
<label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.details && props.touched.details) && 'text-red-500'}`}>
|
||||
Details
|
||||
</label>
|
||||
<textarea
|
||||
className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
|
||||
rows={4}
|
||||
id='custom_id'
|
||||
id='details'
|
||||
placeholder='Enter your description text here ...'
|
||||
name='custom_id'
|
||||
value={props.values.custom_id}
|
||||
handleChange={props.handleChange}
|
||||
name='details'
|
||||
value={props.values.details}
|
||||
onChange={props.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
|
||||
<label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.provision_name && props.touched.provision_name) && 'text-red-500'}`}>
|
||||
<label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.sale_text && props.touched.sale_text) && 'text-red-500'}`}>
|
||||
Sales Text
|
||||
</label>
|
||||
<textarea
|
||||
className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
|
||||
rows={4}
|
||||
id='provision_name'
|
||||
id='sale_text'
|
||||
placeholder='Enter your description text here ...'
|
||||
name='provision_name'
|
||||
value={props.values.provision_name}
|
||||
handleChange={props.handleChange}
|
||||
name='sale_text'
|
||||
value={props.values.sale_text}
|
||||
onChange={props.handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='h-10 my-5 text-end'>
|
||||
<button type='submit' disabled={customTemplate.isPending}
|
||||
className='px-4 h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Update'}</button>
|
||||
<button type='submit' disabled={productUpdate.isPending}
|
||||
className='px-4 h-full bg-primary text-white font-bold rounded-md'>{productUpdate.isPending ? 'loading...' : 'Update'}</button>
|
||||
</div>
|
||||
|
||||
{customTemplate.error &&
|
||||
{productUpdate.error &&
|
||||
<>
|
||||
<div className="w-full text-center">
|
||||
<p className='text-red-500 text-sm'>{customTemplate.error.message}</p>
|
||||
<p className='text-red-500 text-sm'>{productUpdate.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{customTemplate.isSuccess &&
|
||||
{productUpdate.isSuccess &&
|
||||
<>
|
||||
<div className="w-full text-center">
|
||||
<p className='text-emerald-500 text-sm'>{'Template Added'}</p>
|
||||
<p className='text-emerald-500 text-sm'>{'Product Details Updated'}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user