Snow comment and reviewmanu

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,29 +16,46 @@ 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 => {
             setReviews(res);
         })
     }, []);
 
-
     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) {
         <div onClick={() => setIsFocused()} className="exit-focus">X</div>
         <div className="review-container">
             { 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 <Review
                     drinks={drinks}
                     food={food}
@@ -66,7 +85,10 @@ export default function FocusedShop(props) {
                     wifi={wifi}
                     username={username}
                     key={_id}
+                    _id={_id}
+                    shopId={shopId}
                     currentUser={currentUser}
+                    comment={comment}
                 />
             })}
         </div>
@@ -138,11 +160,11 @@ export default function FocusedShop(props) {
                     <span onClick={() => setAddReview(Object.assign({}, {...addReview}, {wifi: 2}))} className={addReview.wifi >= 2 ? 'fa fa-star checked' : 'fa fa-star star'}></span>
                     <span onClick={() => setAddReview(Object.assign({}, {...addReview}, {wifi: 3}))} className={addReview.wifi >= 3 ? 'fa fa-star checked' : 'fa fa-star star'}></span>
                     <span onClick={() => setAddReview(Object.assign({}, {...addReview}, {wifi: 4}))} className={addReview.wifi >= 4 ? 'fa fa-star checked' : 'fa fa-star star'}></span>
-                    <span onClick={() => setAddReview(Object.assign({}, {...addReview}, {wifi: 5}))}className={addReview.wifi >= 5 ? 'fa fa-star checked' : 'fa fa-star star'}></span>
+                    <span onClick={() => setAddReview(Object.assign({}, {...addReview}, {wifi: 5}))} className={addReview.wifi >= 5 ? 'fa fa-star checked' : 'fa fa-star star'}></span>
                 </div>
             </div>
             <br/>
-            <textarea  type="text" placeholder='Leave a comment here!'/>
+            <textarea  type="text" id='commentInput' onChange={(e) => {changeReviewState(e)}} placeholder='Leave a comment here!'/>
             <button className='addReview-btn' onClick={() => handleAddReviewClick()}>Add Review</button>
         </div>
     </div>

client/components/Review.jsx

@@ -1,18 +1,61 @@
-import React from 'react';
+import React, { useState } from 'react';
 import '../stylesheets/review.css';
 
 export default function Review(props) {
-  const { drinks, food, outlets, parking, sound, space, wifi, username } = props;
-
+  const { drinks, food, outlets, parking, sound, space, wifi, username, comment, _id, shopId } = props;
+  const [editable, setEditable] = useState(false);
+  // const [] =  useState();
+
+  const commentArea = () => {
+    if(editable) return(
+      <textarea>
+      </textarea>
+    )
+    else return (<div id='comment'>
+                  {comment}
+                 </div>);
+  }
+  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 (
     <div className='review-container'>
+      <div className="structure-container">
         <div className="review">
-          {Object.keys(props).map(prop => {
+          {Object.keys({ drinks, food, outlets, parking, sound, space, wifi, username }).map(prop => {
             if(!['currentUser'].includes(prop)) return (<div className='review-grid-item'>{prop}: {props[prop]}</div>);
           })}
         </div>
-      {username === props.currentUser && <div><button className='delete-review-button'>Delete Review</button><button className='update-review-button'>Update Review</button></div>}
+        {commentArea()}
+        <div id="buttonsContainer">
+          {username === props.currentUser && 
+          <div>
+            <img src="public/edit.svg" style={{width:'2em', height:'2em',paddingBottom:'5px'}} onClick={() => {setEditable(true)}}></img>
+            <img src="public/trash.svg" style={{width:'2em', height:'2em'}} onClick={(e) => {handleDelete(e)}} />
+          </div>}
+        </div>
     </div>
+   </div>
 
   )
 }

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}

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 <Shop 
                  drinks={drinks}
                  food={food}
@@ -43,7 +44,7 @@ const ShopList = props => {
                  sound={sound}
                  space={space}
                  wifi={wifi}
-                 _id={_id}
+                 shopId={_id}
                  key={`shop${_id}`}
                  fetchShopMatches={fetchShopMatches}
                 currentUser = {username}

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; */
 
+}