added single item component for visited restaurants. Added filter for…

… visited vs to try

package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,17 +1,18 @@
 import './App.css';
 import AllEateriesContainer from './allEateriesContainer/allEateriesContainer';
 
+
 function App() {
   return (
     <div className="App">
 
       <nav id="not-logged-in-nav">
-        <button id="sign-up">Sign Up</button>
-        <button id="login">Login</button>
+        {/* <button id="sign-up">Sign Up</button>
+        <button id="login">Login</button> */}
       </nav>
       <h1 id="title">Welcome to Yummy Decisions</h1>
-
       <h3>(if user is logged in):Welcome -displayName-</h3>
+
       <AllEateriesContainer></AllEateriesContainer>
     </div>
   );

src/allEateriesContainer/allEateries.css

@@ -13,4 +13,18 @@ img{
 #two-lists{
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-gap:15px;
+}
+
+#bootstrap-example{
+    border: solid 3px black;
+    padding: 5px;
+    text-align: center;
+    height: 500px;
+    width: 500px;
+    overflow: scroll;
+    margin-top: 100px;
+    margin-left: auto;
+    margin-right: auto;
+
 }

src/allEateriesContainer/allEateriesContainer.jsx

@@ -1,13 +1,19 @@
 import { useState, useEffect } from "react";
+import {Container, Row, Col, Button, Alert, Breadcrumb, Form, Card} from 'react-bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
 import NewEateryComponent from "./newEateryComponent/newEateryComponent";
 import ToTryComponent from "./toTryComponent/toTryComponent";
 import VisitedComponent from "./visitedComponent/visitedComponent";
 import ('./allEateries.css')
 
+
+
 const AllEateriesContainer = () =>{
-    const [eateries, setEateries] = useState([{'name':'The Carvery', 'visited':true, 'cuisine':'american', 'img':'https://i.imgur.com/5CPHDIS.jpg', 'faveDish':'brie appetizer', 'notes':'sit outside', 'priceRange':2, 'user':'1'}, {'name':'The Carvery', 'visited':true, 'cuisine':'american', 'img':'https://i.imgur.com/5CPHDIS.jpg', 'faveDish':'brie appetizer', 'notes':'sit outside', 'priceRange':2, 'user':'1'}, {'name':'The Carvery', 'visited':true, 'cuisine':'american', 'img':'https://i.imgur.com/5CPHDIS.jpg', 'faveDish':'brie appetizer', 'notes':'sit outside', 'priceRange':2, 'user':'1'},{'name':'Heritage', 'visited':false, 'cuisine':'american', 'img':'https://i.imgur.com/TTMkE71.jpg', 'faveDish':'', 'notes':'tasting-menu', 'priceRange':2, 'user':'1'}, {'name':'Heritage', 'visited':false, 'cuisine':'american', 'img':'https://i.imgur.com/TTMkE71.jpg', 'faveDish':'', 'notes':'tasting-menu', 'priceRange':2, 'user':'1'}])
+    const [eateries, setEateries] = useState([])
+    const [visited, setVisited] = useState([])
+    const [toTry, setToTry] = useState ([])
 
-    // const [newEatery, setNewEatery] = useState()
+
     //create:
     const createNew = async (newPlace) =>{
         const createResponse = await fetch ('http://localhost:3001/restaurants',{
@@ -24,15 +30,127 @@ const AllEateriesContainer = () =>{
             console.log(parsedResponse.data)
         }
     }
+    //get all:
+    const getEateries = async ()=>{
+        try{
+            const eateries = await fetch ('http://localhost:3001/restaurants')
+            const parsedEateries = await eateries.json()
+            setEateries(parsedEateries.data)
+            // console.log(parsedEateries.data)
+        }catch(err){
+            console.log(err)
+        }
+
+    }
+    useEffect(getEateries, [])
+
+    //get visited:
+    const getVisited = async ()=>{
+        try{
+            const visited = await fetch ('http://localhost:3001/restaurants')
+            const parsedVisited = await visited.json()
+            const vPlaces = parsedVisited.data
+            // const visitedPlaces = [];
+            // for(let i=0; i<places.length; i++){
+            //     if(places[i].visited === true){
+            //         visitedPlaces.push(places[i])
+            //     }
+            // }
+            // setVisited(visitedPlaces)
+            // console.log(visitedPlaces)
+            const visistedPlaces = vPlaces.filter((place)=>{
+                return place.visited === true
+            })
+            setVisited(visistedPlaces)
+            console.log(visistedPlaces)
+        }catch(err){
+            console.log(err)
+        }
+
+    }
+    useEffect(getVisited, [])
+
+    //get to try:
+    const getToTry = async ()=>{
+        try{
+            const toTry = await fetch ('http://localhost:3001/restaurants')
+            const parsedToTry = await toTry.json()
+            const tPlaces = parsedToTry.data
+            const toTryPlaces = tPlaces.filter((place)=>{
+                return place.visited === false
+            })
+            setToTry(toTryPlaces)
+            // console.log(toTryPlaces)
+        }catch(err){
+            console.log(err)
+        }
+
+    }
+    useEffect(getToTry, [])
+
+    //edit:
+
+    //delete:
+
+
     return(
         <div id="all-eateries">
+            <NewEateryComponent createNew={createNew}></NewEateryComponent>
             <h1>My Mood:</h1>
-            <h3>gif? or image? pointing to one or the other?</h3>
+            <Button>Choose for me!</Button>
+            <h5>generates random choice from all restaurants db</h5>
             <section id="two-lists">
-                <NewEateryComponent createNew={createNew}></NewEateryComponent>
-                <VisitedComponent eateries={eateries}></VisitedComponent>
-                <ToTryComponent eateries={eateries}></ToTryComponent>
+                <VisitedComponent eateries={eateries} visited={visited}></VisitedComponent>
+                <ToTryComponent eateries={eateries} toTry={toTry}></ToTryComponent>
             </section>
+
+
+
+
+
+
+            <section id="bootstrap-example">
+        <Container>
+        <Form>
+          <Row>
+            {/* md makes columns responsive for smaller screen */}
+            <Col md>
+            <Form.Group controlId="formEmail">
+              <Form.Label>Email Address</Form.Label>
+              <Form.Control type="email" placeholder="[email protected]"></Form.Control>
+              <Form.Text className="text-muted">We'll never share your email address, trust!</Form.Text>
+          </Form.Group>
+
+            </Col>
+            <Col md>
+              <Form.Group>
+              <Form.Label>Password</Form.Label>
+              <Form.Control type="password" placeholder="Password"></Form.Control>
+            </Form.Group>
+            </Col>
+          </Row>
+
+          <Button variant="secondary" type="submit">Login</Button>
+        </Form>
+      <Card className="mb-3"style={{color:"#000"}}>
+          <Card.Img src="https://i.imgur.com/IsRaUa5.png/75/50" />
+          <Card.Body>
+            <Card.Title>Card Example</Card.Title>
+            <Card.Text>This is an ex of react bootstrap cards</Card.Text>
+            <Button variant="primary">Read More</Button>
+          </Card.Body>
+        </Card>
+        <Breadcrumb>
+        <Breadcrumb.Item>Test</Breadcrumb.Item>
+        <Breadcrumb.Item>Test 2</Breadcrumb.Item>
+        <Breadcrumb.Item active>Test 3</Breadcrumb.Item>
+        </Breadcrumb>
+        <Alert variant="success">This is a button</Alert>
+        <Button>Test Button</Button>
+        </Container>
+
+
+      </section>
 
         </div>
     )

src/allEateriesContainer/newEateryComponent/newEateryComponent.jsx

@@ -4,13 +4,12 @@ const NewEateryComponent = (props) =>{
     //state of new item before user inputs changes
     const [newPlace, setNewplace] = useState({
         name:'',
-        visited: false,
+        visited: true,
         cuisine: '',
         img: 'https://i.imgur.com/IsRaUa5.png',
         faveDish:'',
         notes:'',
-        priceRange: 1,
-        user:1
+        priceLevel: "$"
     })
     const [showing, setShowing] = useState(false)
     //funciton for toggleShow
@@ -38,55 +37,55 @@ const NewEateryComponent = (props) =>{
             <form onSubmit={submitNew} encType="multipart/form-data">
                 <div className="form-row">
                     <label htmlFor="name">Restaurant Name:</label>
-                    <input type="text" name="name" required></input>
+                    <input onChange ={inputChange} type="text" name="name" value={newPlace.name}></input>
                 </div>
 
                 <div className="form-row">
                     <label htmlFor="name">Cuisine:</label>
-                    <input type="text" name="cuisine"></input>
+                    <input onChange ={inputChange}type="text" name="cuisine" value={newPlace.cuisine}></input>
                 </div>
 
                 <div className="form-row">
                     <label htmlFor="name">Photo:</label>
-                    <input type="file" name="img" accept="image/png, image/jpeg"></input>
+                    <input onChange ={inputChange} type="text" name="img" value={newPlace.img}accept="image/png, image/jpeg"></input>
                 </div>
                 <div className="form-row">
                     {/* <label htmlFor="name">Favorite Dish:</label>
-                    <input type="text" name="faveDish"></input> */}
+                    <input onChange ={inputChange}type="text" name="faveDish"></input> */}
                 </div>
 
                 <div className="form-row"> 
                     <label htmlFor="name">Notes:</label>
-                    <input type="text" name="notes"></input>
+                    <input onChange ={inputChange} type="text" name="notes"value={newPlace.notes}></input>
                 </div>
 
                 <div className="form-row">
                         <label htmlFor="price-level">Price:</label>
                         <div className="radio-row-container">
                             <div className="radio-option-container">
-                                <input type="radio" name="priceLevel" value="$"></input>
+                                <input onChange ={inputChange} type="radio" name="priceLevel" value={newPlace.priceLevel}></input>
                                 <label htmlFor="price-level-one">$</label>
                             </div>
                             <div className="radio-option-container">
-                                <input type="radio" name="priceLevel" value="$$"></input>
-                                <label htmlFor="price-level-two">$$</label>
+                                <input type="radio" name="priceLevel" value={newPlace.priceLevel}></input>
+                                <label onChange ={inputChange} htmlFor="price-level-two">$$</label>
                             </div>
                             <div className="radio-option-container">
-                                <input type="radio" name="priceLevel" value="$$$"></input>
+                                <input onChange ={inputChange} type="radio" name="priceLevel" value={newPlace.priceLevel}></input>
                                 <label htmlFor="price-level-three">$$$</label>
                             </div>
                         </div>
                 </div>
 
                 <div className="form-row">
-                        <label for="visited">Visited:</label>
+                        <label htmlFor="visited">Visited:</label>
                         <div className="radio-row-container">
                             <div className="radio-option-container">
-                                <input type="radio" name="visited" value="true"></input>
+                                <input onChange ={inputChange} type="radio" name="visited" value={newPlace.visited}></input>
                                 <label htmlFor="visited-yes">Yes</label>
                             </div>
                             <div className="radio-option-container">
-                                <input type="radio" name="visited" value="false"></input>
+                                <input onChange ={inputChange} type="radio" name="visited" value={newPlace.visited}></input>
                                 <label htmlFor="visited-no">No</label>
                             </div>
                         </div>

src/allEateriesContainer/toTryComponent/toTryComponent.jsx

@@ -4,7 +4,7 @@ import ('./toTry.css')
 
 const ToTryComponent = (props) =>{
 
-    const [toTry, setToTry] = useState([{'name':'Heritage', 'visited':false, 'cuisine':'american', 'img':'https://i.imgur.com/TTMkE71.jpg', 'faveDish':'', 'notes':'tasting-menu', 'priceRange':2, 'user':'1'}, {'name':'Heritage', 'visited':false, 'cuisine':'american', 'img':'https://i.imgur.com/TTMkE71.jpg', 'faveDish':'', 'notes':'tasting-menu', 'priceRange':2, 'user':'1'}])
+    const [toTry, setToTry] = useState([])
 
     return(
         <div id="to-try">

src/allEateriesContainer/visitedComponent/singleVisitedComponent/singleVisitedComponent.jsx

@@ -0,0 +1,9 @@
+const SingleVisitedComponent = (props)=>{
+    return(
+        <div id="single-visited">
+            <h3>{props.vPlace.name}</h3>
+        </div>
+    )
+}
+
+export default SingleVisitedComponent

src/allEateriesContainer/visitedComponent/visited.css

@@ -1,3 +1,5 @@
-#visited-list-array{
+#visited-list{
     border: solid 2px orange;
+    width: auto;
+    height: 350px
 }

src/allEateriesContainer/visitedComponent/visitedComponent.jsx

@@ -1,23 +1,29 @@
 import { useState } from "react";
-import VisitedListComponent from "./visitedListComponent/visitedListComponent";
+import SingleVisitedComponent from "./singleVisitedComponent/singleVisitedComponent";
 import ('./visited.css')
 
 
 const VisitedComponent = (props) =>{
-    const [triedPlaces, setTriedPlaces] = useState([])
-    const getTried =()=>{
-        for(let i=0; i<props.eateries.length; i++){
-            const triedPlaces = [];
-            if(props.eateries[i].visited === true){
-                triedPlaces.push(props.eateries[i])
-            }
-        }
-        setTriedPlaces(triedPlaces)
-    }
+    // //get all eateries from parent allEateriesComponent
+    // //then pass that property into a for loop to make a new array of triedPlaces
+    // //pass triedPlaces to list to .map those tried?
+    // const [triedPlaces, setTriedPlaces] = useState([])
+    // const getTried =()=>{
+    //     for(let i=0; i<props.eateries.length; i++){
+    //         const triedPlaces = [];
+    //         if(props.eateries[i].visited === true){
+    //             triedPlaces.push(props.eateries[i])
+    //         }
+    //     }
+    //     setTriedPlaces(triedPlaces)
+    // }
     return(
-        <div id="visited-list-array">
+        <div id="visited-list">
             <h3>Tried & True!</h3>
-            <VisitedListComponent getTried={getTried} triedPlaces={triedPlaces}></VisitedListComponent>
+            { props.visited.map((v)=>{
+                <SingleVisitedComponent key={v._id} vPlace={v}></SingleVisitedComponent>
+            })}
+
         </div>
     )
 }