From 05277ecc84edbea60025dcb6e5895d406eb2e98b Mon Sep 17 00:00:00 2001 From: Cho Yee Win Aung Date: Fri, 5 Feb 2021 10:56:37 -0500 Subject: [PATCH 1/2] When schemas been unchecked and addSelectedSchema button has been clicked, it has been removed from the clicked Array. --- src/Components/DropDownMenu.js | 154 +++++++++++++++++---------------- 1 file changed, 81 insertions(+), 73 deletions(-) diff --git a/src/Components/DropDownMenu.js b/src/Components/DropDownMenu.js index f09928a..1306e71 100644 --- a/src/Components/DropDownMenu.js +++ b/src/Components/DropDownMenu.js @@ -8,85 +8,42 @@ import CheckBox from './CheckBox'; const DropDownMenu = ({schemaData}) => { const [ clicked, setClicked ] = useState([]); - const addCheckmark = (e) => { + const addCheckmark = (item) => { // pass onClick into // when clicked it will add specific schema to send to backend - // send data to state - const schemaNames = Object.keys(schemaData);// [users, conversations] - - let clickedSchema = e.target.name; - - for (let i = 0; i < schemaNames.length; i+=1) { - if (schemaNames[i] === clickedSchema && e.target.checked === true) { - // setClicked([...clicked, {[currentName]: schemaData[currentName]}]) - setClicked([...clicked, {[clickedSchema]: schemaData[clickedSchema]}]) - } - else if (schemaNames[i] === clickedSchema && e.target.checked === false) { - console.log('hiiii') - setClicked(clicked.filter((item) => { - Object.keys(item).join('') !== clickedSchema // user = conversions - console.log('this is the item[clickedSchema] =====', item[clickedSchema]) - console.log('item is ', item) - console.log('clickedSchema is ', clickedSchema) - console.log('schemaNames[i] is ', schemaNames[i]) - })); - } - - } - - - // check if clickedSchema is truthy and target.checked is false - // we can filter the clicked array and change the state to be everything except the schemaData[clickedSchema] - - -//The filter() method creates a new array with all elements that pass the test implemented by the provided function. + // const schemaNames = Object.keys(schemaData);// [users, conversations] - // array.reduce ( (resultArr, currVal) => { - // if currVal === clickedSchema { - // resultArr.push(clickedSchema) - // } - // }, [] ) - - // if (clickedSchema && e.target.checked === false) { - // setClicked(clicked.reduce((resultArr, currentVal => { - // if (currentVal !== clickedSchema) { - // resultArr.push(clickedSchema) - // } - // //item[conversations] = object - // console.log('In the new if statement') - // console.log('item ====> ', item); - // }) + let clickedSchema = item.target.name; - // ) - // console.log('clicked array being filtered', clicked) - // } + if (clicked.includes(clickedSchema)) { + console.log('includes pass') + setClicked(clicked.filter(tool => { + console.log('filter pass') + console.log('tool is ===', tool) + return tool !== clickedSchema + })); + } else { + setClicked([...clicked, clickedSchema]); + } + } + //To-Do + // when the add schema button is clicked, we will need to send the schema name to the backend so they can send the schema to the frontend. + // create a function that matches the checked schema names with the key that is in the schemaData object and sends back the object to the backend! + // YAY CHO!!! yaaassss!! <3 - // console.log('clicked', clicked); - // console.log(schemaData.users); - // if the box is unchecked - console.log('checked', e.target.checked); + 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 sendSchemas = (e) => { console.log('clicked array',clicked); } - - - - //create onclick function, if clicked, add this key, to state - - // schemaData = { - // users: { - - // }, - // conversations: { - - // } - // } - const checkBoxComponents = []; for (let key in schemaData) { @@ -94,9 +51,6 @@ const DropDownMenu = ({schemaData}) => { ) } - // with a for loop - // - return(
@@ -121,11 +75,16 @@ export default DropDownMenu; // stretch: expand and collapse / scroll bar for lots of schemas +//create onclick function, if clicked, add this key, to state + // schemaData = { + // users: { + // }, + // conversations: { - - + // } + // } // iterare over all the schema names // create a checkbox for each iteration @@ -151,4 +110,53 @@ export default DropDownMenu; // map through the schema array // create a new element for each schema (new checkbox) - // assign the value to be the current schema \ No newline at end of file + // 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) => { + // item.value !== clickedSchema // user = conversions + // console.log('this is the item[clickedSchema] =====', item[clickedSchema]) + // console.log('item is ', item) + // console.log('clickedSchema is ', clickedSchema) + // console.log('schemaNames[i] is ', schemaNames[i]) + // })); + // } else if (schemaNames[i] === clickedSchema && e.target.checked === true) { + // // setClicked([...clicked, {[currentName]: schemaData[currentName]}]) + // setClicked([...clicked, {[clickedSchema]: schemaData[clickedSchema]}]) + // } + // } + + + // check if clickedSchema is truthy and target.checked is false + // we can filter the clicked array and change the state to be everything except the schemaData[clickedSchema] + + +//The filter() method creates a new array with all elements that pass the test implemented by the provided function. + + // array.reduce ( (resultArr, currVal) => { + // if currVal === clickedSchema { + // resultArr.push(clickedSchema) + // } + // }, [] ) + + // if (clickedSchema && e.target.checked === false) { + // setClicked(clicked.reduce((resultArr, currentVal => { + // if (currentVal !== clickedSchema) { + // resultArr.push(clickedSchema) + // } + // //item[conversations] = object + // console.log('In the new if statement') + // console.log('item ====> ', item); + // }) + + // ) + // console.log('clicked array being filtered', clicked) + // } + + // console.log('clicked', clicked); + // console.log(schemaData.users); + // if the box is unchecked + // console.log('checked', e.target.checked); \ No newline at end of file From 62e15ecd2bc9e96f321f96910da99152526c2b1e Mon Sep 17 00:00:00 2001 From: Cho Yee Win Aung Date: Fri, 5 Feb 2021 19:07:47 -0500 Subject: [PATCH 2/2] grab uri and send to backend, remove schema from selectedSchem --- server/server.js | 12 ++++++++++++ src/Components/DropDownMenu.js | 36 ++++++++++++++++++++++++---------- src/Components/MongoDBURI.js | 12 +++++++++--- 3 files changed, 47 insertions(+), 13 deletions(-) diff --git a/server/server.js b/server/server.js index 879a0a9..f740a69 100644 --- a/server/server.js +++ b/server/server.js @@ -38,4 +38,16 @@ app.use('/graphql', graphqlHTTP({ schema, graphiql: true })) // res.status(200).sendFile(path.resolve(__dirname, '../public/index.html')); // }); + +//Post request to get the selectedSchemas from the front end submit button +app.post('/selectedSchemas', (req, res) => { + res.status(200); + console.log(req.body.selectedSchemas); + console.log(req.body.uriData); +}) + + + + + app.listen(3000, () => console.log("listening on port 3000")); diff --git a/src/Components/DropDownMenu.js b/src/Components/DropDownMenu.js index 1306e71..a24a5f4 100644 --- a/src/Components/DropDownMenu.js +++ b/src/Components/DropDownMenu.js @@ -5,14 +5,11 @@ import React, { useState, useEffect } from 'react'; import CheckBox from './CheckBox'; -const DropDownMenu = ({schemaData}) => { + +const DropDownMenu = ({schemaData, uriData}) => { const [ clicked, setClicked ] = useState([]); const addCheckmark = (item) => { - // pass onClick into - // when clicked it will add specific schema to send to backend - // send data to state - // const schemaNames = Object.keys(schemaData);// [users, conversations] let clickedSchema = item.target.name; @@ -27,10 +24,6 @@ const DropDownMenu = ({schemaData}) => { setClicked([...clicked, clickedSchema]); } } - //To-Do - // when the add schema button is clicked, we will need to send the schema name to the backend so they can send the schema to the frontend. - // create a function that matches the checked schema names with the key that is in the schemaData object and sends back the object to the backend! - // YAY CHO!!! yaaassss!! <3 const checkHandler = e => { const schemaNames = Object.keys(schemaData); @@ -42,7 +35,30 @@ const DropDownMenu = ({schemaData}) => { const sendSchemas = (e) => { console.log('clicked array',clicked); - } + console.log('SchemaData is', schemaData); + + //sending obj data to backend + let selectedSchemas = {}; + for(let i = 0; i < clicked.length; i+=1) { + selectedSchemas[clicked[i]] = schemaData[clicked[i]]; + } + console.log('selectedSchemas is ', selectedSchemas) + + // fetch to the backend + + fetch('http://localhost:3000/selectedSchemas', { + method: 'POST', + headers: { 'Content-Type': 'application/json'}, + body: JSON.stringify({selectedSchemas, uriData}), + }) + .then(res => res.json()) + .then(data => { + console.log('selectedSchemas successfully sent to the backend', data); + }) + .catch((error) => { + console.log('Error', error); + }) + } const checkBoxComponents = []; diff --git a/src/Components/MongoDBURI.js b/src/Components/MongoDBURI.js index d8c3660..ef4e822 100644 --- a/src/Components/MongoDBURI.js +++ b/src/Components/MongoDBURI.js @@ -4,8 +4,9 @@ import DropDownMenu from "./DropDownMenu"; // input field for the mongoDB uri const MongoDBURI = () => { const [schemaData, setSchemaData] = useState({}); + const [uriId, setUriId] = useState(''); - const submit = (e) => { + const submit = (e) => {I e.preventDefault() console.log('submit worked') fetch('http://localhost:3000/getURI', { @@ -23,17 +24,22 @@ const MongoDBURI = () => { .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 (
- +
- +
) }