diff --git a/package-lock.json b/package-lock.json index 218c70a..8488c31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2724,7 +2724,8 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.2.tgz", "integrity": "sha512-RwywHlpCRc3/Wh81MiCKun4ydaIFyW5Ea6JbL6sRCVx5q5irDw7pMXBUFYF/jArQ6YrG36q0kpovc9P/Kd3I4g==", - "dev": true + "dev": true, + "optional": true }, "boxen": { "version": "4.2.0", @@ -7768,9 +7769,9 @@ "dev": true }, "postcss": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz", - "integrity": "sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.5.tgz", + "integrity": "sha512-wMcb7BpDcm3gxQOQx46NDNT36Kk0Ao6PJLLI2ed5vehbbbxCEuslSQzbQ2sfSKy+gkYxhWcGWSeaK+gwm4KIZg==", "dev": true, "requires": { "colorette": "^1.2.1", @@ -8015,6 +8016,11 @@ "prop-types": "^15.7.2" } }, + "react-codemirror2": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz", + "integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==" + }, "react-dom": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", diff --git a/package.json b/package.json index a95f1e0..b2ca22f 100644 --- a/package.json +++ b/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" diff --git a/server/server.js b/server/server.js index f740a69..d11aa6a 100644 --- a/server/server.js +++ b/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')); diff --git a/src/App.js b/src/App.js index 9403f81..2066457 100644 --- a/src/App.js +++ b/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> ) diff --git a/src/Components/CheckBox.js b/src/Components/CheckBox.js index 4916f3c..8ca3f52 100644 --- a/src/Components/CheckBox.js +++ b/src/Components/CheckBox.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +// import MongoSchemaIDE from 'MongoSchemaIDE'; const CheckBox = (props) => { return ( diff --git a/src/Components/ConvertToProgrammaticButton.js b/src/Components/ConvertToProgrammaticButton.js index d5b6593..e69de29 100644 --- a/src/Components/ConvertToProgrammaticButton.js +++ b/src/Components/ConvertToProgrammaticButton.js @@ -1,10 +0,0 @@ -// import React from 'react' - -// const ConvertToProgrammaticButton = () => { -// return ( -// <div> -// </div> -// ) -// } - -// export default ConvertToProgrammaticButton; \ No newline at end of file diff --git a/src/Components/DownloadSchemaButton.js b/src/Components/DownloadSchemaButton.js deleted file mode 100644 index 6959768..0000000 --- a/src/Components/DownloadSchemaButton.js +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' - -// const DownloadSchemaButton = () => { -// return ( -// <div> -// </div> -// ) -// } - -// export default DownloadSchemaButton; \ No newline at end of file diff --git a/src/Components/DropDownMenu.js b/src/Components/DropDownMenu.js index a24a5f4..d3dc2e3 100644 --- a/src/Components/DropDownMenu.js +++ b/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) => { diff --git a/src/Components/MongoDBURI.js b/src/Components/MongoDBURI.js index ef4e822..f7ed0c7 100644 --- a/src/Components/MongoDBURI.js +++ b/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> ) } diff --git a/src/Components/MongoSchemaIDE.js b/src/Components/MongoSchemaIDE.js index e69de29..a0b2695 100644 --- a/src/Components/MongoSchemaIDE.js +++ b/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; \ No newline at end of file diff --git a/src/containers/Container.js b/src/containers/Container.js index e69de29..ac52dfe 100644 --- a/src/containers/Container.js +++ b/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; \ No newline at end of file diff --git a/src/public/codemirror.css b/src/public/codemirror.css new file mode 100644 index 0000000..5acef2e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/public/index.css b/src/public/index.css new file mode 100644 index 0000000..244c396 --- /dev/null +++ b/src/public/index.css @@ -0,0 +1,3 @@ +#logo { + width: 15%; +} \ No newline at end of file diff --git a/src/public/material.css b/src/public/material.css new file mode 100644 index 0000000..e69de29 diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 7ec5221..ff4ea42 100644 --- a/webpack.dev.config.js +++ b/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?$/, diff --git a/webpack2.js b/webpack2.js index 2aa2a8c..1b3e2f4 100644 --- a/webpack2.js +++ b/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" \ No newline at end of file +// "dist": "electron-builder" + +// use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], \ No newline at end of file