First dog displayed no longer requires 2 clicks

joshjnunez · Aug 19, 2020 · 7245424 · 7245424
1 parent 056b51b
commit 7245424
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git a/client/component/App.jsx b/client/component/App.jsx
@@ -20,7 +20,6 @@ function App(props) {
    const [ displayDogs, setDisplayDogs ] = useState('');
    const [ friends, setFriends ] = useState('');
    const [ index, setIndex ] = useState(0);
-   const [ dogDisplayInfo, setDogDisplayInfo ] = useState('');
    const [ filter, setFilter ] = useState(0);
 
    useEffect(() => {
@@ -49,7 +48,7 @@ function App(props) {
          let dogs = response.data;
          setAllDogs(dogs);
          setDisplayDogs(dogs);
-         setDogDisplayInfo(dogs[0]);
+         // setDogDisplayInfo(dogs[index]);
          return dogs;
       })
       .then((dogs) => {
@@ -128,7 +127,11 @@ function App(props) {
          <Sidebar sessUser={sessUser} sessDog={sessDog} getFriends={getFriends} allDogs={allDogs} />
          <div className='App'>
             <Switch>
-               <Route exact={true} path="/" render={() => (<Choice open={open} sessUser={sessUser} sessDog={sessDog} dogViews={dogViews} displayDogs={displayDogs} getFriends={getFriends} index={index} setIndex={setIndex} dogDisplayInfo={dogDisplayInfo} setDogDisplayInfo={setDogDisplayInfo} />)} />
+               <Route exact={true} path="/" render={() => {
+                  if (displayDogs.length) {
+                     return <Choice open={open} sessUser={sessUser} sessDog={sessDog} dogViews={dogViews} displayDogs={displayDogs} getFriends={getFriends} index={index} setIndex={setIndex} />
+                  }
+               } } />
                <Route exact path="/login" render={() => (<Login />)} />
                <Route path="/myprofile" render={() => (<MyProfile open={open} sessUser={sessUser} sessDog={sessDog} />)} />
                <Route path="/dogprofile" render={() => (<DogProfile open={open} sessUser={sessUser} sessDog={sessDog} allDogs={allDogs} friends={friends} getFriends={getFriends} />)} />

diff --git a/client/component/Choice.jsx b/client/component/Choice.jsx
@@ -3,45 +3,55 @@ import { Link, Route } from 'react-router-dom';
 import axios from 'axios';
 import { Row, Col } from "react-bootstrap";
 
-function Choice({ open, sessUser, sessDog, dogViews, displayDogs, getFriends, index, setIndex, dogDisplayInfo, setDogDisplayInfo }) {
+function Choice({ open, sessUser, sessDog, dogViews, displayDogs, getFriends, index, setIndex }) {
 
   const [ dogDisplay, setDogDisplay ] = useState('');
+  const [ dogDisplayInfo, setDogDisplayInfo ] = useState('');
 
   useEffect(() => {
-    setDogDisplay(dogViews[0]);
-  }, [dogViews]);
+    // console.log('the current index', index)
+    setDogDisplayInfo(displayDogs[index])
+    setDogDisplay(dogViews[index]);
+  }, [dogViews, displayDogs]);
+
+
+  // useEffect(() => {
+
+  //   console.log('the url', url)
+  // }, [])
 
   const like = (result) => {
+    const newIndex = index + 1;
     // axios.post('/like', {
-    //   result, // boolean true/false
-    //   dogOwnerId: allDogs[index].id_user,
-    //   userId: 'placeholder for current logged in User ID'
-    // })
-    // .then((response) => {
-    //   // response should have bool if user was a match (if exists an entry in likes table that shows the dogOwnerID liked current user ID)
-    // })
-    setIndex(index + 1);
-    if (index < dogViews.length) {
-      setDogDisplay(() => dogViews[index]);
-      setDogDisplayInfo(displayDogs[index]);
-    } else {
-      setDogDisplay(<div id='choice-box'><div id='alt'>Looks like you've made it through all the dogs in you're area. Please check back later.</div></div>);
-    }
-  };
-
-  // const addFriend = () => {
-  //   axios.post('/friends',  {
-  //     id_dog: sessDog.id,
-  //     id_friend: dogDisplayInfo.id,
-  //     bool_friend: 0
-  //   })
-  //   .then(() => dislike())
-  //   .then(() => console.log('this friend was added'))
-  //   .catch((err) => console.error(err, 'we couldn\'t add this friend'));
-  // };
+      //   result, // boolean true/false
+      //   dogOwnerId: allDogs[index].id_user,
+      //   userId: 'placeholder for current logged in User ID'
+      // })
+      // .then((response) => {
+        //   // response should have bool if user was a match (if exists an entry in likes table that shows the dogOwnerID liked current user ID)
+        // })
+        setIndex(newIndex);
+        if (newIndex < dogViews.length) {
+          setDogDisplay(() => dogViews[newIndex]);
+          setDogDisplayInfo(displayDogs[newIndex]);
+        } else {
+          setDogDisplay(<div id='choice-box'><div id='alt'>Looks like you've made it through all the dogs in you're area. Please check back later.</div></div>);
+        }
+      };
 
-  return (
-    <div>
+      // const addFriend = () => {
+        //   axios.post('/friends',  {
+          //     id_dog: sessDog.id,
+          //     id_friend: dogDisplayInfo.id,
+          //     bool_friend: 0
+          //   })
+          //   .then(() => dislike())
+          //   .then(() => console.log('this friend was added'))
+          //   .catch((err) => console.error(err, 'we couldn\'t add this friend'));
+          // };
+
+          return (
+            <div>
       <div>
         <Row>
           <button id='settings' onClick={open}>Menu</button>