40 add sports events and concerts pages

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``;

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/>
             }

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/>
             }

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/>
             }

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/>
             }

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;
+        })
     },
 })