added CodeMirror, container, fixed Webpack

package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "ace-builds": "^1.4.12",
+    "codemirror": "^5.59.2",
     "cors": "^2.8.5",
     "electron-builder": "^22.9.1",
     "electron-fetch": "^1.7.3",
@@ -59,6 +60,7 @@
     "mongoose": "^5.11.14",
     "react": "^17.0.1",
     "react-ace": "^9.3.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "wait-on": "^5.2.1"

server/server.js

@@ -19,7 +19,7 @@ app.use(cors());
 // Getting mongodb uri from Frontend
 app.post("/getURI", mongoSchemaController.createMongoSchema, (req, res, next) => {
   // Waiting for locals to be sent, then deleting schema.json file
-  setTimeout(() => { 
+  setTimeout(() => {
     console.log('this got deleted')
       fs.unlinkSync(path.join(__dirname, '../schema.json'))
   }, 2000)
@@ -32,7 +32,7 @@ const schema = require('./schema')
 app.use('/graphql', graphqlHTTP({ schema, graphiql: true }))
 
 
-// app.use('/dist', express.static(path.join(__dirname, '../dist')));
+// app.use('/static', express.static(path.join(__dirname, '../src/public')));
 
 // app.get('/', (req, res) => {
 //     res.status(200).sendFile(path.resolve(__dirname, '../public/index.html'));

src/App.js

@@ -2,13 +2,15 @@
 import React from 'react'
 import MongoDBURI from './Components/MongoDBURI';
 import DropDownMenu from './Components/DropDownMenu';
+import Container from './containers/Container';
+import './public/index.css'
+
 
 // Create main App component
 const App = () => (
   <div>
-    <h1>Hello, Electron!</h1>
-    <p>Our Electron App is working!!!</p>
-    <MongoDBURI />
+    <img id="logo" src="https://i.ibb.co/KFmZK7N/qlens-logo.png" alt="qlens-logo" border="0" />
+    <Container />
   </div>
 )
 

src/Components/CheckBox.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+// import MongoSchemaIDE from 'MongoSchemaIDE';
 
 const CheckBox = (props) => {
   return (

src/Components/ConvertToProgrammaticButton.js

@@ -1,10 +0,0 @@
-// import React from 'react'
-
-// const ConvertToProgrammaticButton = () => {
-//   return (
-//     <div>
-//     </div>
-//   )
-// }
-
-// export default ConvertToProgrammaticButton;

src/Components/DropDownMenu.js

@@ -40,11 +40,11 @@ const DropDownMenu = ({schemaData, uriData}) => {
     //sending obj data to backend
     let selectedSchemas = {};
     for(let i = 0; i < clicked.length; i+=1) {
-      selectedSchemas[clicked[i]] = schemaData[clicked[i]]; 
+      selectedSchemas[clicked[i]] = schemaData[clicked[i]];
     }
     console.log('selectedSchemas is ', selectedSchemas)
 
-    // fetch to the backend 
+    // fetch to the backend
 
       fetch('http://localhost:3000/selectedSchemas', {
         method: 'POST',
@@ -129,7 +129,7 @@ export default DropDownMenu;
     // assign the value to be the current schema
 
   //   for (let i = 0; i < schemaNames.length; i+=1) {
-      
+
   //    if (schemaNames[i].includes(clickedSchema) && e.target.checked === false) {
   //     console.log('hiiii')
   //     setClicked(clicked.filter((item) => {

src/Components/MongoDBURI.js

@@ -2,44 +2,16 @@ import React, { useState, useEffect } from "react"; // userEffect to fetch inste
 import DropDownMenu from "./DropDownMenu";
 
 // input field for the mongoDB uri
-const MongoDBURI = () =>  {
-    const [schemaData, setSchemaData] = useState({});
-    const [uriId, setUriId] = useState('');
-
-    const submit = (e) => {I
-      e.preventDefault()
-      console.log('submit worked')
-      fetch('http://localhost:3000/getURI', {
-        method: "POST",
-        headers: {
-          "Content-Type" : "application/json"
-        },
-        body: JSON.stringify({val: 'mongodb+srv://judy:hush@hush.u9hai.mongodb.net/chat?retryWrites=true&w=majority'})
-      })
-      .then(res => res.json())
-      .then((data) => {
-        console.log('data string from fetch', data)
-        setSchemaData(JSON.parse(data));
-      })
-      .catch(err => console.log(err))
-    }
-
-    //uriId = document.getElementById('uriInput').value;
-    const getUri = (e) => {
-      setUriId(e.target.value);
-    };
-
-    console.log("state is being set", schemaData);
-
+const MongoDBURI = ({schemaData, uriData, submitbtn, geturi}) =>  {
     return (
         <div className="formContainer">
             <div>
               <form>
-                  <input type="text" placeholder="enter MongoDBURI ..." onChange= {getUri}/>
-                  <input className="URISubmitButton" type="submit" value="Submit" onClick={submit}/>
+                  <input type="text" placeholder="enter MongoDBURI ..." onChange= {geturi}/>
+                  <input className="URISubmitButton" type="submit" value="Submit" onClick={submitbtn}/>
               </form>
             </div>
-            <DropDownMenu schemaData={schemaData} uriData={uriId} />
+            <DropDownMenu schemaData={schemaData} uriData={uriData} />
         </div>
     )
 }

src/Components/MongoSchemaIDE.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Codemirror from 'codemirror';
+import {UnControlled as CodeMirror} from 'react-codemirror2';
+require('codemirror/mode/javascript/javascript');
+import '../public/codemirror.css';
+// import '../public/material.css';
+// require('../../node_modules/codemirror/lib/codemirror.css');
+import '../../node_modules/codemirror/lib/codemirror.css';
+import '../../node_modules/codemirror/theme/dracula.css';
+// import '../../node_modules/codemirror/lib/codemirror.css';
+// import '../../node_modules/codemirror/theme/dracula.css';
+
+const MongoSchemaIDE = ({schemaData}) => {
+  console.log('from mongoIDE schemaData', schemaData)
+  return(
+
+    <div>
+      <div className="codebox">
+        <CodeMirror
+        value='<h1>hi</h1>'
+        options={{
+          mode: 'javascript',
+          theme: 'dracula',
+          lineNumbers: true
+        }}
+        />
+        </div>
+        <div className="codebox2">
+          <CodeMirror
+          value='<h1>Judy with the BIGGGGGG booty! yasss queen! </h1>'
+          options={{
+            mode: 'javascript',
+            theme: 'dracula',
+            lineNumbers: true
+          }}
+          />
+      </div>
+    </div>
+  )
+}
+
+export default MongoSchemaIDE;

src/containers/Container.js

@@ -0,0 +1,43 @@
+// import React from 'react'
+import React, { useState, useEffect } from "react";
+import MongoDBURI from '../Components/MongoDBURI';
+import MongoSchemaIDE from '../Components/MongoSchemaIDE';
+
+const Container = () => {
+  const [schemaData, setSchemaData] = useState({});
+  const [uriId, setUriId] = useState('');
+
+    const submit = (e) => {
+      e.preventDefault()
+      console.log('submit worked')
+      fetch('http://localhost:3000/getURI', {
+        method: "POST",
+        headers: {
+          "Content-Type" : "application/json"
+        },
+        body: JSON.stringify({val: 'mongodb+srv://judy:hush@hush.u9hai.mongodb.net/chat?retryWrites=true&w=majority'})
+      })
+      .then(res => res.json())
+      .then((data) => {
+        console.log('data string from fetch', data)
+        setSchemaData(JSON.parse(data));
+      })
+      .catch(err => console.log(err))
+    }
+
+    //uriId = document.getElementById('uriInput').value;
+    const getUri = (e) => {
+      setUriId(e.target.value);
+    };
+
+    console.log("state is being set", schemaData);
+
+  return(
+    <div>
+      <MongoDBURI schemaData={schemaData} uriData={uriId} geturi={getUri} submitbtn={submit}  />
+      <MongoSchemaIDE schemaData={schemaData} />
+    </div>
+  )
+}
+
+export default Container;

src/public/codemirror.css

@@ -0,0 +1,11 @@
+.codebox {
+  border: 1px solid black;
+  width: 40%;
+  display: inline-block;
+}
+
+.codebox2 {
+  border: 1px solid black;
+  width: 40%;
+  display: inline-block;
+}

src/public/index.css

@@ -0,0 +1,3 @@
+#logo {
+  width: 15%;
+}

webpack.dev.config.js

@@ -7,13 +7,15 @@ const { spawn } = require('child_process')
 const defaultInclude = path.resolve(__dirname, 'src')
 
 module.exports = {
- 
+
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-        include: defaultInclude
+        //use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+        use: ["style-loader", "css-loader"],
+        include: [defaultInclude,
+          path.resolve(__dirname, 'node_modules/codemirror/lib/codemirror.css'), path.resolve(__dirname, 'node_modules/codemirror/theme/dracula.css')]
       },
       {
         test: /\.jsx?$/,

webpack2.js

@@ -64,4 +64,6 @@
 // "build:react": "NODE_ENV=production webpack --config webpack.react.config.js --mode production",
 // "build": "npm run build:electron && npm run build:react",
 // "pack": "electron-builder --dir",
-// "dist": "electron-builder"
+// "dist": "electron-builder"
+
+// use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],