Stable render of modal children, +AddAnalyzer form stub.

arangodb · KVS85 · Aug 28, 2021 · Jul 29, 2021 · Jul 29, 2021 · Aug 3, 2021
commit 25d8214c8bccd1040f7645f5c7866ad76253ff25
@@ -1,45 +1,52 @@
 import { ReactNode, useEffect, useRef } from "react";
 import { createPortal, render, unmountComponentAtNode } from "react-dom";
 import picoModal from 'picomodal';
-import { noop, uniqueId } from 'underscore';
+import { uniqueId } from 'underscore';
 
 interface ModalProps {
   show: boolean;
   children?: ReactNode;
-  toggle: () => void;
+  setShow: (show: boolean) => void;
 }
 
-const Modal = ({ show, toggle, children }: ModalProps) => {
-  const contentDivId = useRef(uniqueId('modal-container-'));
-  const modal = useRef({ destroy: noop });
+const Modal = ({ show, setShow, children }: ModalProps) => {
+  const contentDivId = useRef(uniqueId('modal-content-'));
+  const modal = useRef(picoModal({
+    content: `<div id='${contentDivId.current}'></div>`,
+    closeButton: false
+  })
+    .afterCreate(() => {
+      render(createPortal(children, document.getElementById(contentDivId.current) as HTMLElement, contentDivId.current),
+        document.getElementById(contentDivId.current) as HTMLElement);
+    }));
 
   useEffect(() => {
-    if (show) {
-      modal.current = picoModal({
-        content: `<div id=&
8000
#39;${contentDivId.current}'></div>`,
-        closeButton: false
-      })
-        .afterCreate(() => {
-          render(createPortal(children, document.getElementById(contentDivId.current) as HTMLElement),
-            document.getElementById(contentDivId.current) as HTMLElement);
-        })
-        .afterClose(() => {
-          unmountComponentAtNode(document.getElementById(contentDivId.current) as HTMLElement);
-          modal.current.destroy();
-          toggle();
-        })
-        .show();
+    if (modal.current.isVisible()) {
+      render(createPortal(children, document.getElementById(contentDivId.current) as HTMLElement, contentDivId.current),
+        document.getElementById(contentDivId.current) as HTMLElement);
     }
+  }, [children]);
 
+  useEffect(() => {
     return () => {
       try {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         unmountComponentAtNode(document.getElementById(contentDivId.current) as HTMLElement);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         modal.current.destroy();
       } catch (e) {
       }
     };
-  }, [children, show, toggle]);
+  }, []);
+
+  useEffect(() => {
+    if (show) {
+      modal.current.show();
+    } else {
+      modal.current.close();
+      setShow(false);
+    }
+  }, [setShow, show]);
 
   return null;
 };

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+
+export const getChangeHandler = (setter: (value: string) => void) => {
+  return (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    setter(event.currentTarget.value);
+  };
+};
+
+export const hasOwnProperty = <X extends {}, Y extends PropertyKey> (obj: X, prop: Y): obj is X & Record<Y, unknown> => {
+  return obj.hasOwnProperty(prop);
+};
@@ -6,8 +6,6 @@ import { mutate } from "swr";
 declare var frontendConfig: { [key: string]: any };
 declare var arangoHelper: { [key: string]: any };
 
-const route = getApiRouteForCurrentDB();
-
 interface Analyzer {
   name: string;
 }
@@ -17,21 +15,17 @@ interface ButtonProps {
 }
 
 const DeleteButton = ({ analyzer }: ButtonProps) => {
-  const [showDelete, setShowDelete] = useState(false);
+  const [show, setShow] = useState(false);
   const [forceDelete, setForceDelete] = useState(false);
 
-  const toggleShow = () => {
-    setShowDelete(!showDelete);
-  };
-
   const toggleForce = () => {
     setForceDelete(!forceDelete);
   };
 
   const handleDelete = async () => {
-    toggleShow();
+    setShow(false);
 
-    const result = await route.delete(`/analyzer/${analyzer.name}`, { force: forceDelete });
+    const result = await getApiRouteForCurrentDB().delete(`/analyzer/${analyzer.name}`, { force: forceDelete });
     if (result.body.error) {
       arangoHelper.arangoError('Failure', `Got unexpected server response: ${result.body.errorMessage}`);
     } else {
@@ -40,10 +34,11 @@ const DeleteButton = ({ analyzer }: ButtonProps) => {
   };
 
   return <>
-    <button className={'pure-button'} onClick={() => setShowDelete(true)}>
+    <button className={'pure-button'} onClick={() => setShow(true)}
+            style={{ background: 'transparent' }}>
       <i className={'fa fa-trash-o'}/>
     </button>
-    <Modal show={showDelete} toggle={toggleShow}>
+    <Modal show={show} setShow={setShow}>
       <ModalHeader title={`Delete Analyzer ${analyzer.name}?`}/>
       <ModalBody>
         <p>
@@ -60,8 +55,8 @@ const DeleteButton = ({ analyzer }: ButtonProps) => {
         </label>
       </ModalBody>
       <ModalFooter>
-        <button className="button-close" onClick={toggleShow}>Close</button>
-        <button id="confirmDeleteBtn" className="button-danger" style={{ float: 'right' }}
+        <button className="button-close" onClick={() => setShow(false)}>Close</button>
+        <button className="button-danger" style={{ float: 'right' }}
                 onClick={handleDelete}>Delete
         </button>
       </ModalFooter>
@@ -70,24 +65,20 @@ const DeleteButton = ({ analyzer }: ButtonProps) => {
 };
 
 const ViewButton = ({ analyzer }: ButtonProps) => {
-  const [showView, setShowView] = useState(false);
-
-  const toggle = () => {
-    setShowView(!showView);
-  };
+  const [show, setShow] = useState(false);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     event.preventDefault();
 
     // console.log(analyzer);
-    setShowView(true);
+    setShow(true);
   };
 
   return <>
-    <button className={'pure-button'} onClick={handleClick}>
+    <button className={'pure-button'} onClick={handleClick} style={{ background: 'transparent' }}>
       <i className={'fa fa-eye'}/>
     </button>
-    <Modal show={showView} toggle={toggle}>
+    <Modal show={show} setShow={setShow}>
       <span>Are you sure?! {analyzer.name}</span>
     </Modal>
   </>;

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import Modal, { ModalBody, ModalFooter, ModalHeader } from "../../components/modal/Modal";
+import { typeNameMap } from "./constants";
+import { map, omit } from 'underscore';
+import { getChangeHandler } from "../../utils/helpers";
+
+const restrictedTypeNameMap = omit(typeNameMap, 'identity');
+
+const AddAnalyzer = () => {
+  const [show, setShow] = useState(false);
+  const [analyzerName, setAnalyzerName] = useState('');
+  const [analyzerType, setAnalyzerType] = useState('delimiter');
+
+  const handleAdd = () => {
+    setShow(false);
+  };
+
+  return <>
+    <button className={'pure-button'} onClick={() => setShow(true)} style={{
+      background: 'transparent',
+      color: 'white',
+      paddingLeft: 0,
+      paddingTop: 0
+    }}>
+      <i className="fa fa-plus-circle"/> Add Analyzer
+    </button>
+    <Modal show={show} setShow={setShow}>
+      <ModalHeader title={'Create Analyzer'}/>
+      <ModalBody>
+        <div className={'pure-g'} style={{ minWidth: '50vw' }}>
+          <div className={'pure-u-2-5 pure-u-md-2-5 pure-u-lg-2-5 pure-u-xl-2-5'}>
+            <label htmlFor={'analyzer-name'}>Analyzer Name:</label>
+            <input id="analyzer-name" type="text" placeholder="Analyzer Name" style={{ width: 'auto' }}
+                   value={analyzerName} onChange={getChangeHandler(setAnalyzerName)} key={'analyzer-name'}/>
+          </div>
+
+          {/* Spacer Div*/}
+          <div className={'pure-u-1-5 pure-u-md-1-5 pure-u-lg-1-5 pure-u-xl-1-5'}/>
+
+          <div className={'pure-u-2-5 pure-u-md-2-5 pure-u-lg-2-5 pure-u-xl-2-5'}>
+            <label htmlFor={'analyzer-type'}>Analyzer Type:</label>
+            <select id="analyzer-type" style={{ width: 'auto' }} value={analyzerType} key={'analyzer-type'}
+                    onChange={getChangeHandler(setAnalyzerType)}>
+              {
+                map(restrictedTypeNameMap, (value, key) => <option key={key} value={key}>{value}</option>)
+              }
+            </select>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <button className="button-close" onClick={() => setShow(false)}>Close</button>
+        <button className="button-success" style={{ float: 'right' }} onClick={handleAdd}>Create</button>
+      </ModalFooter>
+    </Modal>
+  </>;
+};
+
+export default AddAnalyzer;
@@ -5,27 +5,23 @@ import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { compact, get, isEqual } from 'underscore';
 import { getApiRouteForCurrentDB } from '../../utils/arangoClient';
+import { getChangeHandler } from '../../utils/helpers';
 import Actions from './Actions';
+import AddAnalyzer from './AddAnalyzer';
+import { typeNameMap } from './constants';
 
-const typeMap = {
-  text: 'Text',
-  identity: 'Identity',
-  'stem': 'Stem'
-};
-
-const route = getApiRouteForCurrentDB();
 
 const AnalyzersReactView = () => {
   const {
     data,
     error
-  } = useSWR('/analyzer', (path) => route.get(path));
+  } = useSWR('/analyzer', (path) => getApiRouteForCurrentDB().get(path));
 
   const {
     data: permData,
     error: permError
   } = useSWR(`/user/${arangoHelper.getCurrentJwtUsername()}/database/${frontendConfig.db}`,
-    (path) => route.get(path));
+    (path) => getApiRouteForCurrentDB().get(path));
 
   const [filterExpr, setFilterExpr] = useState('');
   const [filteredAnalyzers, setFilteredAnalyzers] = useState([]);
@@ -67,10 +63,6 @@ const AnalyzersReactView = () => {
     processAndSetFilteredAnalyzers(tempFilteredAnalyzers);
   }, [analyzers, filterExpr]);
 
-  function handleChange (event) {
-    setFilterExpr(event.target.value);
-  }
-
   const errMsgs = compact([
     get(error, 'message'),
     get(permError, 'message'),
@@ -92,6 +84,13 @@ const AnalyzersReactView = () => {
 
     return <div className={'innerContent'} id={'analyzersContent'} style={{ paddingTop: 0 }}>
       <div className={'pure-g'}>
+        <div className={'pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1 pure-u-xl-1-1'}>
+          <div className={'sectionHeader pure-g'}>
+            <div className={'pure-u-2-5'}>
+              <div className={'title'}><AddAnalyzer/></div>
+            </div>
+          </div>
+        </div>
         <div className={'pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1 pure-u-xl-1-1'}>
           <div className={'sectionHeader pure-g'}>
             <div className={'pure-u-2-5'}>
@@ -105,10 +104,10 @@ const AnalyzersReactView = () => {
                 float: 'right'
               }}>
                 Filter: <input type={'text'} id={'filterInput'} className={'search-input'}
-                               value={filterExpr} onChange={handleChange}
+                               value={filterExpr} onChange={getChangeHandler(setFilterExpr)}
                                placeholder={'<glob> | (<db|name|type>:<glob> )+'}
                                style={{
-                                 marginRight: 0,
+                                 margin: 0,
                                  width: 300,
                                  paddingLeft: 25
                                }}/>
@@ -137,7 +136,7 @@ const AnalyzersReactView = () => {
                 <tr key={idx}>
                   <td className={'arango-table-td table-cell0'}>{analyzer.db}</td>
                   <td className={'arango-table-td table-cell1'}>{analyzer.name}</td>
-                  <td className={'arango-table-td table-cell2'}>{typeMap[analyzer.type]}</td>
+                  <td className={'arango-table-td table-cell2'}>{typeNameMap[analyzer.type]}</td>
                   <td className={'arango-table-td table-cell3'}>
                     <Actions analyzer={analyzer} permission={permission}/>
                   </td>
@@ -147,6 +146,7 @@ const AnalyzersReactView = () => {
             </tbody>
           </table>
         </div>
+
       </div>
     </div>;
   }

@@ -0,0 +1,8 @@
+export const typeNameMap = {
+  identity: 'Identity',
+  delimiter: 'Delimiter',
+  stem: 'Stem',
+  norm: 'Norm',
+  ngram: 'N-Gram',
+  text: 'Text'
+};