From b254096c2c0d22806353129678f98b4277147ad2 Mon Sep 17 00:00:00 2001
From: Etienne ANNE <etienne.anne@icloud.com>
Date: Tue, 5 Nov 2024 10:34:59 +0100
Subject: [PATCH] refacto

---
 otoroshi/javascript/src/components/window.js  | 371 ++++++++----------
 .../javascript/src/pages/DangerZonePage.js    |   9 +-
 otoroshi/javascript/src/pages/DraftsPage.js   |  50 +++
 3 files changed, 226 insertions(+), 204 deletions(-)
 create mode 100644 otoroshi/javascript/src/pages/DraftsPage.js

diff --git a/otoroshi/javascript/src/components/window.js b/otoroshi/javascript/src/components/window.js
index 0dc5280cd..2c9bdf135 100644
--- a/otoroshi/javascript/src/components/window.js
+++ b/otoroshi/javascript/src/components/window.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
@@ -7,243 +7,214 @@ import { WizardFrame } from './wizardframe';
 const KEY_NAME_ESC = 'Escape';
 const KEY_EVENT_TYPE = 'keyup';
 
-const handleEscKey = (event, onClose) => {
-  if (event.key === KEY_NAME_ESC) {
-    onClose();
-  }
-};
+function EscapeModalListener({ close, children }) {
 
-const handleClickOutside = (event, ref, onClose) => {
-  if (ref.current && !ref.current.contains(event.target)) {
-    onClose();
-  }
-};
+  const ref = useRef()
 
-class Alert extends Component {
-  constructor(props) {
-    super(props);
-    this.modalRef = React.createRef();     
-  }
+  const handleEscKey = (event, onClose) => {
+    if (event.key === KEY_NAME_ESC) {
+      onClose();
+    }
+  };
+
+  const handleClickOutside = (event, ref, onClose) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, close), false);
+    document.addEventListener('mousedown', (event) => handleClickOutside(event, ref, close));
+
+    return () => {
+      document.removeEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, close), false);
+      document.removeEventListener('mousedown', (event) => handleClickOutside(event, ref, close));
+    }
+  }, [])
+
+  return React.cloneElement(children, { ref })
+}
 
+class Alert extends Component {
   componentDidMount() {
-    document.addEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.close), false);
-    document.addEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.close));
     this.okRef.focus();
   }
 
-  componentWillUnmount() {
-    document.removeEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.close), false);
-    document.removeEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.close));
-  }
-
   render() {
     const res = isFunction(this.props.message)
-      ? this.props.message(this.props.close)  
+      ? this.props.message(this.props.close)
       : this.props.message;
     return (
       <div className="modal" tabIndex="-1" role="dialog" style={{ display: 'block' }}>
-        <div className="modal-dialog" role="document" style={this.props.modalStyleOverride || {}} ref={this.modalRef}>
-          <div className="modal-content" style={this.props.contentStyleOverride || {}}>
-            <div className="modal-header">
-              <h4 className="modal-title">{this.props.title ? this.props.title : 'Alert'}</h4>
-              <button
-                type="button"
-                className="btn-close"
-                data-dismiss="modal"
-                onClick={this.props.close}
-                aria-label="Close"
-              ></button>
-            </div>
-            <div className="modal-body">
-              {isString(res) && <p>{res}</p>}
-              {!isString(res) && !isFunction(res) && res}
-              {!isString(res) && isFunction(res) && res(this.props.close)}
-            </div>
-            <div className="modal-footer">
-              {this.props.linkOpt && (
-                <a
+        <EscapeModalListener close={this.props.close}>
+          <div className="modal-dialog" role="document" style={this.props.modalStyleOverride || {}} ref={this.props.ref}>
+            <div className="modal-content" style={this.props.contentStyleOverride || {}}>
+              <div className="modal-header">
+                <h4 className="modal-title">{this.props.title ? this.props.title : 'Alert'}</h4>
+                <button
+                  type="button"
+                  className="btn-close"
                   data-dismiss="modal"
-                  href={this.props.linkOpt.to}
-                  className="btn btn-default"
+                  onClick={this.props.close}
+                  aria-label="Close"
+                ></button>
+              </div>
+              <div className="modal-body">
+                {isString(res) && <p>{res}</p>}
+                {!isString(res) && !isFunction(res) && res}
+                {!isString(res) && isFunction(res) && res(this.props.close)}
+              </div>
+              <div className="modal-footer">
+                {this.props.linkOpt && (
+                  <a
+                    data-dismiss="modal"
+                    href={this.props.linkOpt.to}
+                    className="btn btn-default"
+                    onClick={this.props.close}
+                  >
+                    {this.props.linkOpt.title}
+                  </a>
+                )}
+                <button
+                  ref={(r) => (this.okRef = r)}
+                  type="button"
+                  className="btn btn-primary"
                   onClick={this.props.close}
                 >
-                  {this.props.linkOpt.title}
-                </a>
-              )}
-              <button
-                ref={(r) => (this.okRef = r)}
-                type="button"
-                className="btn btn-primary"
-                onClick={this.props.close}
-              >
-                Close
-              </button>
+                  Close
+                </button>
+              </div>
             </div>
           </div>
-        </div>
+        </EscapeModalListener>
       </div>
     );
   }
 }
 
 class Confirm extends Component {
-  constructor(props) {
-    super(props);
-    this.modalRef = React.createRef();     
-  }
-
   componentDidMount() {
-      document.addEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.cancel), false);
-      document.addEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.cancel));
-      document.body.addEventListener('keydown', this.defaultButton);
-      this.okRef.focus();
+    document.body.addEventListener('keydown', this.defaultButton);
+    this.okRef.focus();
   }
 
-  componentWillUnmount() {
-    document.removeEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.close), false);
-    document.removeEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.cancel));
-
-  }
-  
   render() {
     return (
       <div className="modal" tabIndex="-1" role="dialog" style={{ display: 'block' }}>
-        <div className="modal-dialog" role="document" ref={this.modalRef}>
-          <div className="modal-content">
-            <div className="modal-header">
-              <h4 className="modal-title">{this.props.title ? this.props.title : 'Confirm'}</h4>
-              <button
-                type="button"
-                className="btn-close"
-                data-dismiss="modal"
-                onClick={this.props.cancel}
-                aria-label="Close"
-              ></button>
-            </div>
-            <div className="modal-body">
-              <p>{this.props.message}</p>
-            </div>
-            <div className="modal-footer">
-              <button
-                ref={(r) => (this.cancelRef = r)}
-                type="button"
-                className="btn btn-danger"
-                onClick={this.props.cancel}
-              >
-                {this.props.noText || 'Cancel'}
-              </button>
-              <button
-                ref={(r) => (this.okRef = r)}
-                type="button"
-                className="btn btn-success"
-                onClick={this.props.ok}
-              >
-                {this.props.yesText || 'Ok'}
-              </button>
+        <EscapeModalListener close={this.props.cancel}>
+          <div className="modal-dialog" role="document" ref={this.props.ref}>
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">{this.props.title ? this.props.title : 'Confirm'}</h4>
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-dismiss="modal"
+                  onClick={this.props.cancel}
+                  aria-label="Close"
+                ></button>
+              </div>
+              <div className="modal-body">
+                <p>{this.props.message}</p>
+              </div>
+              <div className="modal-footer">
+                <button
+                  ref={(r) => (this.cancelRef = r)}
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={this.props.cancel}
+                >
+                  {this.props.noText || 'Cancel'}
+                </button>
+                <button
+                  ref={(r) => (this.okRef = r)}
+                  type="button"
+                  className="btn btn-success"
+                  onClick={this.props.ok}
+                >
+                  {this.props.yesText || 'Ok'}
+                </button>
+              </div>
             </div>
           </div>
-        </div>
+        </EscapeModalListener>
       </div>
     );
   }
 }
 
 class Prompt extends Component {
-  constructor(props) {
-    super(props);
-    this.modalRef = React.createRef();
-  }
-  
   state = {
     text: this.props.value || '',
   };
 
   componentDidMount() {
-    document.addEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.cancel), false);
-    document.addEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.cancel));
     this.okRef.focus();
     if (this.ref) {
       this.ref.focus();
     }
   }
-  
-  componentWillUnmount() {
-    document.removeEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.close), false);
-    document.removeEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.cancel));
-  }
-  
+
   render() {
     return (
       <div className="modal" tabIndex="-1" role="dialog" style={{ display: 'block' }}>
-        <div className="modal-dialog" role="document" ref={this.modalRef}>
-          <div className="modal-content">
-            <div className="modal-header">
-              <h4 className="modal-title">{this.props.title ? this.props.title : 'Prompt'}</h4>
-              <button
-                type="button"
-                className="btn-close"
-                data-bs-dismiss="modal"
-                onClick={this.props.cancel}
-                aria-label="Close"
-              ></button>
-            </div>
-            <div className="modal-body">
-              <p>{this.props.message}</p>
-              {!this.props.textarea && (
-                <input
-                  type={this.props.type || 'text'}
-                  className="form-control"
-                  value={this.state.text}
-                  ref={(r) => (this.ref = r)}
-                  onChange={(e) => this.setState({ text: e.target.value })}
-                />
-              )}
-              {this.props.textarea && (
-                <textarea
-                  className="form-control"
-                  value={this.state.text}
-                  ref={(r) => (this.ref = r)}
-                  rows={this.props.rows || 5}
-                  onChange={(e) => this.setState({ text: e.target.value })}
-                />
-              )}
-            </div>
-            <div className="modal-footer">
-              <button type="button" className="btn btn-danger" onClick={this.props.cancel}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-success"
-                ref={(r) => (this.okRef = r)}
-                onClick={(e) => this.props.ok(this.state.text)}
-              >
-                Ok
-              </button>
+        <EscapeModalListener close={this.props.cancel}>
+          <div className="modal-dialog" role="document" ref={this.props.ref}>
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">{this.props.title ? this.props.title : 'Prompt'}</h4>
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-bs-dismiss="modal"
+                  onClick={this.props.cancel}
+                  aria-label="Close"
+                ></button>
+              </div>
+              <div className="modal-body">
+                <p>{this.props.message}</p>
+                {!this.props.textarea && (
+                  <input
+                    type={this.props.type || 'text'}
+                    className="form-control"
+                    value={this.state.text}
+                    ref={(r) => (this.ref = r)}
+                    onChange={(e) => this.setState({ text: e.target.value })}
+                  />
+                )}
+                {this.props.textarea && (
+                  <textarea
+                    className="form-control"
+                    value={this.state.text}
+                    ref={(r) => (this.ref = r)}
+                    rows={this.props.rows || 5}
+                    onChange={(e) => this.setState({ text: e.target.value })}
+                  />
+                )}
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-danger" onClick={this.props.cancel}>
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-success"
+                  ref={(r) => (this.okRef = r)}
+                  onClick={(e) => this.props.ok(this.state.text)}
+                >
+                  Ok
+                </button>
+              </div>
             </div>
           </div>
-        </div>
+        </EscapeModalListener>
       </div>
     );
   }
 }
 
 class Popup extends Component {
-  constructor(props) {
-    super(props);
-    this.modalRef = React.createRef();
-  }
-
-  componentDidMount() {
-    document.addEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.cancel), false);
-    document.addEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.cancel));
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener(KEY_EVENT_TYPE, (event) => handleEscKey(event, this.props.close), false);
-    document.removeEventListener('mousedown', (event) => handleClickOutside(event, this.modalRef, this.props.cancel));
-  }
-
   render() {
     return (
       <div
@@ -252,27 +223,29 @@ class Popup extends Component {
         role="dialog"
         style={{ display: 'block', ...this.props.style }}
       >
-        <div
-          className={
-            'modal-dialog' + (this.props.additionalClass ? ' ' + this.props.additionalClass : '')
-          }
-          role="document"
-          ref={this.modalRef}
-        >
-          <div className="modal-content">
-            <div className="modal-header">
-              <h4 className="modal-title">{this.props.title}</h4>
-              <button
-                type="button"
-                className="btn-close"
-                data-dismiss="modal"
-                onClick={this.props.cancel}
-                aria-label="Close"
-              ></button>
+        <EscapeModalListener close={this.props.cancel}>
+          <div
+            className={
+              'modal-dialog' + (this.props.additionalClass ? ' ' + this.props.additionalClass : '')
+            }
+            role="document"
+            ref={this.props.ref}
+          >
+            <div className="modal-content">
+              <div className="modal-header">
+                <h4 className="modal-title">{this.props.title}</h4>
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-dismiss="modal"
+                  onClick={this.props.cancel}
+                  aria-label="Close"
+                ></button>
+              </div>
+              {this.props.body(this.props.ok, this.props.cancel)}
             </div>
-            {this.props.body(this.props.ok, this.props.cancel)}
           </div>
-        </div>
+        </EscapeModalListener>
       </div>
     );
   }
diff --git a/otoroshi/javascript/src/pages/DangerZonePage.js b/otoroshi/javascript/src/pages/DangerZonePage.js
index 5fa6b70e9..7bf38fd31 100644
--- a/otoroshi/javascript/src/pages/DangerZonePage.js
+++ b/otoroshi/javascript/src/pages/DangerZonePage.js
@@ -332,7 +332,7 @@ function WasmoTester(props) {
                   ...props.rawValue.wasmoSettings,
                 }),
               })
-                .catch((_) => {})
+                .catch((_) => { })
                 .then((r) => {
                   console.log(r.status);
                   if (r.status !== 200) {
@@ -347,7 +347,7 @@ function WasmoTester(props) {
                         height={window.innerHeight - 320}
                         label=""
                         help="..."
-                        onChange={() => {}}
+                        onChange={() => { }}
                         value={value}
                       />
                       <p className="text-center" style={{ fontWeight: 'bold' }}>
@@ -1907,11 +1907,10 @@ const GlobalPluginInformation = ({ plugin, open }) => {
     'https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html';
 
   const getNgPluginDocumentationUrl = () => {
-    return `https://maif.github.io/otoroshi/manual/next/built-in-plugins.html#${
-      plugin.id.replace('cp:', '')
+    return `https://maif.github.io/otoroshi/manual/next/built-in-plugins.html#${plugin.id.replace('cp:', '')
       // .replace(/\./g, '-')
       // .toLowerCase()
-    }`;
+      }`;
   };
 
   return (
diff --git a/otoroshi/javascript/src/pages/DraftsPage.js b/otoroshi/javascript/src/pages/DraftsPage.js
new file mode 100644
index 000000000..95cf21568
--- /dev/null
+++ b/otoroshi/javascript/src/pages/DraftsPage.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { nextClient } from '../services/BackOfficeServices';
+import { Table } from '../components/inputs';
+
+export class DraftsPage extends Component {
+  columns = [
+    { title: 'Name', filterId: 'name', content: (item) => item.name },
+    { title: 'Description', filterId: 'description', content: (item) => item.description },
+    { title: 'Kind', filterId: 'id', content: (item) => item['id'].split('_')[0] }
+  ];
+
+  componentDidMount() {
+    this.props.setTitle(`Drafts`);
+  }
+
+  render() {
+    return (
+      <div>
+        <Table
+          parentProps={this.props}
+          selfUrl="drafts"
+          defaultTitle="Drafts"
+          defaultValue={() => ({})}
+          itemName="draft"
+          columns={this.columns}
+          fetchItems={(paginationState) => nextClient.forEntityNext(nextClient.ENTITIES.DRAFTS)
+            .findAllWithPagination({
+              ...paginationState,
+              fields: ['name', 'description', 'id']
+            })
+          }
+          showActions={false}
+          showLink={false}
+          extractKey={(item) => item.id}
+          injectTopBar={() => {
+            return <button
+              type="button"
+              className="btn btn-danger btn-sm ms-2"
+              onClick={() => {
+
+              }}
+            >
+              <i className="fas fa-fire" /> Delete all drafts
+            </button>
+          }}
+        />
+      </div>
+    );
+  }
+}