diff --git a/README.md b/README.md index 82df36f..cc3a762 100644 --- a/README.md +++ b/README.md @@ -181,4 +181,7 @@ $ Open http://localhost:3000 37. Create Product Edit Page 1. create edit page 2. create api for product - 3. show product data in form \ No newline at end of file + 3. show product data in form + 38. Update Product + 1. create form submit handler + 2. create backend api for update \ No newline at end of file diff --git a/pages/admin/product/[id].js b/pages/admin/product/[id].js index 13add46..be761ac 100644 --- a/pages/admin/product/[id].js +++ b/pages/admin/product/[id].js @@ -29,6 +29,13 @@ function reducer(state, action) { return { ...state, loading: false, error: '' }; case 'FETCH_FAIL': return { ...state, loading: false, error: action.payload }; + case 'UPDATE_REQUEST': + return { ...state, loadingUpdate: true, errorUpdate: '' }; + case 'UPDATE_SUCCESS': + return { ...state, loadingUpdate: false, errorUpdate: '' }; + case 'UPDATE_FAIL': + return { ...state, loadingUpdate: false, errorUpdate: action.payload }; + default: return state; } @@ -37,7 +44,7 @@ function reducer(state, action) { function ProductEdit({ params }) { const productId = params.id; const { state } = useContext(Store); - const [{ loading, error }, dispatch] = useReducer(reducer, { + const [{ loading, error, loadingUpdate }, dispatch] = useReducer(reducer, { loading: true, error: '', }); @@ -78,19 +85,38 @@ function ProductEdit({ params }) { fetchData(); } }, []); - const submitHandler = async ({ name }) => { + const submitHandler = async ({ + name, + slug, + price, + category, + image, + brand, + countInStock, + description, + }) => { closeSnackbar(); try { - const { data } = await axios.put( + dispatch({ type: 'UPDATE_REQUEST' }); + await axios.put( `/api/admin/products/${productId}`, { name, + slug, + price, + category, + image, + brand, + countInStock, + description, }, { headers: { authorization: `Bearer ${userInfo.token}` } } ); - + dispatch({ type: 'UPDATE_SUCCESS' }); enqueueSnackbar('Product updated successfully', { variant: 'success' }); + router.push('/admin/products'); } catch (err) { + dispatch({ type: 'UPDATE_FAIL', payload: getError(err) }); enqueueSnackbar(getError(err), { variant: 'error' }); } }; @@ -327,6 +353,7 @@ function ProductEdit({ params }) { > Update + {loadingUpdate && } diff --git a/pages/api/admin/products/[id]/index.js b/pages/api/admin/products/[id]/index.js index ceecc1a..a0c6b57 100644 --- a/pages/api/admin/products/[id]/index.js +++ b/pages/api/admin/products/[id]/index.js @@ -12,4 +12,26 @@ handler.get(async (req, res) => { await db.disconnect(); res.send(product); }); + +handler.put(async (req, res) => { + await db.connect(); + const product = await Product.findById(req.query.id); + if (product) { + product.name = req.body.name; + product.slug = req.body.slug; + product.price = req.body.price; + product.category = req.body.category; + product.image = req.body.image; + product.brand = req.body.brand; + product.countInStock = req.body.countInStock; + product.description = req.body.description; + await product.save(); + await db.disconnect(); + res.send({ message: 'Product Updated Successfully' }); + } else { + await db.disconnect(); + res.status(404).send({ message: 'Product Not Found' }); + } +}); + export default handler;