desc added to ele in datalist

Author: Rahuljagwani

src/component/modals/FileEdit.jsx

@@ -115,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>

src/component/modals/GraphCompDetails.jsx

@@ -101,7 +101,7 @@ const ModalComp = ({ closeModal, superState, dispatcher }) => {
         <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">

src/component/modals/NodeDetails.jsx

@@ -6,11 +6,13 @@ import './nodeDetails.css';
 import localStorageManager from '../../graph-builder/local-storage-manager';
 
 const NodeDetails = ({
-    data, setData, submit, labelAllowed,
+    data, setData, submit, labelAllowed, state,
 }) => {
     const inputRef = useCallback((node) => node && node.focus(), []);
     const textRef = createRef();
     const [widthSet] = useState(false);
+    const [mdList, setMdList] = useState([]);
+    const [mdCont, setMdCont] = useState(new Map(''));
     const [labelName, setLabelName] = useState('');
     const [labelFile, setLabelFile] = useState('');
     const indexOfFile = [];
@@ -20,6 +22,25 @@ const NodeDetails = ({
         setData({ ...data, style: { ...data.style, ...prop } });
     };
 
+    useEffect(() => {
+        const list = mdList;
+        state.fileState.forEach((ele) => {
+            if (ele.key.toString().includes('.md')) {
+                list.push(ele);
+                setMdList(list);
+                let mdmap = new Map();
+                mdmap = mdCont;
+                const fr = new FileReader();
+                fr.onload = (x) => {
+                    const strCont = '                      : ';
+                    mdmap.set(ele, strCont.concat(x.target.result.slice(0, 50).replace('#', '')));
+                    setMdCont(mdmap);
+                };
+                fr.readAsText(ele.fileObj);
+            }
+        });
+    }, [state.fileState]);
+
     useEffect(() => {
         if (!widthSet) {
             setStyle({
@@ -104,29 +125,42 @@ const NodeDetails = ({
                             value={data.label.split(':')[1]}
                             onChange={(e) => {
                                 setLabelFile(e.target.value.split('/').pop());
+                                setLabelFile(e.target.value.split(' :')[0]);
                                 if (labelName) {
                                     let lname = labelName;
                                     if (labelName.slice(-1) !== ':') {
                                         setLabelName(`${labelName}:`);
                                         lname += ':';
                                     }
-                                    setData({ ...data, label: lname + e.target.value.split('/').pop() });
-                                } else setData({ ...data, label: `:${e.target.value.split('/').pop()}` });
+                                    // eslint-disable-next-line max-len
+                                    setData({ ...data, label: lname + e.target.value.split('/').pop().split(' :')[0] });
+                                    // eslint-disable-next-line max-len
+                                } else setData({ ...data, label: `:${e.target.value.split('/').pop().split(' :')[0]}` });
                             }}
                             list="files"
                         />
                         <datalist id="files">
                             {
                                 localStorageManager.getFileList()
                                     // eslint-disable-next-line max-len, prefer-arrow-callback
-                                    ? JSON.parse(localStorageManager.getFileList())
+                                    ? state.fileState
                                         .map((item) => {
                                             const list = [];
                                             const acceptedTypes = ['.v', '.c', '.cpp', '.py', '.m', '.sh'];
                                             let index;
+                                            if (item.key.toString().includes('.md')) {
+                                                return null;
+                                            }
                                             // eslint-disable-next-line max-len
                                             if ((acceptedTypes.some((substring) => item.key.toString().includes(substring)))) {
-                                                list.push(item.key.toString());
+                                                const fileName = item.key.toString().split('.')[0].concat('.md');
+                                                // eslint-disable-next-line max-len
+                                                const matchingFile = mdList.find((ele) => ele.key.toString() === fileName);
+                                                if (mdCont.get(matchingFile)) {
+                                                    list.push(item.key.toString().concat(mdCont.get(matchingFile)));
+                                                } else {
+                                                    list.push(item.key.toString());
+                                                }
                                                 indexOfFile.push(indexOfFile[indexOfFile.length - 1] + 1);
                                                 index = indexOfFile[indexOfFile.length - 1] + 1;
                                                 // eslint-disable-next-line jsx-a11y/control-has-associated-label

src/component/modals/graph-comp-details.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
     padding: .75rem;
     border-top: 1px solid #dee2e6;
     border-bottom-right-radius: calc(.3rem - 1px);