in class code react day 3

40-react-part-3/instructor/film-library/src/App.js

@@ -1,12 +1,33 @@
-import React from 'react';
+import React, {useState} from 'react';
 import FilmList from './FilmListing'
 
 const App = () => {
+  const [faves, setFaves] = useState([])
+
+  const onFaveToggle = (film) => {
+    // console.log(film)
+    console.log('faves' , faves)
+    const filmIndex = faves.indexOf(film)
+    const favesCopy = faves.slice();
+    if(faves.includes(film)){
+      // console.log("already inside faves list")
+      favesCopy.splice(filmIndex, 1)
+      setFaves(favesCopy);
+    } else {
+      console.log(`lets add it in, ${film.title}`)
+      // favesCopy.push(film)
+      // favesCopy.push(film)
+      setFaves([...favesCopy, film])
+    }
+
+     console.log('faves list', faves)
+
+  }
   return (
     <main className="film-library">\
     <div className="film-list">
       <h1 className="section-title"> Films</h1>
-      <FilmList />
+      <FilmList onFaveToggle={onFaveToggle} faves={faves}/>
     </div>
 
     <div className="film-details">

40-react-part-3/instructor/film-library/src/Faves.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Faves = ({onFaveToggle}) => {
+
+    const handleClick = (event) => {
+        event.stopPropagation();
+
+        console.log(' Fave was clicked',);
+        onFaveToggle()
+    }
+    return (
+        <div className="film-row-fave add_to_queue" onClick={handleClick}>
+            <p className="material-icons"> add_to_que</p>
+        </div>
+    )
+}
+
+export default Faves

40-react-part-3/instructor/film-library/src/FilmListing.js

@@ -3,12 +3,29 @@ import TMDB from './TMDB';
 import FilmRow from './FilmRow';
 
 
-const FilmList = () => {
+const FilmList = ({ onFaveToggle, faves}) => {
+
+    const handleFilterClick  = () => {
+
+    }
+
+
+    const filmList = TMDB.films.map((film) => {
+       return( <FilmRow film={film}  key={film.id} onFaveToggle={onFaveToggle}  />)
+    })
+
     return (
         <div>
-            {TMDB.films.map((film) => {
-               return( <FilmRow film={film}  key={film.id} />)
-            })}
+            <h1> Films </h1>
+            <nav >
+                <button>
+                    All
+                </button>
+                <button>
+                    Faves
+                </button>
+            </nav>
+            {filmList}
         </div>
     )
 }

40-react-part-3/instructor/film-library/src/FilmRow.js

@@ -1,14 +1,20 @@
 import React from 'react';
+import Faves from './Faves';
 
+const FilmRow = ({film, onFaveToggle}) => {
 
-const FilmRow = ({film}) => {
+    const handleClick = (film) => {
+        console.log('film', film)
+        onFaveToggle(film)
+    }
     return (
-        <article className="filmRow">
+        <article className="film-row" onClick={() => console.log(`Show details for ${film.title}`)}>
             <img src={`https://image.tmdb.org/t/p/w780${film.poster_path}`}></img>
             <div className="film-summary">
                 <h1> {film.title}</h1>
                 <p>{new Date (film.release_date).getFullYear()}</p>
             </div>
+           <Faves onFaveToggle={() => handleClick(film)}/>
         </article>
     )
 }