allow view read only items

client/src/app.js

@@ -15,6 +15,7 @@ function App() {
 
   const [showModalBox, setShowModalBox] = useState(false);
   const [showModalItem, setShowModalItem] = useState(false);
+  const [showModalItemReadOnly, setShowModalItemReadOnly] = useState(false);
 
   const [editBoxBool, setEditBoxBool] = useState(false);
   const [editItemBool, setEditItemBool] = useState(false);
@@ -233,8 +234,7 @@ function App() {
     setEditItemBool(false);
     setShowModalItem(true);
   }
-  const handleEditItem = (boxID, itemID) => {
-    clearFormItem();
+  const setItemInfo = (boxID, itemID) => {
     const box = data.find(box => box._id === boxID);
     const item = box.item.find(item => item._id === itemID);
     setBoxID(boxID);
@@ -242,9 +242,17 @@ function App() {
     setItemName(item.name || '');
     setItemDescription(item.description || '');
 
+  }
+  const handleEditItem = (boxID, itemID) => {
+    clearFormItem();
+    setItemInfo(boxID, itemID);
     setEditItemBool(true);
     setShowModalItem(true);
   }
+  const handleViewItem = (boxID, itemID) => {
+    setItemInfo(boxID, itemID);
+    setShowModalItemReadOnly(true);
+  }
   const handleRemoveItem = (boxID, itemID) => {
     removeItem(boxID, itemID);
   }
@@ -268,6 +276,7 @@ function App() {
 
   const handleModalCloseItem = () => {
     setShowModalItem(false);
+    setShowModalItemReadOnly(false);
   }
   const clearFormItem = () => {
     setItemID(undefined);
@@ -287,6 +296,7 @@ function App() {
     handleRemove: handleRemoveItem,
     handleAdd: handleAddItem,
     handleEdit: handleEditItem,
+    handleView: handleViewItem,
     handleName: handleNameItem,
     handleDescription: handleDescriptionItem,
   };
@@ -326,11 +336,16 @@ function App() {
     </fieldset>
     <button type="submit">submit</button>
   </form>
+  const itemView = <div>
+    <h1>{itemName}</h1>
+    <h2>{itemDescription}</h2>
+  </div>
+  
   return (
     <>
-      {<Modal show={showModalItem} edit={editItemBool} content={itemForm} handleClose={handleModalCloseItem} />}
-      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} handleClose={handleModalCloseBox} />}
-
+      {<Modal show={showModalItem} content={itemForm} handleClose={handleModalCloseItem} />}
+      {<Modal show={showModalBox} content={boxForm} handleClose={handleModalCloseBox} />}
+      {<Modal show={showModalItemReadOnly} content={itemView} handleClose={handleModalCloseItem} />}
 
       <div className='header-container'>
         <span className='filter-container'>

client/src/item.js

@@ -26,6 +26,7 @@ const Item = ({ data, itemHandler, boxID }) => {
         setShowMenu(true);
     }
     const handleItemViewClick = () => {
+        itemHandler.handleView(boxID,data._id);
     }
     const moreMenu = () => {
         return (