Help appeared in md

Author: Rahuljagwani

package-lock.json

@@ -28,6 +28,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-keyed-file-browser": "^1.14.0",
+    "react-markdown": "^8.0.7",
     "react-modal": "^3.13.1",
     "react-scripts": "4.0.3",
     "react-simple-code-editor": "^0.13.0",

package.json

@@ -14,6 +14,7 @@ import FileDragDrop from './component/File-drag-drop';
 import HistoryModal from './component/modals/History';
 import LocalFileBrowser from './component/fileBrowser';
 import FileEditModal from './component/modals/FileEdit';
+import MarkDown from './component/modals/markDown';
 
 const app = () => {
     const [superState, dispatcher] = useReducer(reducer, initialState);
@@ -39,6 +40,7 @@ const app = () => {
                 superState={superState}
                 dispatcher={dispatcher}
             />
+            <MarkDown superState={superState} dispatcher={dispatcher} />
             <FileDragDrop dispatcher={dispatcher} />
             <Header superState={superState} dispatcher={dispatcher} />
             <section className="body" style={{ display: 'flex', overflow: 'hidden' }}>

src/App.jsx

@@ -3,14 +3,14 @@ import React, { useState, useEffect } from 'react';
 import './graph-comp-details.css';
 import ParentModal from './ParentModal';
 import { readTextFile, createFile } from '../../toolbarActions/toolbarFunctions';
+import { actionType as T } from '../../reducer';
 
 const ModalComp = ({ closeModal, superState, dispatcher }) => {
     const [data, setData] = useState({});
     const [errorMessage, setErrorMessage] = useState('');
     const [element, setElement] = useState(null);
     const [editSourceClicked, setEditSourceClicked] = useState(false);
     const [createSourceClicked, setCreateSourceClicked] = useState(false);
-    const [helpClicked, setHelpClicked] = useState(false);
     const [createHelpClicked, setCreateHelpClicked] = useState(false);
     const { modalPayload, ModelOpen } = superState;
     const {
@@ -47,20 +47,14 @@ const ModalComp = ({ closeModal, superState, dispatcher }) => {
         }
         setEditSourceClicked(false);
         setCreateSourceClicked(false);
-    }, [createSourceClicked, editSourceClicked, element]);
+    }, [createSourceClicked, editSourceClicked]);
 
     useEffect(() => {
         if (createHelpClicked) {
             createFile(superState, dispatcher);
         }
-        if (helpClicked && element === null) {
-            toast.error('Respective doc is not present in same directory');
-        } else if (element !== null) {
-            readTextFile(superState, dispatcher, element.fileObj, element.fileHandle);
-        }
-        setHelpClicked(false);
         setCreateHelpClicked(false);
-    }, [createHelpClicked, helpClicked, element]);
+    }, [createHelpClicked]);
 
     const openFile = () => {
         setElement(null);
@@ -90,10 +84,27 @@ const ModalComp = ({ closeModal, superState, dispatcher }) => {
                 }
             });
         }
-        if (submitText === 'Edit Node') {
-            setHelpClicked(true);
-        } else if (submitText === 'Create Node') {
-            setCreateHelpClicked(true);
+        setCreateHelpClicked(true);
+    };
+
+    const openMarkDownDoc = async () => {
+        dispatcher({ type: T.SET_MARKDOWN_MODAL, payload: true });
+        setElement(null);
+        if (superState.fileState !== undefined && data.label !== '') {
+            const docname1 = data.label.split(':')[1].split('.')[0].concat('.md');
+            const matchingElement = superState.fileState.find((ele) => ele.key.split('/')[1] === docname1);
+            if (matchingElement) {
+                const fr = new FileReader();
+                fr.onload = (x) => {
+                    dispatcher({ type: T.SET_INPUT_FILE, payload: x.target.result });
+                };
+                if (matchingElement.fileHandle) {
+                    fr.readAsText(await matchingElement.fileHandle.getFile());
+                } else if (matchingElement.fileObj) {
+                    fr.readAsText(matchingElement.fileObj);
+                }
+                setElement(matchingElement);
+            }
         }
     };
 
@@ -115,13 +126,24 @@ const ModalComp = ({ closeModal, superState, dispatcher }) => {
                             >
                                 { submitText === 'Edit Node' ? 'Edit Source' : 'Create Source' }
                             </button>
-                            <button
-                                className="btn btn-primary"
-                                type="button"
-                                onClick={openDoc}
-                            >
-                                { submitText === 'Edit Node' ? 'Help' : 'Create Help' }
-                            </button>
+                            { title === 'Edit Node'
+                                ? (
+                                    <button
+                                        className="btn btn-primary"
+                                        type="button"
+                                        onClick={openMarkDownDoc}
+                                    >
+                                        Help
+                                    </button>
+                                ) : (
+                                    <button
+                                        className="btn btn-primary"
+                                        type="button"
+                                        onClick={openDoc}
+                                    >
+                                        Create Help
+                                    </button>
+                                )}
                         </>
                     ) : '' }
                 </div>

src/component/modals/GraphCompDetails.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import ParentModal from './ParentModal';
+import { actionType as T } from '../../reducer';
+
+const MarkDown = ({ superState, dispatcher }) => {
+    const title = 'Demo';
+    const close = () => {
+        dispatcher({ type: T.SET_MARKDOWN_MODAL, payload: false });
+    };
+    return (
+        <ParentModal closeModal={close} ModelOpen={superState.markDownModal} title={title}>
+            <ReactMarkdown>{superState.inputFile}</ReactMarkdown>
+        </ParentModal>
+    );
+};
+
+export default MarkDown;

src/component/modals/markDown.jsx

@@ -23,6 +23,7 @@ const actionType = {
     NEW_GRAPH: 'NEW_GRAPH',
     SET_SHARE_MODAL: 'SET_SHARE_MODAL',
     SET_SETTING_MODAL: 'SET_SETTING_MODAL',
+    SET_MARKDOWN_MODAL: 'SET_MARKDOWN_MODAL',
     SET_FILE_REF: 'SET_FILE_REF',
     SET_HISTORY_MODAL: 'SET_HISTORY_MODAL',
     SET_AUTHOR: 'SET_AUTHOR',
@@ -35,6 +36,7 @@ const actionType = {
     SET_FILE_HANDLE: 'SET_FILE_HANDLE',
     SET_DIR_NAME: 'SET_DIR_NAME',
     SET_FILE_STATE: 'SET_FILE_STATE',
+    SET_INPUT_FILE: 'SET_INPUT_FILE',
 };
 
 export default zealit(actionType);

src/reducer/actionType.js

@@ -13,7 +13,7 @@ const initialState = {
     settingsModal: false,
     editDetailsModal: false,
     newGraphModal: false,
-
+    markDownModal: false,
     eleSelected: false,
     drawModeOn: true,
     undoEnabled: false,
@@ -27,6 +27,7 @@ const initialState = {
     uploadedDirName: null,
     resetEnabled: false,
     fileState: [],
+    inputFile: '',
 };
 
 const initialGraphState = {

src/reducer/initialState.js

@@ -142,6 +142,14 @@ const reducer = (state, action) => {
         return { ...state, settingsModal: action.payload };
     }
 
+    case T.SET_MARKDOWN_MODAL: {
+        return { ...state, markDownModal: action.payload };
+    }
+
+    case T.SET_INPUT_FILE: {
+        return { ...state, inputFile: action.payload };
+    }
+
     case T.SET_FILE_REF: {
         return { ...state, fileRef: action.payload };
     }