From 643cf275f1344489f2dfc16688b9ddf7cd1cc2d4 Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Tue, 11 Jul 2023 13:12:14 +0100
Subject: [PATCH 1/2] refactor: database structure search modal

---
 .../panels/databasePanel/DatabasePanel.tsx    | 40 +---------
 .../DatabaseStructureSearchModal.tsx          | 73 +++++++++++++++----
 2 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/src/component/panels/databasePanel/DatabasePanel.tsx b/src/component/panels/databasePanel/DatabasePanel.tsx
index c68cecc03..1ac301425 100644
--- a/src/component/panels/databasePanel/DatabasePanel.tsx
+++ b/src/component/panels/databasePanel/DatabasePanel.tsx
@@ -10,7 +10,6 @@ import {
 import { DatabaseNMREntry, mapRanges } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { useCallback, useState, useRef, memo, useEffect, useMemo } from 'react';
-import { BsHexagon, BsHexagonFill } from 'react-icons/bs';
 import { FaICursor } from 'react-icons/fa';
 import { IoSearchOutline } from 'react-icons/io5';
 import { useAccordionContext } from 'react-science/ui';
@@ -27,12 +26,10 @@ import {
 import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
 import { usePreferences } from '../../context/PreferencesContext';
-import Button from '../../elements/Button';
 import Input from '../../elements/Input';
 import Select from '../../elements/Select';
 import ToggleButton from '../../elements/ToggleButton';
 import { useAlert } from '../../elements/popup/Alert';
-import { positions, transitions, useModal } from '../../elements/popup/Modal';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
 import useToolsFunctions from '../../hooks/useToolsFunctions';
 import { DISPLAYER_MODE } from '../../reducer/core/Constants';
@@ -84,7 +81,6 @@ function DatabasePanelInner({
 }: DatabaseInnerProps) {
   const dispatch = useDispatch();
   const alert = useAlert();
-  const modal = useModal();
   const { item } = useAccordionContext('Databases');
 
   const { handleChangeOption } = useToolsFunctions();
@@ -329,19 +325,6 @@ function DatabasePanelInner({
   const searchByStructureHandler = (idCodeValue: string) => {
     setIdCode(idCodeValue);
   };
-  const openSearchByStructure = () => {
-    modal.show(
-      <DatabaseStructureSearchModal
-        onChange={searchByStructureHandler}
-        idCode={idCode}
-      />,
-      {
-        position: positions.MIDDLE,
-        transition: transitions.SCALE,
-        isBackgroundBlur: false,
-      },
-    );
-  };
 
   return (
     <div
@@ -407,25 +390,10 @@ function DatabasePanelInner({
             onClear={clearHandler}
             canClear
           />
-          <Button.Done
-            fill="clear"
-            onClick={openSearchByStructure}
-            style={{ marginLeft: '5px' }}
-          >
-            {!idCode ? (
-              <BsHexagon
-                style={{
-                  fontSize: '14px',
-                }}
-              />
-            ) : (
-              <BsHexagonFill
-                style={{
-                  fontSize: '14px',
-                }}
-              />
-            )}
-          </Button.Done>
+          <DatabaseStructureSearchModal
+            onChange={searchByStructureHandler}
+            idCode={idCode}
+          />
         </DefaultPanelHeader>
       )}
       {isFlipped && (
diff --git a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
index f2ac3a176..0e82cf048 100644
--- a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
+++ b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
@@ -1,7 +1,9 @@
 /** @jsxImportSource @emotion/react */
+import { BsHexagon, BsHexagonFill } from 'react-icons/bs';
 import { StructureEditor } from 'react-ocl/full';
+import { Modal, useOnOff } from 'react-science/ui';
 
-import CloseButton from '../../elements/CloseButton';
+import Button from '../../elements/Button';
 import { ModalStyles } from '../../modal/ModalStyle';
 
 interface DatabaseStructureSearchModalProps {
@@ -15,21 +17,62 @@ export function DatabaseStructureSearchModal({
   idCode,
   onClose,
 }: DatabaseStructureSearchModalProps) {
+  const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
+
   return (
-    <div css={ModalStyles}>
-      <div className="header handle">
-        <span>Search by structure</span>
-        <CloseButton onClick={onClose} className="close-bt" />
-      </div>
+    <>
+      <Button.Done
+        fill="clear"
+        onClick={openDialog}
+        style={{ marginLeft: '5px' }}
+      >
+        {!idCode ? (
+          <BsHexagon
+            style={{
+              fontSize: '14px',
+            }}
+          />
+        ) : (
+          <BsHexagonFill
+            style={{
+              fontSize: '14px',
+            }}
+          />
+        )}
+      </Button.Done>
+      <Modal
+        hasCloseButton
+        isOpen={isOpenDialog}
+        onRequestClose={() => {
+          onClose?.();
+          closeDialog();
+        }}
+        maxWidth={1000}
+      >
+        <div css={ModalStyles}>
+          <Modal.Header>
+            <div
+              className="header handle"
+              style={{
+                padding: '0',
+                margin: '0 30%',
+                width: '40%',
+              }}
+            >
+              <span>Search by structure</span>
+            </div>
+          </Modal.Header>
 
-      <div className="main-content">
-        <StructureEditor
-          initialIDCode={idCode}
-          svgMenu
-          fragment
-          onChange={(molFile, molecule, idCode) => onChange(idCode)}
-        />
-      </div>
-    </div>
+          <div className="main-content">
+            <StructureEditor
+              initialIDCode={idCode}
+              svgMenu
+              fragment
+              onChange={(molFile, molecule, idCode) => onChange(idCode)}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
   );
 }

From 0867ac054c9829319f67742f847cd67de79e9bf8 Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Thu, 17 Aug 2023 17:21:18 +0100
Subject: [PATCH 2/2] fix: DatabaseSearchModal style

---
 .../DatabaseStructureSearchModal.tsx          | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
index 0e82cf048..e1d8ed35e 100644
--- a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
+++ b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
@@ -4,7 +4,6 @@ import { StructureEditor } from 'react-ocl/full';
 import { Modal, useOnOff } from 'react-science/ui';
 
 import Button from '../../elements/Button';
-import { ModalStyles } from '../../modal/ModalStyle';
 
 interface DatabaseStructureSearchModalProps {
   onChange: (idCode: string) => void;
@@ -49,29 +48,25 @@ export function DatabaseStructureSearchModal({
         }}
         maxWidth={1000}
       >
-        <div css={ModalStyles}>
-          <Modal.Header>
-            <div
-              className="header handle"
-              style={{
-                padding: '0',
-                margin: '0 30%',
-                width: '40%',
-              }}
-            >
-              <span>Search by structure</span>
-            </div>
-          </Modal.Header>
-
-          <div className="main-content">
-            <StructureEditor
-              initialIDCode={idCode}
-              svgMenu
-              fragment
-              onChange={(molFile, molecule, idCode) => onChange(idCode)}
-            />
+        <Modal.Header>
+          <div
+            style={{
+              color: 'rgb(0, 93, 158)',
+              width: '100%',
+              textAlign: 'center',
+            }}
+          >
+            <span>Search by structure</span>
           </div>
-        </div>
+        </Modal.Header>
+        <Modal.Body>
+          <StructureEditor
+            initialIDCode={idCode}
+            svgMenu
+            fragment
+            onChange={(molFile, molecule, idCode) => onChange(idCode)}
+          />
+        </Modal.Body>
       </Modal>
     </>
   );