From 46d52008494164218fac99136439fc9d31bd166d Mon Sep 17 00:00:00 2001
From: AshDyson <ashleyrobert@hotmail.co.uk>
Date: Sat, 20 Apr 2024 21:21:51 +0100
Subject: [PATCH] feat(fe): genres list menu

---
 pkg/frontend/src/components/nav.js            |  52 +++++--
 pkg/frontend/src/components/navGenres.js      |  73 ++++++++++
 pkg/frontend/src/pages/index.js               |   7 +-
 pkg/frontend/src/pages/movie/studio/[pid].js  | 120 ----------------
 pkg/frontend/src/pages/tv/network/[pid].js    | 130 ------------------
 .../src/styles/components/card.module.scss    |   2 +-
 .../src/styles/components/nav.module.scss     | 105 ++++++++++++--
 pkg/frontend/src/styles/global/global.scss    |   7 +
 8 files changed, 222 insertions(+), 274 deletions(-)
 create mode 100644 pkg/frontend/src/components/navGenres.js
 delete mode 100644 pkg/frontend/src/pages/movie/studio/[pid].js
 delete mode 100644 pkg/frontend/src/pages/tv/network/[pid].js

diff --git a/pkg/frontend/src/components/nav.js b/pkg/frontend/src/components/nav.js
index 41466b1f2..d4174c1ca 100644
--- a/pkg/frontend/src/components/nav.js
+++ b/pkg/frontend/src/components/nav.js
@@ -18,12 +18,14 @@ import inp from '../styles/components/input.module.scss';
 // import { useRouter } from 'next/router';
 import styles from '../styles/components/nav.module.scss';
 import typo from '../styles/components/typography.module.scss';
+import NavGenres from './navGenres';
 
 export default function Nav(props) {
   const [searchQuery, setSearchQuery] = useState('');
   const [showSearch, setShowSearch] = useState(false);
   const [mobile, setMobile] = useState(false);
   const [darken, setDarken] = useState(false);
+  const [genresOpen, setGenresOpen] = useState(false);
 
   const history = useHistory();
   const inputRef = useRef();
@@ -49,6 +51,10 @@ export default function Nav(props) {
     };
   }, []);
 
+  useEffect(() => {
+    setGenresOpen(false);
+  }, [history.location]);
+
   function updateSearch(e) {
     const val = e.target.value;
     media.searchUpdate(val);
@@ -88,7 +94,9 @@ export default function Nav(props) {
       <div
         className={`${styles.nav} ${
           showSearch ? styles.nav__search_open : ''
-        } ${darken ? styles.nav__darken : ''}`}
+        } ${darken ? styles.nav__darken : ''} ${
+          genresOpen ? styles.nav__block : ''
+        }`}
       >
         <div className="container">
           <div className={styles.nav__inner}>
@@ -109,20 +117,36 @@ export default function Nav(props) {
                 <Link
                   to="/"
                   onClick={() => resetScrollPos('/')}
-                  className={`${typo.body} ${typo.bold}`}
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
                 >
                   Movies &amp; TV
                 </Link>
-                <button className={`${typo.body} ${typo.bold}`}>Genres</button>
-                <Link to="/requests" className={`${typo.body} ${typo.bold}`}>
+                <button
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item} ${
+                    genresOpen ? styles.nav__item__active : ''
+                  }`}
+                  onClick={() => setGenresOpen(!genresOpen)}
+                >
+                  Genres
+                </button>
+                <Link
+                  to="/requests"
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
+                >
                   Requests
                 </Link>
-                <Link to="/my-account" className={`${typo.body} ${typo.bold}`}>
+                <Link
+                  to="/my-account"
+                  className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
+                >
                   My Account
                 </Link>
                 {props.currentUser.role === 'admin' ||
                 props.currentUser.role === 'moderator' ? (
-                  <Link to="/admin" className={`${typo.body} ${typo.bold}`}>
+                  <Link
+                    to="/admin"
+                    className={`${typo.body} ${typo.bold} ${styles.nav__item}`}
+                  >
                     Admin
                   </Link>
                 ) : null}
@@ -169,7 +193,7 @@ export default function Nav(props) {
             to="/"
             onClick={() => resetScrollPos('/')}
             className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-              history.location.pathname === '/'
+              history.location.pathname === '/' && !genresOpen
                 ? styles.mobile_nav__item__active
                 : ''
             }`}
@@ -179,7 +203,12 @@ export default function Nav(props) {
             </span>
             Movies &amp; TV
           </Link>
-          <button className={`${typo.xsmall} ${styles.mobile_nav__item}`}>
+          <button
+            className={`${typo.xsmall} ${styles.mobile_nav__item} ${
+              genresOpen ? styles.mobile_nav__item__active : ''
+            }`}
+            onClick={() => setGenresOpen(!genresOpen)}
+          >
             <span>
               <GenreIcon />
             </span>
@@ -188,7 +217,7 @@ export default function Nav(props) {
           <Link
             to="/requests"
             className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-              history.location.pathname === '/requests'
+              history.location.pathname === '/requests' && !genresOpen
                 ? styles.mobile_nav__item__active
                 : ''
             }`}
@@ -201,7 +230,7 @@ export default function Nav(props) {
           <Link
             to="/my-account"
             className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-              history.location.pathname === '/my-account'
+              history.location.pathname === '/my-account' && !genresOpen
                 ? styles.mobile_nav__item__active
                 : ''
             }`}
@@ -216,7 +245,7 @@ export default function Nav(props) {
             <Link
               to="/admin"
               className={`${typo.xsmall} ${styles.mobile_nav__item} ${
-                history.location.pathname === '/admin'
+                history.location.pathname === '/admin' && !genresOpen
                   ? styles.mobile_nav__item__active
                   : ''
               }`}
@@ -229,6 +258,7 @@ export default function Nav(props) {
           ) : null}
         </div>
       ) : null}
+      <NavGenres open={genresOpen} />
     </>
   );
 }
diff --git a/pkg/frontend/src/components/navGenres.js b/pkg/frontend/src/components/navGenres.js
new file mode 100644
index 000000000..c6fa176ab
--- /dev/null
+++ b/pkg/frontend/src/components/navGenres.js
@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom';
+
+import { getGenres } from '../helpers/genres';
+import styles from '../styles/components/nav.module.scss';
+import typo from '../styles/components/typography.module.scss';
+
+export default function NavGenres({ open }) {
+  const movieGenres = getGenres('movie');
+  const tvGenres = getGenres('tv');
+  let movieGenresSorted = {};
+  Object.keys(movieGenres).forEach((id) => {
+    movieGenresSorted[movieGenres[id]] = id;
+  });
+  let tvGenresSorted = {};
+  Object.keys(tvGenres).forEach((id) => {
+    tvGenresSorted[tvGenres[id]] = id;
+  });
+
+  if (!open) return null;
+
+  return (
+    <div className={`${styles.genre_menu}`}>
+      <div className={styles.genre_menu__inner}>
+        <div className="container">
+          <div className={styles.genre_menu__content}>
+            <div className={styles.genre_menu__col}>
+              <p className={`${typo.body} ${typo.uppercase} ${typo.bold}`}>
+                Movie Genres
+              </p>
+              <div className={styles.genre_menu__links}>
+                {Object.keys(movieGenresSorted)
+                  .sort()
+                  .map((name) => {
+                    return (
+                      <p
+                        key={`footer_movie_genre_${name}`}
+                        className={`${typo.body}`}
+                      >
+                        <Link to={`/movie/genre/${movieGenresSorted[name]}`}>
+                          {name}
+                        </Link>
+                      </p>
+                    );
+                  })}
+              </div>
+            </div>
+            <div className={styles.genre_menu__col}>
+              <p className={`${typo.body} ${typo.uppercase} ${typo.bold}`}>
+                TV Genres
+              </p>
+              <div className={styles.genre_menu__links}>
+                {Object.keys(tvGenresSorted)
+                  .sort()
+                  .map((name) => {
+                    return (
+                      <p
+                        key={`footer_tv_genre_${name}`}
+                        className={`${typo.body}`}
+                      >
+                        <Link to={`/tv/genre/${tvGenresSorted[name]}`}>
+                          {name}
+                        </Link>
+                      </p>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pkg/frontend/src/pages/index.js b/pkg/frontend/src/pages/index.js
index ecded04fe..cbee6fb03 100644
--- a/pkg/frontend/src/pages/index.js
+++ b/pkg/frontend/src/pages/index.js
@@ -10,7 +10,8 @@ import { Loading } from '../components/loading';
 import Meta from '../components/meta';
 import media from '../services/media.service';
 import hero from '../styles/components/hero.module.scss';
-import typo from '../styles/components/typography.module.scss';
+
+// import typo from '../styles/components/typography.module.scss';
 
 const mapStateToProps = (state) => {
   return {
@@ -93,9 +94,9 @@ function Home({
         <div className={hero.discovery}>
           <div className="container">
             <div className={hero.discovery__content}>
-              {redux_featured ? (
+              {/* {redux_featured ? (
                 <p className={typo.featured_title}>Featured Movie</p>
-              ) : null}
+              ) : null} */}
               {redux_featured ? (
                 <Link
                   to={`/movie/${redux_featured.id}`}
diff --git a/pkg/frontend/src/pages/movie/studio/[pid].js b/pkg/frontend/src/pages/movie/studio/[pid].js
deleted file mode 100644
index 40be49520..000000000
--- a/pkg/frontend/src/pages/movie/studio/[pid].js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useEffect, useState } from 'react';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-import 'react-lazy-load-image-component/src/effects/opacity.css';
-import { useParams } from 'react-router-dom';
-
-import NotFound from '../../404';
-import Grid from '../../../components/grid';
-import Hero from '../../../components/hero';
-import { Loading } from '../../../components/loading';
-import Meta from '../../../components/meta';
-import media from '../../../services/media.service';
-import hero from '../../../styles/components/hero.module.scss';
-import styles from '../../../styles/views/company.module.scss';
-
-export default function Studio({ newNotification }) {
-  const [coData, setCoData] = useState(null);
-  const [movies, setMovies] = useState(false);
-  const [total, setTotal] = useState(1);
-  const [featuredMovie, setFeaturedMovie] = useState(false);
-  const { pid } = useParams();
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [page, setPage] = useState(1);
-  const [query, setQuery] = useState(null);
-
-  useEffect(() => {
-    async function getCoDetails() {
-      try {
-        const movieData = await media.getCompany(pid);
-        const moviesLookup = await media.lookup('movie', 1, {
-          with_companies: pid,
-        });
-        setCoData(movieData);
-        setQuery({
-          with_companies: pid,
-        });
-        setMovies(moviesLookup.results);
-        setTotal(moviesLookup.totalPages);
-        setFeaturedMovie(moviesLookup.results[0]);
-      } catch (e) {
-        console.log(e);
-        setCoData('error');
-      }
-    }
-
-    getCoDetails();
-  }, [pid]);
-
-  useEffect(() => {
-    async function loadMore() {
-      if (loadingMore || !query || page === total) return;
-      setLoadingMore(true);
-      const moviesLookup = await media.lookup('movie', page + 1, query);
-      setMovies([...movies, ...moviesLookup.results]);
-      setPage(page + 1);
-      setLoadingMore(false);
-    }
-
-    function handleScroll() {
-      if (
-        window.innerHeight * 2 + window.scrollY >=
-        document.body.offsetHeight
-      ) {
-        // you're at the bottom of the page
-        loadMore();
-      }
-    }
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [loadingMore, query, page, total, movies]);
-
-  if (!coData) return <Loading />;
-
-  if (coData === 'error') return <NotFound />;
-
-  return (
-    <div className={styles.wrap} key={`company_single_${pid}`}>
-      <Meta title={coData.name} />
-      <div className={`${hero.discovery} ${hero.company}`}>
-        <div className="container">
-          <div
-            className={`${hero.discovery__content} ${hero.company__content}`}
-          >
-            <div className={hero.company__logo}>
-              {coData.logo_path ? (
-                <LazyLoadImage
-                  src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bdbdbd)${coData.logo_path}`}
-                  alt={coData.name}
-                  effect="opacity"
-                  visibleByDefault={true}
-                />
-              ) : (
-                <p>{coData.name}</p>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className={hero.company__background}>
-          {featuredMovie ? (
-            <Hero
-              className={hero.discovery__image}
-              image={featuredMovie.backdrop_path}
-            />
-          ) : null}
-        </div>
-      </div>
-      <Grid
-        title={`${coData.name} Movies`}
-        data={movies}
-        type="movie"
-        key={`company_${pid}_movies`}
-        id={`company_${pid}_movies`}
-        newNotification={newNotification}
-      />
-    </div>
-  );
-}
diff --git a/pkg/frontend/src/pages/tv/network/[pid].js b/pkg/frontend/src/pages/tv/network/[pid].js
deleted file mode 100644
index 847e89153..000000000
--- a/pkg/frontend/src/pages/tv/network/[pid].js
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useEffect, useState } from 'react';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-import 'react-lazy-load-image-component/src/effects/opacity.css';
-import { useParams } from 'react-router-dom';
-
-import NotFound from '../../404';
-import Grid from '../../../components/grid';
-import Hero from '../../../components/hero';
-import { Loading } from '../../../components/loading';
-import Meta from '../../../components/meta';
-import media from '../../../services/media.service';
-import hero from '../../../styles/components/hero.module.scss';
-import styles from '../../../styles/views/company.module.scss';
-
-export default function Network({ newNotification }) {
-  const [coData, setCoData] = useState(null);
-  const [shows, setShows] = useState(false);
-  const [total, setTotal] = useState(1);
-  const [featuredShow, setFeaturedMovie] = useState(false);
-  const { pid } = useParams();
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [page, setPage] = useState(1);
-  const [query, setQuery] = useState(null);
-
-  useEffect(() => {
-    async function getCoDetails() {
-      try {
-        const showData = await media.getNetwork(pid);
-        const tvLookup = await media.companyLookup(
-          'show',
-          1,
-          {
-            with_networks: pid,
-          },
-          pid,
-        );
-        setCoData(showData);
-        setShows(tvLookup.results);
-        setTotal(tvLookup.totalPages);
-        setQuery({
-          with_networks: pid,
-        });
-        setFeaturedMovie(tvLookup.results[0]);
-      } catch (e) {
-        console.log(e);
-        setCoData('error');
-      }
-    }
-
-    getCoDetails();
-  }, [pid]);
-
-  useEffect(() => {
-    async function loadMore() {
-      if (loadingMore || !query || page === total) return;
-      setLoadingMore(true);
-      const showsLookup = await media.companyLookup(
-        'show',
-        page + 1,
-        query,
-        pid,
-      );
-      setShows([...shows, ...showsLookup.results]);
-      setPage(page + 1);
-      setLoadingMore(false);
-    }
-
-    function handleScroll() {
-      if (
-        window.innerHeight * 2 + window.scrollY >=
-        document.body.offsetHeight
-      ) {
-        // you're at the bottom of the page
-        loadMore();
-      }
-    }
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [loadingMore, query, page, total, shows, pid]);
-
-  if (!coData) return <Loading />;
-
-  if (coData === 'error') return <NotFound />;
-
-  return (
-    <div className={styles.wrap} key={`network_single_${pid}`}>
-      <Meta title={coData.name} />
-      <div className={`${hero.discovery} ${hero.company}`}>
-        <div className="container">
-          <div
-            className={`${hero.discovery__content} ${hero.company__content}`}
-          >
-            <div className={hero.company__logo}>
-              {coData.logo_path ? (
-                <LazyLoadImage
-                  src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bdbdbd)${coData.logo_path}`}
-                  alt={coData.name}
-                  effect="opacity"
-                  visibleByDefault={true}
-                />
-              ) : (
-                <p>{coData.name}</p>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className={hero.company__background}>
-          {featuredShow ? (
-            <Hero
-              className={hero.discovery__image}
-              image={featuredShow.backdrop_path}
-            />
-          ) : null}
-        </div>
-      </div>
-      <Grid
-        title={`${coData.name} Shows`}
-        data={shows}
-        type="tv"
-        key={`network_${pid}_tv`}
-        id={`network_${pid}_tv`}
-        newNotification={newNotification}
-      />
-    </div>
-  );
-}
diff --git a/pkg/frontend/src/styles/components/card.module.scss b/pkg/frontend/src/styles/components/card.module.scss
index e1a427db5..fe38aa534 100644
--- a/pkg/frontend/src/styles/components/card.module.scss
+++ b/pkg/frontend/src/styles/components/card.module.scss
@@ -441,7 +441,7 @@
     svg {
       width: 9px;
       height: 9px;
-      fill: var(--blue-dark-10);
+      fill: var(--blue-light-30);
     }
   }
 }
diff --git a/pkg/frontend/src/styles/components/nav.module.scss b/pkg/frontend/src/styles/components/nav.module.scss
index 38c358bbb..69883c5b8 100644
--- a/pkg/frontend/src/styles/components/nav.module.scss
+++ b/pkg/frontend/src/styles/components/nav.module.scss
@@ -48,6 +48,17 @@
         opacity: 1;
       }
     }
+
+    @media (min-width: $lg) {
+      &__block {
+        background: var(--grey);
+
+        &:after {
+          transition: none;
+          opacity: 0;
+        }
+      }
+    }
   }
 
   @media (min-width: $xxxl) {
@@ -169,16 +180,19 @@
         outline: none !important;
         cursor: pointer;
       }
+    }
+  }
 
-      a,
-      button {
-        margin-right: 60px;
-        transition: color 0.3s ease;
+  &__item {
+    margin-right: 60px;
+    transition: color 0.3s ease;
 
-        &:hover {
-          color: var(--orange);
-        }
-      }
+    &:hover {
+      color: var(--orange);
+    }
+
+    &__active {
+      color: var(--orange) !important;
     }
   }
 
@@ -282,7 +296,7 @@
     }
 
     &__active {
-      color: var(--orange);
+      color: var(--orange) !important;
 
       span svg {
         fill: var(--orange);
@@ -315,3 +329,76 @@
     }
   }
 }
+
+.genre_menu {
+  position: fixed;
+  bottom: 59px;
+  left: 0;
+  width: 100%;
+  z-index: 500;
+  pointer-events: none;
+  height: calc(100svh - 59px - 66px);
+  overflow-y: auto;
+
+  @media (min-width: $lg) {
+    padding-top: 91px;
+    top: 0;
+    bottom: initial;
+    border-bottom: solid 1px var(--grey-light-20);
+    height: auto;
+    overflow: initial;
+  }
+
+  @media (min-width: $xxxl) {
+    padding-top: 130px;
+  }
+
+  &__inner {
+    position: relative;
+    border-top: solid 1px var(--grey-light-20);
+    background: var(--grey);
+    pointer-events: all;
+  }
+
+  &__content {
+    // position: absolute;
+    // top: 0;
+    // left: 200px;
+    // width: calc(100% - 400px);
+    width: 100%;
+    padding: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 4);
+    border-radius: 10px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: calc(var(--spacing) * 2);
+
+    @media (min-width: $lg) {
+      grid-template-columns: 1fr 1fr;
+      gap: calc(var(--spacing) * 2);
+    }
+  }
+
+  &__col {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: calc(var(--spacing) * 2);
+  }
+
+  &__links {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--spacing) * 1);
+
+    @media (min-width: $lg) {
+      grid-template-columns: 1fr 1fr 1fr;
+
+      a {
+        transition: color 0.3s ease;
+
+        &:hover {
+          color: var(--orange);
+        }
+      }
+    }
+  }
+}
diff --git a/pkg/frontend/src/styles/global/global.scss b/pkg/frontend/src/styles/global/global.scss
index 7b3c6adf2..8ba445b68 100644
--- a/pkg/frontend/src/styles/global/global.scss
+++ b/pkg/frontend/src/styles/global/global.scss
@@ -25,6 +25,8 @@
   --blue: #006992;
   --blue-dark-10: color-mix(in srgb, var(--blue), #000 10%);
   --blue-dark-30: color-mix(in srgb, var(--blue), #000 30%);
+  --blue-light-10: color-mix(in srgb, var(--blue), #fff 10%);
+  --blue-light-30: color-mix(in srgb, var(--blue), #fff 30%);
   --purple: #8700c5;
   --purple-dark-30: color-mix(in srgb, var(--purple), #000 30%);
   --font: 'Montserrat', sans-serif;
@@ -94,6 +96,11 @@ h5,
 h6,
 p {
   margin: 0;
+  user-select: none;
+}
+
+img {
+  user-select: none;
 }
 
 hr {