frontend of contribute feature

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^1.4.0",
     "chokidar": "^3.5.3",
     "cytoscape": "^3.19.0",
     "cytoscape-edgehandles": "^3.6.0",

src/App.jsx

@@ -12,6 +12,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 ContributeModal from './component/modals/ContributeDetails';
 
 const app = () => {
     const [superState, dispatcher] = useReducer(reducer, initialState);
@@ -21,6 +22,7 @@ const app = () => {
             <ShareModal superState={superState} dispatcher={dispatcher} />
             <SettingsModal superState={superState} dispatcher={dispatcher} />
             <HistoryModal superState={superState} dispatcher={dispatcher} />
+            <ContributeModal superState={superState} dispatcher={dispatcher} />
             <FileEditModal superState={superState} dispatcher={dispatcher} />
             <GraphCompDetails
                 closeModal={() => dispatcher({ type: T.Model_Close })}

src/component/modals/ContributeDetails.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import Modal from './ParentModal';
+import { actionType as T } from '../../reducer';
+import './contributeDetails.css';
+
+const ContributeModal = ({ superState, dispatcher }) => {
+    const closeModal = () => {
+        dispatcher({ type: T.SET_CONTRIBUTE_MODAL, payload: false });
+    };
+    const [study, setStudy] = useState('');
+    const [path, setPath] = useState('');
+    const [auth, setAuth] = useState('');
+    const [title, setTitle] = useState('');
+    const [desc, setDesc] = useState('');
+    const [branch, setBranch] = useState('');
+    const submit = async (e) => {
+        try {
+            e.preventDefault();
+            const result = await axios.post(`http://127.0.0.1:5000/contribute?study=${study}&auth=${auth}&desc=${desc}&title=${title}&path=${path}&branch=${branch}`);
+            console.log(result.data);
+            // eslint-disable-next-line
+            alert("Still in Development");
+            closeModal();
+        } catch (error) {
+            console.log(error);
+        }
+    };
+    return (
+        <Modal
+            ModelOpen={superState.contributeModal}
+            title="Contribute"
+            closeModal={closeModal}
+        >
+            <form className="contribute-details">
+                <span>Study Name</span>
+                <input
+                    required
+                    value={study}
+                    onChange={(e) => setStudy(e.target.value)}
+                />
+                <span>Study Path</span>
+                <input
+                    placeholder="Enter Full Directory Path of Study"
+                    value={path}
+                    onChange={(e) => setPath(e.target.value)}
+                    required
+                />
+                <span>Author Name</span>
+                <input
+                    value={auth}
+                    onChange={(e) => setAuth(e.target.value)}
+                    required
+                />
+                <span>Branch Name</span>
+                <input
+                    value={branch}
+                    onChange={(e) => setBranch(e.target.value)}
+                    required
+                />
+                <span>PR Title</span>
+                <input
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    required
+                />
+                <span>PR Description</span>
+                <input
+                    value={desc}
+                    onChange={(e) => setDesc(e.target.value)}
+                    required
+                />
+                <div className="expand">
+                    <button type="submit" className="btn btn-primary" onClick={submit}>Generate PR</button>
+                </div>
+            </form>
+        </Modal>
+    );
+};
+export default ContributeModal;

src/component/modals/contributeDetails.css

@@ -0,0 +1,20 @@
+.contribute-details{
+    padding: 20px;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 20px;
+}
+
+.contribute-details *{
+    padding: 10px 5px;
+    text-align: center;
+}
+
+.contribute-details .expand{
+    grid-column: 1 / span 2;
+    padding: 0;
+}
+
+.contribute-details .btn{
+    width: 100%;
+}

src/reducer/actionType.js

@@ -22,6 +22,7 @@ const actionType = {
     NEW_GRAPH: 'NEW_GRAPH',
     SET_SHARE_MODAL: 'SET_SHARE_MODAL',
     SET_SETTING_MODAL: 'SET_SETTING_MODAL',
+    SET_CONTRIBUTE_MODAL: 'SET_CONTRIBUTE_MODAL',
     SET_FILE_REF: 'SET_FILE_REF',
     SET_HISTORY_MODAL: 'SET_HISTORY_MODAL',
     SET_AUTHOR: 'SET_AUTHOR',

src/reducer/initialState.js

@@ -13,6 +13,7 @@ const initialState = {
     settingsModal: false,
     editDetailsModal: false,
     newGraphModal: false,
+    contributeModal: false,
 
     eleSelected: false,
     drawModeOn: true,

src/reducer/reducer.js

@@ -64,6 +64,9 @@ const reducer = (state, action) => {
             },
         };
     }
+    case T.SET_CONTRIBUTE_MODAL: {
+        return { ...state, contributeModal: action.payload };
+    }
     case T.Model_Close: return { ...state, ModelOpen: false };
     case T.ELE_SELECTED: return { ...state, eleSelected: true, eleSelectedPayload: action.payload };
     case T.ELE_UNSELECTED: return { ...state, eleSelected: false };

src/toolbarActions/toolbarFunctions.js

@@ -139,6 +139,10 @@ const clearAll = (state) => {
     getGraphFun(state).clearAll();
 };
 
+const contribute = (state, setState) => {
+    setState({ type: T.SET_CONTRIBUTE_MODAL, payload: true });
+};
+
 const editDetails = (state, setState) => {
     setState({
         type: T.SET_EDIT_DETAILS_MODAL,
@@ -177,5 +181,5 @@ export {
     createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
     createFile, readFile, readTextFile, newProject, clearAll, editDetails, undo, redo,
     openShareModal, openSettingModal, viewHistory,
-    toggleServer,
+    toggleServer, contribute,
 };

src/toolbarActions/toolbarList.js

@@ -12,7 +12,7 @@ import {
 import {
     createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
     createFile, readFile, clearAll, undo, redo, openShareModal, viewHistory,
-    toggleServer,
+    toggleServer, contribute,
     // openSettingModal,
 } from './toolbarFunctions';
 
@@ -218,7 +218,7 @@ const toolbarList = (state, dispatcher) => [
         type: 'action',
         text: 'Contribute',
         icon: FiTriangle,
-        action: () => { window.open('https://github.com/ControlCore-Project/concore-editor', '_blank'); },
+        action: contribute,
         active: true,
         visibility: true,
     },