Merge pull request #176 from ControlCore-Project/main

Attempt ot merge main to dev
ControlCore-Project · Aug 2, 2023 · a57e054 · a57e054
2 parents 23d3c1b + 5e6f511
commit a57e054
Show file tree

Hide file tree

Showing 21 changed files with 2,267 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,9 +28,11 @@
     "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",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^8.0.0",
     "react-tooltip": "^4.2.21",
     "web-vitals": "^0.2.4",

diff --git a/src/App.jsx b/src/App.jsx
@@ -14,6 +14,9 @@ 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';
+import OptionsModal from './component/modals/OptionsModal';
+import Logs from './component/Logs';
 import ContributeDetails from './component/modals/ContributeDetails';
 
 const app = () => {
@@ -36,10 +39,14 @@ const app = () => {
             <HistoryModal superState={superState} dispatcher={dispatcher} />
             <ContributeDetails superState={superState} dispatcher={dispatcher} />
             <FileEditModal superState={superState} dispatcher={dispatcher} />
+            <OptionsModal superState={superState} dispatcher={dispatcher} />
             <GraphCompDetails
                 closeModal={() => dispatcher({ type: T.Model_Close })}
                 superState={superState}
+                dispatcher={dispatcher}
             />
+            <Logs 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' }}>

diff --git a/src/component/Logs.jsx b/src/component/Logs.jsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import './logs.css';
+import { actionType as T } from '../reducer';
+
+const Logs = ({ superState, dispatcher }) => {
+    const [output, setOutput] = useState('');
+
+    const clearTerminal = () => {
+        setOutput('');
+        dispatcher({ type: T.SET_LOGS_MESSAGE, payload: '' });
+    };
+
+    const closeTerminal = () => {
+        dispatcher({ type: T.SET_LOGS, payload: false });
+    };
+
+    useEffect(() => {
+        if (superState.logs) {
+            document.getElementById('terminal').style.display = 'block';
+            setOutput(superState.logsmessage);
+        } else {
+            document.getElementById('terminal').style.display = 'none';
+            setOutput(superState.logsmessage);
+        }
+    }, [superState.logs]);
+
+    return (
+        <>
+            <div className="terminal" id="terminal">
+                <div className="terminal-header">
+                    Logs
+                    <button type="button" className="clear" onClick={clearTerminal}>Clear</button>
+                    <button type="button" className="closelogs" onClick={closeTerminal}>X</button>
+                </div>
+                <div className="terminal-body">
+                    {output.split('\n').map((line) => (
+                        <div className="terminal-line">
+                            {line}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Logs;
diff --git a/src/component/TabBar.jsx b/src/component/TabBar.jsx
@@ -18,6 +18,7 @@ const TabBar = ({ superState, dispatcher }) => {
         dispatcher({ type: T.REMOVE_GRAPH, payload: i });
         if (!superState.curGraphIndex && superState.graphs.length === 1) {
             dispatcher({ type: T.SET_CUR_INSTANCE, payload: null });
+            dispatcher({ type: T.SET_CUR_INDEX, payload: -1 });
         }
     };
     const editCur = (e) => {

diff --git a/src/component/fileBrowser.jsx b/src/component/fileBrowser.jsx
@@ -30,6 +30,10 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
         window.localStorage.setItem('fileList', JSON.stringify(fileState));
     }, [fileState]);
 
+    useEffect(() => {
+        setFileState(superState.fileState);
+    }, [superState.fileState]);
+
     const handleSelectFile = (data) => {
         const fileExtensions = ['jpeg', 'jpg', 'png', 'exe'];
         if (fileExtensions.includes(data.fileObj.name.split('.').pop())) {
@@ -67,7 +71,7 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
                     modified: fileData.lastModified,
                     size: fileData.size,
                     fileObj: fileData,
-                    fileHandle: value,
+                    fileHandle: valueSubDir,
                 }]);
             } else if (valueSubDir.kind === 'directory') {
                 topLevel = `${topKey}/${value.name}`;
@@ -100,6 +104,7 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
         setFileState([]);
         setFileState(state);
         dispatcher({ type: T.SET_DIR_NAME, payload: state[0].key.split('/')[0] });
+        dispatcher({ type: T.SET_FILE_STATE, payload: state });
     };
 
     const newFeatureFile = async () => {

diff --git a/src/component/logs.css b/src/component/logs.css
@@ -0,0 +1,48 @@
+.terminal {
+    display: none;
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    margin-right: -50%;
+    transform: translateX(-50%);
+    width: 500px;
+    height: 350px;
+    border: 1px solid #ccc;
+    background-color: #000;
+    color: #fff;
+    font-family: monospace;
+    margin: 20px auto;
+    z-index: 10000;
+  }
+
+  .terminal-header {
+    padding: 5px;
+    background-color: #333;
+    text-align: center;
+  }
+
+  .clear {
+    background-color: rgb(187, 184, 184);
+    border-radius: 20px;
+    position: absolute;
+    right: 30px;
+  }
+
+  .closelogs {
+    background-color: rgba(249, 37, 37, 0.575);
+    color: white;
+    position: absolute;
+    right: 1px;
+  }
+
+  .terminal-body {
+    padding: 10px;
+    height: 300px;
+    overflow-y: auto;
+  }
+
+  .terminal-line {
+    padding: 5px 0;
+  }
diff --git a/src/component/modals/FileEdit.jsx b/src/component/modals/FileEdit.jsx
@@ -49,6 +49,16 @@ const FileEditModal = ({ superState, dispatcher }) => {
         const stream = await handle.createWritable();
         await stream.write(codeStuff);
         await stream.close();
+        const fileData = await handle.getFile();
+        let fS = superState.fileState;
+        fS = fS.concat([{
+            key: `${superState.uploadedDirName}/${handle.name}`,
+            modified: fileData.lastModified,
+            size: fileData.size,
+            fileObj: fileData,
+            fileHandle: handle,
+        }]);
+        dispatcher({ type: T.SET_FILE_STATE, payload: fS });
         // dispatcher({ type: T.EDIT_TEXTFILE, payload: { show: false } });
     }
 
@@ -105,7 +115,10 @@ const FileEditModal = ({ superState, dispatcher }) => {
                             <button type="submit" className="btn btn-primary" onClick={submit}>Save</button>
                         )}
                     {dirButton && (
-                        <button type="submit" className="btn btn-primary" onClick={saveAsSubmit}>Save As</button>
+                        <button type="submit" className="btn btn-primary" onClick={saveAsSubmit}>
+                            Save
+                            {fileName ? ' As' : ''}
+                        </button>
                     )}
                     {!dirButton && (
                         <button type="submit" className="btn btn-primary" onClick={saveSubmit}>Save As</button>

diff --git a/src/component/modals/GraphCompDetails.jsx b/src/component/modals/GraphCompDetails.jsx
@@ -1,13 +1,20 @@
+import { toast } from 'react-toastify';
 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 }) => {
+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 [createHelpClicked, setCreateHelpClicked] = useState(false);
     const { modalPayload, ModelOpen } = superState;
     const {
-        cb, title, submitText, Children, defaultStyle, defaultLabel, labelAllowed,
+        cb, title, submitText, Children, defaultStyle, defaultLabel, labelAllowed, type,
     } = modalPayload;
 
     useEffect(() => {
@@ -29,15 +36,137 @@ const ModalComp = ({ closeModal, superState }) => {
         } else setErrorMessage(message.err);
     };
 
+    useEffect(() => {
+        if (createSourceClicked) {
+            createFile(superState, dispatcher);
+        }
+        if (editSourceClicked && element === null) {
+            toast.error('Respective file is not present in same directory');
+        } else if (element !== null) {
+            readTextFile(superState, dispatcher, element.fileObj, element.fileHandle);
+        }
+        setEditSourceClicked(false);
+        setCreateSourceClicked(false);
+    }, [createSourceClicked, editSourceClicked]);
+
+    useEffect(() => {
+        if (createHelpClicked) {
+            createFile(superState, dispatcher);
+        }
+        setCreateHelpClicked(false);
+    }, [createHelpClicked]);
+
+    const openFile = () => {
+        setElement(null);
+        if (superState.fileState !== undefined && data.label !== '') {
+            const fname = data.label.split(':')[1];
+            superState.fileState.forEach((ele) => {
+                if (ele.key.split('/')[1] === fname || ele.key.split('/')[2] === fname) {
+                    setElement(ele);
+                }
+            });
+        }
+        if (submitText === 'Edit Node') {
+            setEditSourceClicked(true);
+        } else if (submitText === 'Create Node') {
+            setCreateSourceClicked(true);
+        }
+    };
+
+    const openDoc = () => {
+        setElement(null);
+        if (superState.fileState !== undefined && data.label !== '') {
+            const docname1 = data.label.split(':')[1].split('.')[0].concat('.md');
+            const docname2 = data.label.split(':')[1].split('.')[0].concat('.txt');
+            superState.fileState.forEach((ele) => {
+                if (ele.key.split('/')[1] === docname1 || ele.key.split('/')[1] === docname2) {
+                    setElement(ele);
+                }
+            });
+        }
+        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) => {
+                    // eslint-disable-next-line max-len
+                    dispatcher({ type: T.SET_INPUT_FILE, payload: { content: x.target.result, fname: matchingElement.key.split('/')[1] } });
+                };
+                if (matchingElement.fileHandle) {
+                    fr.readAsText(await matchingElement.fileHandle.getFile());
+                } else if (matchingElement.fileObj) {
+                    fr.readAsText(matchingElement.fileObj);
+                }
+                setElement(matchingElement);
+            }
+        }
+    };
+
+    const createLibrary = () => {
+        const fileName = data.label.split(':')[1];
+        if (fileName === undefined || fileName === '') {
+            toast.error('Enter File Name');
+            return;
+        }
+        superState.curGraphInstance.library(fileName);
+    };
+
     return (
         <ParentModal closeModal={closeModal} ModelOpen={ModelOpen} title={title}>
             <form onSubmit={submit}>
                 <div className="modal-content-body">
-                    <Children data={data} setData={setData} labelAllowed={labelAllowed} />
+                    <Children data={data} setData={setData} labelAllowed={labelAllowed} state={superState} />
                     {errorMessage ? <div className="err">{errorMessage}</div> : <></>}
                 </div>
                 <div className="modal-footer">
                     <button type="submit" className="btn btn-primary">{submitText}</button>
+                    { type === 'Node' ? (
+                        <>
+                            <button
+                                className="btn btn-primary"
+                                type="button"
+                                onClick={openFile}
+                            >
+                                { submitText === 'Edit Node' ? 'Edit Source' : 'Create Source' }
+                            </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>
+                                )}
+                            { title === 'Edit Node'
+                                ? ''
+                                : (
+                                    <button
+                                        className="btn btn-primary"
+                                        type="button"
+                                        onClick={createLibrary}
+                                    >
+                                        Create Library
+                                    </button>
+                                )}
+                        </>
+                    ) : '' }
                 </div>
             </form>
         </ParentModal>