Video-38-Update-Product

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
+     3.  show product data in form
+ 38. Update Product
+     1.  create form submit handler
+     2.  create backend api for update

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
                       </Button>
+                      {loadingUpdate && <CircularProgress />}
                     </ListItem>
                   </List>
                 </form>

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;