Skip to content

Commit

Permalink
Merge pull request oslabs-beta#8 from choyeewinag/main
Browse files Browse the repository at this point in the history 
Updated functionality
  • Loading branch information
@Judanator
Judanator authored Feb 6, 2021
2 parents dfac2bc + 62e15ec commit 065219d
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 80 deletions.
12 changes: 12 additions & 0 deletions server/server.js
View file
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
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
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

0 comments on commit 065219d

Please sign in to comment.