Merge pull request #36 from stevenlabrie/StevensBranch

improved styling

Author: Judanator

app/electron.js

@@ -40,7 +40,7 @@ if (process.platform === 'win32') {
 function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 1024, // width of the window
+    width: 1350, // width of the window default 1024
     height: 768, // height of the window
     show: false, // don't show until window is ready
     webPreferences: {

app/server/schema.js

@@ -3,6 +3,9 @@ var cloneDeep = require('lodash.clonedeep');
 const MongoClient = require('mongodb').MongoClient;
 var pluralize = require('pluralize');
 const { ipcMain } = require('electron')
+const { graphqlHTTP } = require('express-graphql');
+const express = require('express');
+const app = express();
 
 const {
   GraphQLObjectType,
@@ -28,7 +31,7 @@ function addWhiteSpace(number) {
 ipcMain.on('selectedSchemas', (event, arg) => {
   const url = arg.uriId;
   const data = arg.selectedSchemas;
-  console.log(data);
+  console.log('IS THIS IT????', data);
   // Function for capitalization
   const capitalize = (s) => {
     if (typeof s !== 'string') return '';
@@ -143,7 +146,6 @@ ipcMain.on('selectedSchemas', (event, arg) => {
       const client = new MongoClient(url, { useUnifiedTopology: true });
       const regex = /\/(\w+)\?/g;
       const databaseName = url.match(regex);
-      console.log('DATABASSSSUUUUUU', url);
       const databaseString = databaseName
         .join('')
         .slice(1, databaseName.join('').length - 1);
@@ -204,7 +206,6 @@ ipcMain.on('selectedSchemas', (event, arg) => {
       .forEach((el) => {
         listOfProperties += `${el}: args.${el},|${addWhiteSpace(10)}`;
       });
-    // console.log('LIST OF PROPERTIESSSSSSSSSSSS===============', listOfProperties)
 
     mutationObjStr +=
       `   add${capitalize(property)} : {|` +
@@ -278,6 +279,15 @@ ipcMain.on('selectedSchemas', (event, arg) => {
     fields: rootQueryObj,
   });
 
+  const Schema = new GraphQLSchema({
+    query: RootQuery,
+  })
+
+  app.use(
+    '/graphql',
+    graphqlHTTP({ schema: Schema, graphiql: true })
+  );
+
   event.sender.send("returnedSchemas", {types: stringObj, queries: sendRootQueryObj, mutations: mutationSchema, mongoSchema: buildMongoStr})
 })
 
@@ -286,6 +296,8 @@ const RootQuery = new GraphQLObjectType({
   fields: rootQueryObj,
 });
 
+app.listen(3000, () => console.log('listening on port 3000'));
+
 module.exports = {
   converter,
   schema: new GraphQLSchema({

app/server/server.js

@@ -5,8 +5,9 @@
 import React from 'react';
 import CheckBox from './CheckBox';
 import {ipcRenderer} from "electron";
+import ResetButton from './ResetButton';
 
-const DropDownMenu = ({schemaData, uriData, sendSchemas, addCheckmark, toggleBtn, toggleCheckbox}) => {
+const DropDownMenu = ({schemaData, uriData, sendSchemas, addCheckmark, toggleBtn, toggleCheckbox, resetBtn, resetButton}) => {
   const checkBoxComponents = [];
 
   for (let key in schemaData) {
@@ -17,11 +18,12 @@ const DropDownMenu = ({schemaData, uriData, sendSchemas, addCheckmark, toggleBtn
 
   return(
     <div className="dropDown">
-      <div>
+      <div className="menuItems">
       {checkBoxComponents}
       </div>
       <div className="addSchemaBtn" >
-        <button className={toggleBtn ? "AddSelectedSchemasButton": "disableAddSelected"} onClick={sendSchemas} disabled={!toggleBtn}><span>Add Selected Schemas</span></button>
+        <button className={toggleBtn ? "AddSelectedSchemasButton": "disableAddSelected"} onClick={sendSchemas} disabled={!toggleBtn}><span>Add Schemas</span></button>
+        <ResetButton resetBtn={resetBtn} />
       </div>
     </div>
   )

app/src/Components/DropDownMenu.js

@@ -4,7 +4,7 @@ import '../public/loader.css';
 const Loader = () => {
   return (
     <Fragment>
-      <div class="lds-roller">
+      <div className="lds-roller">
         <div></div>
         <div></div>
         <div></div>
@@ -14,7 +14,7 @@ const Loader = () => {
         <div></div>
         <div></div>
       </div>
-      <h1 class="loading-text">Loading...</h1>
+      <h1 className="loading-text">Loading...</h1>
     </Fragment>
   );
 };

app/src/Components/Loader.js

@@ -125,4 +125,4 @@ const MongoSchemaIDE = ({schemaData, selectedSchemaData, graphQLSchema}) => {
     </div>
   )
 }
-export default MongoSchemaIDE;
+export default MongoSchemaIDE;{/*  */}

app/src/Components/MongoSchemaIDE.js

@@ -3,20 +3,12 @@ import Tree from 'react-tree-graph';
 import 'react-tree-graph/dist/style.css'
 import '../public/index.css';
 
-// let data = {
-// 	name: 'Parent',
-// 	children: [{
-// 		name: 'Child One'
-// 	}, {
-// 		name: 'Child Two'
-// 	}]
-// };
 const TreeGraph = ({ schemaChart }) => {
   return(
     <div className="tree">
       <Tree
         data={schemaChart}
-        height={600}
+        height={692.25}
         width={600}
         animated={true}
         svgProps={{

app/src/Components/TreeGraph.js

@@ -40,10 +40,18 @@ const Container = () => {
     window.location.reload(true);
   }
 
-  ipcRenderer.on('URI-reply', (event, arg) => {
-    setSchemaData(JSON.parse(arg));
-    setLoading(false);
-  })
+  useEffect(() => {
+    ipcRenderer.on('URI-reply', (event, arg) => {
+      setSchemaData(JSON.parse(arg));
+      setLoading(false);
+    })
+    ipcRenderer.on('returnedSchemas', (event, arg) => {
+      setGraphQLSchema(arg)
+      setClicked([]);
+    })
+  }, [])
+
+
   // updating state with the MongoDBRUI from input field
   const getUri = (e) => {
     setUriId(e.target.value);
@@ -76,10 +84,7 @@ const Container = () => {
     ipcRenderer.send('selectedSchemas', {selectedSchemas, uriId})
   };
 
-  ipcRenderer.on('returnedSchemas', (event, arg) => {
-    setGraphQLSchema(arg)
-    setClicked([]);
-  })
+
 
   // creating formatted object for d3 graph
   let schemaChart = {};
@@ -135,6 +140,7 @@ const Container = () => {
             addCheckmark={addCheckmark}
             toggleBtn={toggleASSBtn}
             toggleCheckbox={toggleCheckbox}
+            resetBtn={resetButton}
           />
           {Object.keys(schemaChart).length > 0 ? (
             <TreeGraph schemaChart={schemaChart} />
@@ -145,9 +151,9 @@ const Container = () => {
           />
         </div>
         <Ribbon/>
-        <ResetButton
-          resetBtn={resetButton}
-        />
+        {/* <ResetButton
+          resetBtn={resetButton} */}
+        {/* /> */}
       </div>
     </Fragment>
   );