From 0264c4a4a7d4e869f09328b3fd0f46b875ea6b2f Mon Sep 17 00:00:00 2001
From: Paul Diaz <jonesalogan00@gmail.com>
Date: Tue, 25 Oct 2022 12:58:01 -0500
Subject: [PATCH] Sort by genre, not done yet.

---
 .../src/components/SelectGenre.jsx            | 12 +++-
 lipscombplus-ui/src/pages/Chapels.jsx         |  6 +-
 lipscombplus-ui/src/pages/Concerts.jsx        | 16 ++++--
 lipscombplus-ui/src/pages/Events.jsx          | 56 ++++++++++---------
 lipscombplus-ui/src/pages/Netflix.jsx         |  9 ---
 lipscombplus-ui/src/pages/Sports.jsx          | 55 +++++++++---------
 lipscombplus-ui/src/store/index.js            | 17 +++++-
 7 files changed, 99 insertions(+), 72 deletions(-)
 delete mode 100644 lipscombplus-ui/src/pages/Netflix.jsx

diff --git a/lipscombplus-ui/src/components/SelectGenre.jsx b/lipscombplus-ui/src/components/SelectGenre.jsx
index 19b7130..90f0cd2 100644
--- a/lipscombplus-ui/src/components/SelectGenre.jsx
+++ b/lipscombplus-ui/src/components/SelectGenre.jsx
@@ -1,9 +1,15 @@
 import React from 'react'
 import styled from "styled-components"
+import { useDispatch } from 'react-redux';
+import { fetchDataByGenre } from '../store';
+
+export default function SelectGenre({genres, type}) {
+  const dispatch = useDispatch();
 
-export default function SelectGenre(genres, type) {
   return (
-    <Select>
+    <Select className='flex' onChange={e => {
+      dispatch(fetchDataByGenre({genre: e.target.value}))
+    }}>
         {genres.map((genre) => {
             return (
                 <option value={genre.id} key={genre.id}>
@@ -14,3 +20,5 @@ export default function SelectGenre(genres, type) {
     </Select>
   )
 }
+
+const Select = styled.select``;
\ No newline at end of file
diff --git a/lipscombplus-ui/src/pages/Chapels.jsx b/lipscombplus-ui/src/pages/Chapels.jsx
index 6e11e3e..734471b 100644
--- a/lipscombplus-ui/src/pages/Chapels.jsx
+++ b/lipscombplus-ui/src/pages/Chapels.jsx
@@ -8,14 +8,15 @@ import styled from 'styled-components'
 import Navbar from '../components/Navbar';
 import Slider from '../components/Slider';
 import NotAvailable from '../components/NotAvailable';
+import SelectGenre from '../components/SelectGenre';
 
 export default function Chapels() {
 const [isScrolled, setIsScrolled] = useState(false);
 
 
-  //remove lines 16-28 when getting rid of dummy data
   const genresLoaded = useSelector((state) => state.lipscombplus.genresLoaded)
   const movies = useSelector((state) => state.lipscombplus.movies)
+  //will need to change how genres are served | currently being served via TMBD api
   const genres = useSelector((state) => state.lipscombplus.genres)
 
   const navigate = useNavigate();
@@ -27,7 +28,7 @@ const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     if(genresLoaded) dispatch(fetchMovies({type: "all"}))
-  }) 
+  }, []) 
 
  window.onscroll = () => {
    setIsScrolled(window.pageYOffset===0?false:true);
@@ -43,6 +44,7 @@ const [isScrolled, setIsScrolled] = useState(false);
         <Navbar isScrolled={isScrolled}/>
         </div>
         <div className="data">
+        <SelectGenre genres={genres} type="movie" />
             {
                 movies.length ? <Slider movies={movies}/> : <NotAvailable/>
             }
diff --git a/lipscombplus-ui/src/pages/Concerts.jsx b/lipscombplus-ui/src/pages/Concerts.jsx
index 3ad1715..c2219fc 100644
--- a/lipscombplus-ui/src/pages/Concerts.jsx
+++ b/lipscombplus-ui/src/pages/Concerts.jsx
@@ -8,14 +8,17 @@ import styled from 'styled-components'
 import Navbar from '../components/Navbar';
 import Slider from '../components/Slider';
 import NotAvailable from '../components/NotAvailable';
+import SelectGenre from '../components/SelectGenre';
 
 export default function Concerts() {
-const [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
 
-  //remove lines 16-28 when getting rid of dummy data
   const genresLoaded = useSelector((state) => state.lipscombplus.genresLoaded)
   const movies = useSelector((state) => state.lipscombplus.movies)
+  //will need to change how genres are served | currently being served via TMBD api
+  const genres = useSelector((state) => state.lipscombplus.genres)
+
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
@@ -24,7 +27,7 @@ const [isScrolled, setIsScrolled] = useState(false);
   },[]) 
 
   useEffect(() => {
-    if(genresLoaded) dispatch(fetchMovies({type: "all"}))
+    if(genresLoaded) dispatch(fetchMovies({type: "movies"}))
   }) 
 
  window.onscroll = () => {
@@ -33,14 +36,15 @@ const [isScrolled, setIsScrolled] = useState(false);
  }
 
  onAuthStateChanged(firebaseAuth,(currentUser)=> {
-    // if(currentUser) navigate("/"); //TODO: may want to add 2FA
- })
- return (
+   // if(currentUser) navigate("/"); //TODO: may want to add 2FA
+})
+  return (
     <Container>
         <div className="navbar">
         <Navbar isScrolled={isScrolled}/>
         </div>
         <div className="data">
+        <SelectGenre genres={genres} type="movie" />
             {
                 movies.length ? <Slider movies={movies}/> : <NotAvailable/>
             }
diff --git a/lipscombplus-ui/src/pages/Events.jsx b/lipscombplus-ui/src/pages/Events.jsx
index 4a647e0..8e80b45 100644
--- a/lipscombplus-ui/src/pages/Events.jsx
+++ b/lipscombplus-ui/src/pages/Events.jsx
@@ -8,39 +8,43 @@ import styled from 'styled-components'
 import Navbar from '../components/Navbar';
 import Slider from '../components/Slider';
 import NotAvailable from '../components/NotAvailable';
+import SelectGenre from '../components/SelectGenre';
 
 export default function Events() {
-    const [isScrolled, setIsScrolled] = useState(false);
-
-
-    //remove lines 16-28 when getting rid of dummy data
-    const genresLoaded = useSelector((state) => state.lipscombplus.genresLoaded)
-    const movies = useSelector((state) => state.lipscombplus.movies)
-    const navigate = useNavigate();
-    const dispatch = useDispatch();
-  
-    useEffect(() => {
-      dispatch(getGenres())
-    },[]) 
-  
-    useEffect(() => {
-      if(genresLoaded) dispatch(fetchMovies({type: "all"}))
-    }) 
-  
-   window.onscroll = () => {
-     setIsScrolled(window.pageYOffset===0?false:true);
-     return () => (window.onscroll = null)
-   }
-
-   onAuthStateChanged(firebaseAuth,(currentUser)=> {
-    // if(currentUser) navigate("/"); //TODO: may want to add 2FA
- })
-   return (
+  const [isScrolled, setIsScrolled] = useState(false);
+
+
+  const genresLoaded = useSelector((state) => state.lipscombplus.genresLoaded)
+  const movies = useSelector((state) => state.lipscombplus.movies)
+  //will need to change how genres are served | currently being served via TMBD api
+  const genres = useSelector((state) => state.lipscombplus.genres)
+
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getGenres())
+  },[]) 
+
+  useEffect(() => {
+    if(genresLoaded) dispatch(fetchMovies({type: "movies"}))
+  }) 
+
+ window.onscroll = () => {
+   setIsScrolled(window.pageYOffset===0?false:true);
+   return () => (window.onscroll = null)
+ }
+
+ onAuthStateChanged(firebaseAuth,(currentUser)=> {
+   // if(currentUser) navigate("/"); //TODO: may want to add 2FA
+})
+  return (
     <Container>
         <div className="navbar">
         <Navbar isScrolled={isScrolled}/>
         </div>
         <div className="data">
+        <SelectGenre genres={genres} type="movie" />
             {
                 movies.length ? <Slider movies={movies}/> : <NotAvailable/>
             }
diff --git a/lipscombplus-ui/src/pages/Netflix.jsx b/lipscombplus-ui/src/pages/Netflix.jsx
deleted file mode 100644
index ef77b9e..0000000
--- a/lipscombplus-ui/src/pages/Netflix.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { useState } from 'react'
-
-export default function Netflix() {
-
-  useState()
-  return (
-    <div>Netflix</div>
-  )
-}
diff --git a/lipscombplus-ui/src/pages/Sports.jsx b/lipscombplus-ui/src/pages/Sports.jsx
index 8871ddb..e2987fe 100644
--- a/lipscombplus-ui/src/pages/Sports.jsx
+++ b/lipscombplus-ui/src/pages/Sports.jsx
@@ -8,40 +8,43 @@ import styled from 'styled-components'
 import Navbar from '../components/Navbar';
 import Slider from '../components/Slider';
 import NotAvailable from '../components/NotAvailable';
+import SelectGenre from '../components/SelectGenre';
 
 export default function Sports() {
-    const [isScrolled, setIsScrolled] = useState(false);
-
-
-    //remove lines 16-28 when getting rid of dummy data
-    const genresLoaded = useSelector((state) => state.lipscombplus.genresLoaded)
-    const movies = useSelector((state) => state.lipscombplus.movies)
-    const navigate = useNavigate();
-    const dispatch = useDispatch();
-  
-    useEffect(() => {
-      dispatch(getGenres())
-    },[]) 
-  
-    useEffect(() => {
-      if(genresLoaded) dispatch(fetchMovies({type: "all"}))
-    }) 
-  
-   window.onscroll = () => {
-     setIsScrolled(window.pageYOffset===0?false:true);
-     return () => (window.onscroll = null)
-   }
-
-   onAuthStateChanged(firebaseAuth,(currentUser)=> {
-    // if(currentUser) navigate("/"); //TODO: may want to add 2FA
-})
+  const [isScrolled, setIsScrolled] = useState(false);
+
+
+  const genresLoaded = useSelector((state) => state.lipscombplus.genresLoaded)
+  const movies = useSelector((state) => state.lipscombplus.movies)
+  //will need to change how genres are served | currently being served via TMBD api
+  const genres = useSelector((state) => state.lipscombplus.genres)
+
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
 
-   return (
+  useEffect(() => {
+    dispatch(getGenres())
+  },[]) 
+
+  useEffect(() => {
+    if(genresLoaded) dispatch(fetchMovies({type: "movies"}))
+  }) 
+
+ window.onscroll = () => {
+   setIsScrolled(window.pageYOffset===0?false:true);
+   return () => (window.onscroll = null)
+ }
+
+ onAuthStateChanged(firebaseAuth,(currentUser)=> {
+   // if(currentUser) navigate("/"); //TODO: may want to add 2FA
+})
+  return (
     <Container>
         <div className="navbar">
         <Navbar isScrolled={isScrolled}/>
         </div>
         <div className="data">
+        <SelectGenre genres={genres} type="movie" />
             {
                 movies.length ? <Slider movies={movies}/> : <NotAvailable/>
             }
diff --git a/lipscombplus-ui/src/store/index.js b/lipscombplus-ui/src/store/index.js
index 46beffa..fb7c69c 100644
--- a/lipscombplus-ui/src/store/index.js
+++ b/lipscombplus-ui/src/store/index.js
@@ -63,9 +63,21 @@ export const fetchMovies = createAsyncThunk(
     return getRawData(
         `${TMBD_BASE_URL}/trending/${type}/week?api_key=${API_KEY}`,genres, true
         )
-    //return getRawData(`${TMBD_BASE_URL}/discover/${type}?api_key=${API_KEY}&with_genres=${genre}`)
     }
 ) 
+
+export const fetchDataByGenre = createAsyncThunk(
+    "lipscombplus/moviesByGenres", 
+    async({genre, type},thunkApi) => {
+    const {
+        lipscombplus:{ genres }
+    } = thunkApi.getState();
+    return getRawData(
+        `${TMBD_BASE_URL}/discover/${type}?api_key=${API_KEY}&with_genres=${genre}`,genres
+        )
+    }
+) 
+
 const LipscombPlusSlice = createSlice({
     name: "LipscombPlus",
     initialState,
@@ -77,6 +89,9 @@ const LipscombPlusSlice = createSlice({
         builder.addCase(fetchMovies.fulfilled,(state,action) => {
             state.movies = action.payload;
         })
+        builder.addCase(fetchDataByGenre.fulfilled,(state,action) => {
+            state.movies = action.payload;
+        })
     },
 })