fixed item update

src/components/form/formUpdateItem.jsx

@@ -1,14 +1,26 @@
 import React, { useState, useEffect } from "react";
-import { Form, Input, InputNumber, Button, Select } from "antd";
+import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
 import axios from "axios";
 import { getRooms } from "../../api/room";
 import { getItem } from "../../api/item";
+import moment from 'moment';
 
-const { TextArea } = Input;
 const { Option } = Select;
 
 
-function formatItem(_id, brand, model, room, price, purchaseDate, description, categories, createdAt, updatedAt, __v) {
+function formatItem(itemObj) {//_id, brand, model, room, price, purchaseDate, description, categories, createdAt, updatedAt, __v, link) {
+    let _id          = itemObj._id
+    let brand        = itemObj.brand
+    let model        = itemObj.model
+    let room         = itemObj.room
+    let price        = itemObj.price
+    let purchaseDate = new Date(itemObj.purchaseDate)
+    let description  = itemObj.description
+    let categories   = itemObj.categories
+    let createdAt    = itemObj.createdAt
+    let updatedAt    = itemObj.updatedAt
+    let __v = itemObj.__v
+        let link = itemObj.link
     let item = {
         _id,
         brand,
@@ -20,7 +32,8 @@ function formatItem(_id, brand, model, room, price, purchaseDate, description, c
         categories,
         createdAt,
         updatedAt,
-        __v
+        __v,
+        link
     }
     return item;
 }
@@ -28,15 +41,29 @@ function formatItem(_id, brand, model, room, price, purchaseDate, description, c
 export const FormUpdateItem = ({ itemId }) => {
     const [form] = Form.useForm();
     const [rooms, setRooms] = useState([]);
-    const [item, setItem] = useState(formatItem({ _id: itemId }))
+    const [item, setItem] = useState(null)
 
     useEffect(() => {
+        const fetchData = async () => {
+            const roomsResponse = await getRooms();
+            setRooms(roomsResponse);
 
-        setRooms(getRooms())
+            const itemResponse = await getItem(itemId);
+            console.log(itemResponse)
+            setItem(formatItem(itemResponse));
+        };
 
-        setItem(getItem(item._id))
+        fetchData();
+    }, [itemId]); 
 
-    }, []);
+    useEffect(() => {
+        if (item) { 
+            form.setFieldsValue({
+                ...item,
+                purchaseDate: item.purchaseDate ? moment(item.purchaseDate) : null,
+            });
+        }
+    }, [item, form]);
 
     const onFinish = async (values) => {
         try {
@@ -50,6 +77,7 @@ export const FormUpdateItem = ({ itemId }) => {
         }
     };
 
+    const dateFormat = 'YYYY-MM-DD';
     return (
         <Form
             form={form}
@@ -65,7 +93,9 @@ export const FormUpdateItem = ({ itemId }) => {
             </Form.Item>
             <Form.Item label="Room" name="room">
                 <Select placeholder="Select a room">
-                    {rooms.map((room) => (
+                    {console.log(rooms)}
+                    {
+                        rooms.map((room) => (
                         <Option key={room._id} value={room._id}>
                             {room.name}
                         </Option>
@@ -76,7 +106,9 @@ export const FormUpdateItem = ({ itemId }) => {
                 <InputNumber />
             </Form.Item>
             <Form.Item label="Purchase Date" name="purchaseDate">
-                <Input />
+                <DatePicker
+                    dateFormat={dateFormat}
+                />
             </Form.Item>
             <Form.Item label="Description" name="description">
                 <Input.TextArea rows={4} />