From 0f92a9c6b73c7459bd4a979784b13cd69b8806fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSelen?= <“selen.kockar@tedu.edu.tr”>
Date: Fri, 3 Nov 2023 22:10:04 +0300
Subject: [PATCH 1/2] Fix OverlayPanel Toast

---
 components/doc/overlaypanel/datatabledoc.js | 54 +++++++++------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/components/doc/overlaypanel/datatabledoc.js b/components/doc/overlaypanel/datatabledoc.js
index fafe59195c..21f98d8e13 100644
--- a/components/doc/overlaypanel/datatabledoc.js
+++ b/components/doc/overlaypanel/datatabledoc.js
@@ -29,12 +29,10 @@ export function DataTableDoc(props) {
     const toast = useRef(null);
     const isMounted = useRef(false);
 
-    useEffect(() => {
-        if (isMounted.current && selectedProduct) {
-            op.current.hide();
-            toast.current.show({ severity: 'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000 });
-        }
-    }, [selectedProduct]); // eslint-disable-line react-hooks/exhaustive-deps
+    const productSelect = (e) =>{
+        op.current.hide();
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
+    }
 
     useEffect(() => {
         isMounted.current = true;
@@ -99,12 +97,10 @@ export default function DataTableDemo() {
     const toast = useRef(null);
     const isMounted = useRef(false);
 
-    useEffect(() => {
-        if (isMounted.current && selectedProduct) {
-            op.current.hide();
-            toast.current.show({ severity: 'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000 });
-        }
-    }, [selectedProduct]);
+    const productSelect = (e) =>{
+        op.current.hide();
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
+    }
 
     useEffect(() => {
         isMounted.current = true;
@@ -133,11 +129,11 @@ export default function DataTableDemo() {
             <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
             {selectedProductContent}
             <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
-                <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
-                    <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
-                    <Column header="Image" body={imageBody} />
-                    <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
-                </DataTable>
+                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onRowClick={productSelect}>
+                        <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
+                        <Column header="Image" body={imageBody} />
+                        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
+                    </DataTable>
             </OverlayPanel>
         </div>
     );
@@ -172,13 +168,11 @@ export default function DataTableDemo() {
             <span className="text-600">{selectedProduct.category}</span>
         </div>
     );
-
-    useEffect(() => {
-        if (isMounted.current && selectedProduct) {
-            op.current.hide();
-            toast.current.show({ severity: 'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000 });
-        }
-    }, [selectedProduct]);
+    
+    const productSelect = (e) =>{
+        op.current.hide();
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
+    }
 
     useEffect(() => {
         isMounted.current = true;
@@ -207,11 +201,11 @@ export default function DataTableDemo() {
             <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
             {selectedProductContent}
             <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
-                <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
-                    <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
-                    <Column header="Image" body={imageBody} />
-                    <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
-                </DataTable>
+                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onRowClick={productSelect}>
+                        <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
+                        <Column header="Image" body={imageBody} />
+                        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
+                    </DataTable>
             </OverlayPanel>
         </div>
     );
@@ -248,7 +242,7 @@ export default function DataTableDemo() {
                 <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
                 {selectedProductContent}
                 <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
-                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
+                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onRowClick={productSelect}>
                         <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
                         <Column header="Image" body={imageBody} />
                         <Column field="price" header="Price" sortable body={priceBody} style={{ minWidth: '8rem' }} />

From 3996970b4be766b11223545ecf9549370f895e21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSelen?= <“selen.kockar@tedu.edu.tr”>
Date: Fri, 3 Nov 2023 22:29:07 +0300
Subject: [PATCH 2/2] Refactor

---
 components/doc/overlaypanel/datatabledoc.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/doc/overlaypanel/datatabledoc.js b/components/doc/overlaypanel/datatabledoc.js
index 21f98d8e13..52297d1885 100644
--- a/components/doc/overlaypanel/datatabledoc.js
+++ b/components/doc/overlaypanel/datatabledoc.js
@@ -29,10 +29,10 @@ export function DataTableDoc(props) {
     const toast = useRef(null);
     const isMounted = useRef(false);
 
-    const productSelect = (e) =>{
+    const productSelect = (e) => {
         op.current.hide();
-        toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
-    }
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: e.data.name, life: 3000 });
+    };
 
     useEffect(() => {
         isMounted.current = true;
@@ -97,10 +97,10 @@ export default function DataTableDemo() {
     const toast = useRef(null);
     const isMounted = useRef(false);
 
-    const productSelect = (e) =>{
+    const productSelect = (e) => {
         op.current.hide();
         toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
-    }
+    };
 
     useEffect(() => {
         isMounted.current = true;
@@ -169,10 +169,10 @@ export default function DataTableDemo() {
         </div>
     );
     
-    const productSelect = (e) =>{
+    const productSelect = (e) => {
         op.current.hide();
         toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
-    }
+    };
 
     useEffect(() => {
         isMounted.current = true;