diff --git a/client/components/FocusedShop.jsx b/client/components/FocusedShop.jsx index d993cec..e612eb8 100644 --- a/client/components/FocusedShop.jsx +++ b/client/components/FocusedShop.jsx @@ -5,9 +5,9 @@ import '../stylesheets/focusedshop.css'; export default function FocusedShop(props) { const [reviews, setReviews] = useState([]); - const { drinks, food, shopname, outlets, parking, sound, space, wifi, _id, setIsFocused, fetchShopMatches, currentUser } = props; + const { drinks, food, shopname, outlets, parking, sound, space, wifi, shopId, setIsFocused, fetchShopMatches, currentUser } = props; const replacedName = shopname.replaceAll('"', '\''); - console.log("id ", _id) + console.log("id??????? ", shopId) const [ addReview, setAddReview ] = useState({ drinks: 0, food: 0, @@ -16,13 +16,31 @@ export default function FocusedShop(props) { sound: 0, space:0, wifi:0, - shopId: _id, - username: currentUser + shopId: shopId, + username: currentUser, + comment: '' }); + const resetReview = { + drinks: 0, + food: 0, + outlets: 0, + parking: 0, + sound: 0, + space:0, + wifi:0, + shopId: shopId, + username: currentUser, + comment: '' + } + + const changeReviewState = (e) => { + setAddReview(Object.assign({}, {...addReview}, {comment: e.target.value})); + + } useEffect(() => { - const query = `?shopId=${_id}`; + const query = `?shopId=${shopId}`; fetch(`/api/coffee/reviews/${query}`) .then(res => res.json()) .then(res => { @@ -30,15 +48,14 @@ export default function FocusedShop(props) { }) }, []); - const handleAddReviewClick = () => { - console.log(currentUser) const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(addReview) }; - const query = `?shopId=${_id}`; + + const query = `?shopId=${shopId}`; fetch(`/api/coffee/addreview/${query}`, requestOptions) .then(res => res.json()) .then(res => { @@ -47,6 +64,8 @@ export default function FocusedShop(props) { fetchShopMatches(); }) .catch(e => console.log(e)); + setAddReview(Object.assign({}, {...addReview}, {...resetReview})); + document.getElementById('commentInput').value = ''; } return ( @@ -55,7 +74,7 @@ export default function FocusedShop(props) {
setIsFocused()} className="exit-focus">X
{ reviews.map(review => { - const { drinks, food, username, outlets, parking, sound, space, wifi} = review; + const { _id, drinks, food, username, outlets, parking, sound, space, wifi, comment} = review; return })}
@@ -138,11 +160,11 @@ export default function FocusedShop(props) { setAddReview(Object.assign({}, {...addReview}, {wifi: 2}))} className={addReview.wifi >= 2 ? 'fa fa-star checked' : 'fa fa-star star'}> setAddReview(Object.assign({}, {...addReview}, {wifi: 3}))} className={addReview.wifi >= 3 ? 'fa fa-star checked' : 'fa fa-star star'}> setAddReview(Object.assign({}, {...addReview}, {wifi: 4}))} className={addReview.wifi >= 4 ? 'fa fa-star checked' : 'fa fa-star star'}> - setAddReview(Object.assign({}, {...addReview}, {wifi: 5}))}className={addReview.wifi >= 5 ? 'fa fa-star checked' : 'fa fa-star star'}> + setAddReview(Object.assign({}, {...addReview}, {wifi: 5}))} className={addReview.wifi >= 5 ? 'fa fa-star checked' : 'fa fa-star star'}>
- + ) + else return (
+ {comment} +
); + } + const handleDelete = (e) => { + // fetch delete to backend + e.preventDefault(); + console.log('delete clicked!') + console.log('id: ', _id) + const body = {drinks, food, outlets, parking, sound, space, wifi, username, comment, _id}; + fetch(`/api/coffee/deletereview/?shopId=${shopId}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(body) + }) + .then(data => { + e.target.parentElement.parentElement.parentElement.remove(); + }) + .catch(err => { + console.log('Something wrong with delete request', err); + }) + + // update the comment in state + // console.log(e.target.parentElement.parentElement); + } return (
+
- {Object.keys(props).map(prop => { + {Object.keys({ drinks, food, outlets, parking, sound, space, wifi, username }).map(prop => { if(!['currentUser'].includes(prop)) return (
{prop}: {props[prop]}
); })}
- {username === props.currentUser &&
} + {commentArea()} +
+ {username === props.currentUser && +
+ {setEditable(true)}}> + {handleDelete(e)}} /> +
} +
+
) } diff --git a/client/components/Shop.jsx b/client/components/Shop.jsx index 8169ac2..9c3e6c4 100644 --- a/client/components/Shop.jsx +++ b/client/components/Shop.jsx @@ -5,7 +5,7 @@ import '../stylesheets/shop.css' import FocusedShop from './FocusedShop'; export default function Shop(props) { - const { drinks, food, shopname, outlets, parking, sound, space, wifi, _id, fetchShopMatches, currentUser } = props; + const { drinks, food, shopname, outlets, parking, sound, space, wifi, shopId, fetchShopMatches, currentUser } = props; console.log(shopname); const replacedName = shopname.replaceAll('"', '\''); console.log('CurrentUser in Shop: ' + currentUser) @@ -35,8 +35,8 @@ export default function Shop(props) { sound={sound} space={space} wifi={wifi} - _id={_id} - key={`focusedShop${_id}`} + shopId={shopId} + key={`focusedShop${shopId}`} setIsFocused={setIsFocused} fetchShopMatches={fetchShopMatches} currentUser={currentUser} diff --git a/client/components/ShopList.jsx b/client/components/ShopList.jsx index 94d7ef2..ffed0df 100644 --- a/client/components/ShopList.jsx +++ b/client/components/ShopList.jsx @@ -34,6 +34,7 @@ const ShopList = props => { {matches.map((shop) => { //after backend updates db, should rename to shopname const { drinks, food, name:shopname, outlets, parking, sound, space, wifi, _id } = shop; + return { sound={sound} space={space} wifi={wifi} - _id={_id} + shopId={_id} key={`shop${_id}`} fetchShopMatches={fetchShopMatches} currentUser = {username} diff --git a/client/public/edit.jpeg b/client/public/edit.jpeg new file mode 100644 index 0000000..7848efc Binary files /dev/null and b/client/public/edit.jpeg differ diff --git a/client/public/edit.svg b/client/public/edit.svg new file mode 100644 index 0000000..9294758 --- /dev/null +++ b/client/public/edit.svg @@ -0,0 +1,14 @@ + + + + diff --git a/client/public/save.svg b/client/public/save.svg new file mode 100644 index 0000000..7d76e62 --- /dev/null +++ b/client/public/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/trash.svg b/client/public/trash.svg new file mode 100644 index 0000000..ee25c84 --- /dev/null +++ b/client/public/trash.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/stylesheets/review.css b/client/stylesheets/review.css index 5ea8503..eb50a04 100644 --- a/client/stylesheets/review.css +++ b/client/stylesheets/review.css @@ -4,22 +4,48 @@ } .review { - background-color: rgb(52, 52, 52); - border: 1px solid white; + color: white; - margin-bottom: 10px; display: grid; + width: 80%; grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr 1fr; + /* grid-template-columns: 2fr 2fr 2fr 1fr; */ + /* grid-template-areas: + "stars1 stars2 stars3 button1" + "stars4 stars5 stars6 button0" + "footer footer footer footer"; */ height: 100px; - font-size: 1.6em; + font-size: 1.5em; + float: left; + +} +.structure-container { + background-color: rgb(52, 52, 52); + overflow-y: scroll; + border: 1px solid white; + + width: 100%; + margin-bottom: 10px; + padding: 10px; } - .review-grid-item { display: flex; align-items: center; justify-content: flex-start; } +#comment { + color: white; + font-size: 1.4em; + float: left; +} +#buttonsContainer { + float: right; + width: 5%; + margin-top: 1em; + margin-right: 5em; + align-self: center; + /* border: 1px solid white; */ +} diff --git a/server/controllers/coffeeController.js b/server/controllers/coffeeController.js index 153f913..0ed2962 100644 --- a/server/controllers/coffeeController.js +++ b/server/controllers/coffeeController.js @@ -22,14 +22,10 @@ const coffeeController = {}; //controller for searching for coffeeshops by selected criteria coffeeController.searchShopsByCriteria = (req, res, next) => { console.log('searchShopsByCriteria'); - console.log('req.query ', req.query); - const { quality_meals, quality_drinks, space, sound, outlets, parking, wifi, name } = req.query; - let value1; - let selectShopsByCriteria; - - if (!name) { - value1 = [quality_meals, quality_drinks, space, sound, outlets, parking, wifi]; - selectShopsByCriteria = `SELECT * FROM shops + const { quality_meals, quality_drinks, space, sound, outlets, parking, wifi, shapname } = req.query; + + const value1 = [quality_meals, quality_drinks, space, sound, outlets, parking, wifi]; + const selectShopsByCriteria = `SELECT * FROM shops WHERE food >= $1 AND drinks >= $2 AND space >= $3 @@ -37,25 +33,39 @@ coffeeController.searchShopsByCriteria = (req, res, next) => { AND outlets >= $5 AND parking >= $6 AND wifi >= $7`; - } else { - value1 = [quality_meals, quality_drinks, space, sound, outlets, parking, wifi, name]; - selectShopsByCriteria = `SELECT * FROM shops - WHERE food >= $1 - AND drinks >= $2 - AND space >= $3 - AND sound >= $4 - AND outlets >= $5 - AND parking >= $6 - AND wifi >= $7 - AND name = $8`; - } + + // let value1; + // let selectShopsByCriteria; + + // if (!shopname) { + // value1 = [quality_meals, quality_drinks, space, sound, outlets, parking, wifi]; + // selectShopsByCriteria = `SELECT * FROM shops + // WHERE food >= $1 + // AND drinks >= $2 + // AND space >= $3 + // AND sound >= $4 + // AND outlets >= $5 + // AND parking >= $6 + // AND wifi >= $7`; + // } else { + // value1 = [quality_meals, quality_drinks, space, sound, outlets, parking, wifi, shopname]; + // selectShopsByCriteria = `SELECT * FROM shops + // WHERE food >= $1 + // AND drinks >= $2 + // AND space >= $3 + // AND sound >= $4 + // AND outlets >= $5 + // AND parking >= $6 + // AND wifi >= $7 + // AND name = $8`; + // } + // const test = 'SELECT * FROM spots' db.query(selectShopsByCriteria, value1) .then(response => { // console.log('response ',response) - console.log('response rows', response.rows) res.locals.readShops = response.rows; - // console.log(response.rows); + console.log(response.rows); return next(); }) .catch(err => { @@ -72,13 +82,11 @@ No longer need the searchByName feature //controller for searching for coffee shop by name //after searching by name, what renders, and what's the next click? coffeeController.searchShopsByName = (req, res, next) => { - console.log('searchShopsByNames invoked'); const { name } = req.query; const query = `SELECT name from shops WHERE shop_name=${name}`; db.query(query) .then(response => { - console.log('got the coffee shop you typed requested!'); res.locals.readShops = response.rows; return next(); }) @@ -96,12 +104,10 @@ coffeeController.searchShopsByName = (req, res, next) => { //and that one review will have update/delete buttons? coffeeController.readReviews = (req, res, next) => { const { shopId } = req.query; - console.log('readReviews executed'); Reviews.find({shopId}) .then((response) => { res.locals.reviews = response; /// correct response obj? - console.log('Got reviews!!'); return next(); }) .catch((err) => { @@ -149,13 +155,16 @@ coffeeController.addReview = (req, res, next) => { // } //instead of param queries, send JSON data with review ID and shop ID coffeeController.delReview = (req, res, next) => { + console.log('deleting review in coffeeController') const { _id } = req.body; - const { shopId } = req.query; - console.log("shopId: ", _id) + console.log('coffeeController ID ', _id) + // const {username} = req.body; + // console.log('delete review receives username',username) + // const { shopId } = req.query; + // console.log("shopId: ", _id) //delete review Reviews.findOneAndDelete({_id: _id}) .then(response => { - console.log('review deleted!') res.locals.deleted = response; console.log('deleted object ', response) res.locals.task = 'delete'; @@ -202,14 +211,11 @@ coffeeController.delReview = (req, res, next) => { coffeeController.updateReview = (req, res, next) => { - console.log('updating reviews..') // Reviews.find() //store old reviews const { _id, food, drinks, space, sound, outlets, parking, wifi, comment } = req.body; Reviews.findOneAndUpdate({ _id: _id }, { food: food, drinks: drinks, space: space, sound: sound, outlets: outlets, parking: parking, wifi: wifi, comment: comment }) .then(response => { - console.log('Review updated') res.locals.original = response; - console.log('updated original ', res.locals.original) res.locals.task = 'update'; return next(); }) @@ -234,7 +240,6 @@ coffeeController.updateReview = (req, res, next) => { //thisError occurred while proxying request localhost:8080 controller has to include recalculating averages, updating values in the spots table coffeeController.updateAve = async (req, res, next) => { - console.log('updateAve invoked'); // const { shopId, food, drinks, space, sound, outlets, parking, wifi } = req.body; const text = `SELECT * from shops WHERE _id = $1`; @@ -242,19 +247,15 @@ coffeeController.updateAve = async (req, res, next) => { const newAveValues = {}; // { name: starbucks, food_avg: 2, drinks_avg: 3} const queryResponse = await db.query(text, value); // [{ name: starbucks, food_avg: 2, drinks_avg: 3, reviewCount: 120}] - console.log('req.query ', req.query) const queryRows = queryResponse.rows[0]; - console.log('queryReponse:', queryRows); let reviews = queryRows.reviewcount; if (res.locals.task === 'delete') { - console.log('deleted average') for (const [key, value] of Object.entries(queryRows)) { if(!['reviewcount', '_id', 'name'].includes(key)) { newAveValues[key] = (value * queryRows.reviewcount - req.body[key]) / (queryRows.reviewcount - 1) //res.locals.deleted[key] } - // console.log('mapped ave values ', newAveValues) } reviews = queryRows.reviewcount - 1; } else if (res.locals.task === 'add') { @@ -264,7 +265,6 @@ coffeeController.updateAve = async (req, res, next) => { } } reviews = queryRows.reviewcount + 1; - console.log('total reviews ', reviews) } else if (res.locals.task === 'update') { for (const [key, value] of Object.entries(queryRows)) { if (!['reviewcount', '_id', 'name'].includes(key)) { @@ -275,14 +275,11 @@ coffeeController.updateAve = async (req, res, next) => { } - console.log('newAveValues: ', newAveValues); const query = 'UPDATE shops SET food=$2, drinks=$3, space=$4, sound=$5, outlets=$6, parking=$7, wifi=$8, reviewcount=$9 WHERE _id=$1;'; const values = [req.query.shopId, newAveValues.food, newAveValues.drinks, newAveValues.space, newAveValues.sound, newAveValues.outlets, newAveValues.parking, newAveValues.wifi, reviews]; - // console.log('values array: ', values); db.query(query, values) .then(response => { - console.log('add new ave response ', response) next() }) .catch(err => {