Merge pull request #165 from parteekcoder/contribute_feature

frontend of Contribute Feature

Author: pradeeban

src/App.jsx

@@ -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 ContributeDetails from './component/modals/ContributeDetails';
 
 const app = () => {
     const [superState, dispatcher] = useReducer(reducer, initialState);
@@ -33,6 +34,7 @@ const app = () => {
             <ShareModal superState={superState} dispatcher={dispatcher} />
             <SettingsModal superState={superState} dispatcher={dispatcher} />
             <HistoryModal superState={superState} dispatcher={dispatcher} />
+            <ContributeDetails superState={superState} dispatcher={dispatcher} />
             <FileEditModal superState={superState} dispatcher={dispatcher} />
             <GraphCompDetails
                 closeModal={() => dispatcher({ type: T.Model_Close })}
@@ -49,7 +51,7 @@ const app = () => {
                 </div>
             </section>
             <ReactTooltip place="bottom" type="dark" effect="solid" />
-            <ToastContainer position="top-right" autoClose={5000} pauseOnHover={false} />
+            <ToastContainer position="bottom-left" autoClose={8000} pauseOnHover={false} />
         </div>
     );
 };

src/component/modals/ContributeDetails.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
+import axios from 'axios';
+import Modal from './ParentModal';
+import { actionType as T } from '../../reducer';
+import './contributeDetails.css';
+
+const ContributeDetails = ({ 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 [showAdvanceOptions, setShowAdvanceOptions] = useState(false);
+    const submit = async (e) => {
+        if (study === '' || path === '' || auth === '') {
+            toast.info('Please Provide necessary inputs');
+            return;
+        }
+        const id = toast.loading('Processing your Request.Please wait...');
+        try {
+            e.preventDefault();
+            const result = await axios.post('http://127.0.0.1:5000/contribute', {
+                study,
+                auth,
+                desc,
+                title,
+                path,
+                branch,
+            });
+            toast.success(result.data?.message);
+        } catch (error) {
+            if (error?.response?.status === 400) {
+                toast.info(error?.response?.data?.message);
+            } else {
+                toast.error(error?.response.data.message);
+            }
+        }
+        toast.dismiss(id);
+        closeModal();
+    };
+    const toggleOptions = () => {
+        setShowAdvanceOptions(!showAdvanceOptions);
+    };
+    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
+                />
+                {showAdvanceOptions && (
+                    <>
+                        <span>Branch Name</span>
+                        <input
+                            value={branch}
+                            onChange={(e) => setBranch(e.target.value)}
+                        />
+                        <span>Title of Study</span>
+                        <input
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                        />
+                        <span>Description of Study</span>
+                        <textarea
+                            value={desc}
+                            onChange={(e) => setDesc(e.target.value)}
+                        />
+                    </>
+                )}
+                <button type="button" className="btn btn-secondary" onClick={toggleOptions}>
+                    {showAdvanceOptions ? 'Hide ' : 'Show '}
+                    Advance Options
+                </button>
+                <div className="expand">
+                    <button type="submit" className="btn btn-primary" onClick={submit}>Generate PR</button>
+                </div>
+            </form>
+        </Modal>
+    );
+};
+export default ContributeDetails;

src/component/modals/contributeDetails.css

@@ -0,0 +1,43 @@
+.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%;
+}
+.contribute-details .btn-secondary{
+    align-self: flex-end;
+}
+.contribute-details textarea{
+    resize: vertical;
+    max-height: 200px;
+    max-width: 300px;
+    text-align: left;
+    max-lines: 10;
+}
+.Toastify__toast-container {
+    /* width: 350px; */
+    /* height: 80px; */
+    padding: 3px 15px;
+    display: inline-block;
+  }
+  
+  .Toastify__toast {
+    /* width: 350px; */
+    /* height: 80px; */
+    width: fit-content;
+    font-size: 16px;
+  }

src/reducer/actionType.js

@@ -23,6 +23,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

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

src/toolbarActions/toolbarList.js

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