Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated functionality #8

Merged
merged 2 commits into from
Feb 6, 2021
Merged

Updated functionality #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05277ec
When schemas been unchecked and addSelectedSchema button has been cli…
Feb 5, 2021
62e15ec
grab uri and send to backend, remove schema from selectedSchem
Feb 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions server/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
178 changes: 101 additions & 77 deletions src/Components/DropDownMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,87 +5,60 @@
import React, { useState, useEffect } from 'react';
import CheckBox from './CheckBox';

const DropDownMenu = ({schemaData}) => {
const [ clicked, setClicked ] = useState([]);

const addCheckmark = (e) => {
// 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]

const DropDownMenu = ({schemaData, uriData}) => {
const [ clicked, setClicked ] = useState([]);

//The filter() method creates a new array with all elements that pass the test implemented by the provided function.
const addCheckmark = (item) => {

// array.reduce ( (resultArr, currVal) => {
// if currVal === clickedSchema {
// resultArr.push(clickedSchema)
// }
// }, [] )
let clickedSchema = item.target.name;

// 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);
// })
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]);
}
}

// )
// console.log('clicked array being filtered', clicked)
// }
const checkHandler = e => {
const schemaNames = Object.keys(schemaData);
const tools = props.schemaNames.clicked; //Array in parent component
const value = e.target.value; //Checkbox value

// console.log('clicked', clicked);
// console.log(schemaData.users);
// if the box is unchecked
console.log('checked', e.target.checked);

}
props.addCheckmark(value);
};

const sendSchemas = (e) => {
console.log('clicked array',clicked);
}




//create onclick function, if clicked, add this key, to state
console.log('SchemaData is', schemaData);

// schemaData = {
// users: {

// },
// conversations: {

// }
// }
//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 = [];

Expand All @@ -94,9 +67,6 @@ const DropDownMenu = ({schemaData}) => {
<CheckBox name={key} key={`checkbox${key}`} clicked={addCheckmark} />
)
}
// with a for loop
//


return(
<div>
Expand All @@ -121,11 +91,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
Expand All @@ -151,4 +126,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
// 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);
12 changes: 9 additions & 3 deletions src/Components/MongoDBURI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -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 (
<div className="formContainer">
<div>
<form>
<input type="text" placeholder="enter MongoDBURI ..."/>
<input type="text" placeholder="enter MongoDBURI ..." onChange= {getUri}/>
<input className="URISubmitButton" type="submit" value="Submit" onClick={submit}/>
</form>
</div>
<DropDownMenu schemaData={schemaData} />
<DropDownMenu schemaData={schemaData} uriData={uriId} />
</div>
)
}
Expand Down