Merge pull request #32 from stevenlabrie/StevensBranch

choyeewinag · web-flow · commit bbb71b731e1d · 2021-02-24T20:26:27.000-05:00
refactored code and merged
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/server/controllers/mongoSchemaController.js b/app/server/controllers/mongoSchemaController.js
diff --git a/app/server/schema.js b/app/server/schema.js
@@ -4,7 +4,6 @@ const MongoClient = require('mongodb').MongoClient;
 var pluralize = require('pluralize');
 const { ipcMain } = require('electron')
 
-
 const {
   GraphQLObjectType,
   GraphQLString,
@@ -15,7 +14,6 @@ const {
   GraphQLNonNull,
 } = graphql;
 
-
 const converter = {};
 let rootQueryObj = {};
 
@@ -264,10 +262,8 @@ ipcMain.on('selectedSchemas', (event, arg) => {
       `${addWhiteSpace(4)}},|`;
 
     // resetting the fieldsObject
-    //  console.log('this is stringObj ====>', strFieldsObj);
     fieldsObj = {};
     strFields = '';
-    // mutationObjStr = '';
     mutationToString = '';
     mongoSchemaStr = '';
   }
diff --git a/app/server/server.js b/app/server/server.js
@@ -6,10 +6,8 @@
   const fs = require('fs');
   const { graphqlHTTP } = require('express-graphql');
   const schemaRoute = require('./schema');
-
   const mongoSchemaController = require('./controllers/mongoSchemaController');
 
-
   app.use(express.json());
   app.use(cors());
 
@@ -45,7 +43,6 @@ app.use((err, req, res, next) => {
   return res.status(errorObj.status).json(errorObj.message);
 });
 
-
 app.listen(3000, () => console.log('listening on port 3000'));
 module.exports = app;
 })()
diff --git a/app/src/App.js b/app/src/App.js
@@ -6,10 +6,12 @@ import "./public/index.css";
 
 // Create main App component
 const App = () => {
+  return (
   <div>
     <Container />
     <AutoUpdate />
   </div>
+  )
 }
 // Export the App component
 export default App;
diff --git a/app/src/Components/AutoUpdate.js b/app/src/Components/AutoUpdate.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import "./public/index.css";
+import "../public/index.css";
 const { ipcRenderer } = require('electron')
 
 const AutoUpdate = () => {
@@ -27,12 +27,12 @@ const AutoUpdate = () => {
     };
 
     return (
-    <div id="notification" class="hidden">
+    <div id="notification" className="hidden">
         <p id="message"></p>
-        <button id="close-button" onClick="closeNotification()">
+        <button id="close-button" onClick={closeNotification}>
         Close
         </button>
-        <button id="restart-button" onClick="restartApp()" class="hidden">
+        <button id="restart-button" onClick={restartApp} className="hidden">
         Restart
         </button>
     </div>
diff --git a/app/src/Components/CheckBox.js b/app/src/Components/CheckBox.js
@@ -6,15 +6,12 @@ const CheckBox = (props) => {
     <div className="checkboxContainer" id="box">
       <form className="checkboxForm">
         <label className="checkboxLabel">
-          <input className="checkbox" type="checkbox" name={props.name} onClick={props.clicked} />
-          {/* name is the key which is the obj */}
+          <input className="checkbox" type="checkbox" name={props.name} onClick={props.clicked} disabled={props.toggleCheckbox}/>
           {props.name}
         </label>
       </form>
     </div>
   )
 }
 
-
-
 export default CheckBox;
diff --git a/app/src/Components/DropDownMenu.js b/app/src/Components/DropDownMenu.js
@@ -2,25 +2,16 @@
 // research code mirror to hold the schemas
 // todo: create functionality so that when a checkbox is clicked, the schema appears on the page
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import CheckBox from './CheckBox';
+import {ipcRenderer} from "electron";
 
-
-const DropDownMenu = ({schemaData, uriData, sendSchemas, addCheckmark}) => {
-
-  const checkHandler = e => {
-    const schemaNames = Object.keys(schemaData);
-    const tools = props.schemaNames.clicked; //Array in parent component
-    const value = e.target.value; //Checkbox value
-
-    props.addCheckmark(value);
-  };
-
+const DropDownMenu = ({schemaData, uriData, sendSchemas, addCheckmark, toggleBtn, toggleCheckbox}) => {
   const checkBoxComponents = [];
 
   for (let key in schemaData) {
     checkBoxComponents.push(
-      <CheckBox name={key} key={`checkbox${key}`} clicked={addCheckmark} />
+      <CheckBox name={key} key={`dropdown${key}`} clicked={addCheckmark} toggleCheckbox={toggleCheckbox} />
     )
   }
 
@@ -30,13 +21,11 @@ const DropDownMenu = ({schemaData, uriData, sendSchemas, addCheckmark}) => {
       {checkBoxComponents}
       </div>
       <div className="addSchemaBtn" >
-        <button className="AddSelectedSchemasButton" onClick={sendSchemas}><span>Add Selected Schemas</span></button>
+        <button className={toggleBtn ? "AddSelectedSchemasButton": "disableAddSelected"} onClick={sendSchemas} disabled={!toggleBtn}><span>Add Selected Schemas</span></button>
       </div>
     </div>
   )
 }
 
-
-
 export default DropDownMenu;
 
diff --git a/app/src/Components/MongoDBURI.js b/app/src/Components/MongoDBURI.js
@@ -7,7 +7,7 @@ const MongoDBURI = ({schemaData, uriData, submitbtn, geturi}) =>  {
         <div className="formContainer">
             <div className="formClass">
               <form className="form__group field">
-                  <input className="form__field" type="input" onChange= {geturi} id='name' placeholder=" Input Your MongoDB URI"/>
+                  <input className="form__field" type="input" onChange={geturi} id='name' placeholder=" Input Your MongoDB URI"/>
                   <label className="form__label"> MongoDB URI </label>
                   <input className="URISubmitButton" type="submit" value="Submit" onClick={submitbtn} style={{display: "none"}}/>
               </form>
diff --git a/app/src/Components/MongoSchemaIDE.js b/app/src/Components/MongoSchemaIDE.js
@@ -87,6 +87,7 @@ const MongoSchemaIDE = ({schemaData, selectedSchemaData, graphQLSchema}) => {
           <CodeMirror
             value={_.isEmpty(graphQLSchema) ? `/*
 *** Input MongoDB Uri ***
+*** Press Enter ***
 *** Click Add Selected Schemas ***
 *** View GraphQL Schemas Here ***
 */` : combined}
diff --git a/app/src/Components/ResetButton.js b/app/src/Components/ResetButton.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const ResetButton = ({resetBtn}) => {
+ return (
+  <div>
+   <button className="resetButton" type="reset" onClick={resetBtn}> RESET </button>
+  </div>
+ );
+};
+
+export default ResetButton;
diff --git a/app/src/Components/Ribbon.js b/app/src/Components/Ribbon.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const Ribbon = () => {
- return <div class="corner-ribbon top-right sticky blue"> <a href="https://github.com/oslabs-beta/QLens" target="_blank">See on GitHub</a> </div>;
+ return <div className="corner-ribbon top-right sticky blue"> <a href="https://github.com/oslabs-beta/QLens" target="_blank">See on GitHub</a> </div>;
 };
 
 export default Ribbon;
diff --git a/app/src/containers/Container.js b/app/src/containers/Container.js
@@ -11,6 +11,7 @@ import Loader from '../Components/Loader';
 import Ribbon from '../Components/Ribbon';
 import fetch from 'electron-fetch'
 import {ipcRenderer} from "electron";
+import ResetButton from '../Components/ResetButton'
 
 const Container = () => {
   const [schemaData, setSchemaData] = useState({});
@@ -20,15 +21,25 @@ const Container = () => {
   const [graphQLSchema, setGraphQLSchema] = useState({});
   const [loading, setLoading] = useState(false);
 
+  const [toggleASSBtn, setToggleASSBtn] = useState(false)
+  const [toggleInput, setToggleInput] = useState(false)
+  const [toggleCheckbox, setToggleCheckbox] = useState(false)
+
   // enter MongoDBURI to receive schemas
   // submit function fetches schemas from backend when Submit button is clicked
 
   const submit = (e) => {
     e.preventDefault();
     setLoading(true);
     ipcRenderer.send('URI', uriId)
+    setToggleASSBtn(!toggleASSBtn)
+    setToggleInput(!toggleInput)
   };
 
+  const resetButton = () => {
+    window.location.reload(true);
+  }
+
   ipcRenderer.on('URI-reply', (event, arg) => {
     setSchemaData(JSON.parse(arg));
     setLoading(false);
@@ -54,12 +65,14 @@ const Container = () => {
   // sendSchema function builds the selectedSchemas object with the schemas that are selected in the DropDownMenu
   // sends the selectedSchemas to the backend for migration
   const sendSchemas = (e) => {
-    setSelectedSchemaData([]);
     let selectedSchemas = {};
     for (let i = 0; i < clicked.length; i += 1) {
       selectedSchemas[clicked[i]] = schemaData[clicked[i]];
     }
     setSelectedSchemaData([selectedSchemas]);
+    setClicked([])
+    setToggleASSBtn(!toggleASSBtn)
+    setToggleCheckbox(!toggleCheckbox)
     ipcRenderer.send('selectedSchemas', {selectedSchemas, uriId})
   };
 
@@ -110,15 +123,18 @@ const Container = () => {
             submitbtn={submit}
             sendSchemas={sendSchemas}
             addCheckmark={addCheckmark}
+            toggleInput= {toggleInput}
           />
           <PlaygroundButton />
         </div>
         <div className="grid-container">
-          <DropDownMenu
+        <DropDownMenu
             schemaData={schemaData}
             uriData={uriId}
             sendSchemas={sendSchemas}
             addCheckmark={addCheckmark}
+            toggleBtn={toggleASSBtn}
+            toggleCheckbox={toggleCheckbox}
           />
           {Object.keys(schemaChart).length > 0 ? (
             <TreeGraph schemaChart={schemaChart} />
@@ -129,6 +145,9 @@ const Container = () => {
           />
         </div>
         <Ribbon/>
+        <ResetButton
+          resetBtn={resetButton}
+        />
       </div>
     </Fragment>
   );
diff --git a/app/src/public/index.css b/app/src/public/index.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
