refactor TemplateModal

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -111,12 +111,12 @@ class CodeMirrorEditor extends AbstractEditor {
       emojiSearchText: '',
       startPosWithEmojiPickerModeTurnedOn: null,
       isEmojiPickerMode: false,
+      isTemplateModalOpened: false,
     };
 
     this.cm = React.createRef();
     this.gridEditModal = React.createRef();
     this.linkEditModal = React.createRef();
-    this.templateModal = React.createRef();
     this.handsontableModal = React.createRef();
     this.drawioModal = React.createRef();
 
@@ -875,7 +875,7 @@ class CodeMirrorEditor extends AbstractEditor {
   }
 
   showTemplateModal() {
-    this.templateModal.current.show();
+    this.setState({ isTemplateModalOpened: true });
   }
 
   // fold draw.io section (::: drawio ~ :::)
@@ -1144,8 +1144,9 @@ class CodeMirrorEditor extends AbstractEditor {
           onSave={(linkText) => { return markdownLinkUtil.replaceFocusedMarkdownLinkWithEditor(this.getCodeMirror(), linkText) }}
         />
         <TemplateModal
-          ref={this.templateModal}
-          onSave={(templateText) => { return markdownLinkUtil.replaceFocusedMarkdownLinkWithEditor(this.getCodeMirror(), templateText) }}
+          isOpen={this.state.isTemplateModalOpened}
+          onClose={() => this.setState({ isTemplateModalOpened: false })}
+          onSave={(templateText) => { }}
         />
         {/* <HandsontableModal
           ref={this.handsontableModal}

packages/app/src/components/TemplateModal.tsx

@@ -9,54 +9,78 @@ import {
 } from 'reactstrap';
 
 
-const presetA = {
-  name: 'presetA',
-  value: '## Preset',
-};
-
-const presetB = {
-  name: 'presetB',
-  value: '### Preset',
-};
+type ITemplate = {
+  name: string,
+  markdown: string,
+}
 
-const presetC = {
-  name: 'presetC',
-  value: '#### Preset',
+const templates: ITemplate[] = [
+  {
+    name: 'presetA',
+    markdown: '## Preset',
+  },
+  {
+    name: 'presetB',
+    markdown: '### Preset',
+  },
+  {
+    name: 'presetC',
+    markdown: '#### Preset',
+  },
+];
+
+
+const TemplateRadioButton = ({ template }: { template: ITemplate }): JSX.Element => {
+  return (
+    <div key={template.name} className="custom-control custom-radio">
+      <input
+        type="radio"
+        className="custom-control-input"
+        id="string"
+        defaultValue={template.markdown}
+        // checked={this.state.linkerType === template.value}
+        // onChange={this.handleSelecteLinkerType(template.value)}
+      />
+      <label className="custom-control-label" htmlFor="string">
+        {template.name}
+      </label>
+    </div>
+  );
 };
 
-const templates = [presetA, presetB, presetC];
-
 
 type Props = {
-  onSave: (markdown: string) => void,
+  isOpen: boolean,
+  onClose: () => void,
+  onSave?: (markdown: string) => void,
 }
 
 export const TemplateModal = (props: Props): JSX.Element => {
   const { t } = useTranslation();
 
-  const { onSave } = props;
-
-  const [isOpen, setOpen] = useState(false);
+  const { isOpen, onClose, onSave } = props;
 
   const submitHandler = useCallback(() => {
     if (onSave == null) {
+      onClose();
       return;
     }
 
     const markdown = '(select one)';
     onSave(markdown);
-  }, [onSave]);
+    onClose();
+  }, [onClose, onSave]);
 
   return (
-    <Modal className="link-edit-modal" isOpen={isOpen} toggle={() => setOpen(false)} size="lg" autoFocus={false}>
-      <ModalHeader tag="h4" toggle={() => setOpen(false)} className="bg-primary text-light">
+    <Modal className="link-edit-modal" isOpen={isOpen} toggle={onClose} size="lg" autoFocus={false}>
+      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light">
         Template
       </ModalHeader>
 
       <ModalBody className="container">
         <div className="row">
           <div className="col-12">
-            { templates.map(template => <TemplateRadioButton template={template} />) }
+            { templates.map(template => <TemplateRadioButton key={template.name} template={template} />) }
           </div>
         </div>
 
@@ -65,7 +89,7 @@ export const TemplateModal = (props: Props): JSX.Element => {
         </div> */}
       </ModalBody>
       <ModalFooter>
-        <button type="button" className="btn btn-sm btn-outline-secondary mx-1" onClick={() => setOpen(false)}>
+        <button type="button" className="btn btn-sm btn-outline-secondary mx-1" onClick={onClose}>
           {t('Cancel')}
         </button>
         <button type="submit" className="btn btn-sm btn-primary mx-1" onClick={submitHandler}>