Merge pull request #32 from okNeeraj/Phase-07

Phase 07 - Implemented Higher Order Component for trending card and a…
okNeeraj · Oct 11, 2023 · 6bd94fb · 6bd94fb
2 parents 0af277b + 57ccda7
commit 6bd94fb
Show file tree

Hide file tree

Showing 14 changed files with 248 additions and 137 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -1,28 +1,28 @@
-asset-manifest.json,1696910177420,23a9e8dd7d4a336aac437b8f47b24e61797b04eb925596ea8b77dff587e765a8
-favicon-16x16.png,1696910166270,d8f2b2a2997ab1e4378320038b0f0942d7925f62bd3ff947f860635ca4b236fa
-favicon-32x32.png,1696910166270,02bf6c3a31198f9e6cff9e039cc753899daff4fa31efec72681e13ccac79ffe4
-index.html,1696910177420,61ae662be6fa29e2cf15004bed31350fcc3a3e2a2139e5eae7007288f19f2e93
-apple-touch-icon.png,1696910166268,cc447d7d0bde355ed4b3abff1fa078315814e690918d7091007ac19024d31d44
-logo192.png,1696910166271,daa73c437f8704bda6f0653811043231421e29fac90a1a3567a719f27a861f5c
-manifest.json,1696910166272,9731cc6e32f7d0fd1d74b8523d8c1865a257f4b2eb93d473fdd013ded6632475
-avatar-red.jpeg,1696910166268,4ee3c9d691fa927c844612623c3f36792aa135e37ef8e4d1fcf72c69730007b8
-favicon.ico,1696910166271,379df450a7b0d1bf72ac2a2395e74bb9546db1b5027d886a57664f80467a25b7
-avatar-blue.jpeg,1696910166268,e0571406a1c75b619cf91e9ca2ad19db738da1f5d9a95ea24860904bc58078e6
-netflix-gpt.png,1696910166273,8628ef9600fc5393af99193616fd2ea4ef43e2afc4719a2b131b71f6604dafd8
-ngpt-white-300x71.png,1696910166276,6528a56a48066a036a5c137d979f85f5ad0f45705e7ac1f45b1992223a11c4bd
-ngpt-red-300x71.png,1696910166276,399b622ac994919271ea1cb3a332fd9843a0329b4c0ad8a8329c4d2b193d8009
-robots.txt,1696910166279,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-site.webmanifest,1696910166279,438eab4e1bab8df855faa047301dcd8cce4c8a815a1527502b0efc2270ad77fd
-no_movie_poster.png,1696910166277,540d98a5e9930611d710b8ea1bc0a2a2cf9a341efcdfcfb59c8587871593dc9a
-static/js/787.8e11e584.chunk.js,1696910177434,0e4f804981c1a7cbe1d871d33e7bf989a0a6a7d6613822dbdc8a0916ca1c881f
-static/css/main.908f39ad.css,1696910177434,86db7723228a0f3ba97b23f4175a99a4a6010f7c76f67b630fd96335e5ddfa0c
-static/js/787.8e11e584.chunk.js.map,1696910177434,bd58d13d5312bd6291f66aa7538000a654dd2fc48099fae2b81e911c21d11c4e
-static/css/main.908f39ad.css.map,1696910177434,84e28280222521c9a07f83aaca1e1aa4f166870f69ed2fa398b5d6fee1a465d4
-static/js/main.c258293b.js.LICENSE.txt,1696910177434,1e9cdbdefa0af9c4dcdf74584b25a2b90591426ea3bdb859e82fa9b7cd7eef30
-ngpt-red-300x71-01.png,1696910166276,799d627332c55893f0e1d9d6666a30395d32c0f057f43ad00679a0115b330e2d
-logo512.png,1696910166272,33ce2e3312132c09602b877fdafbdf1fff6e682e7284a85a49fcf40d1e7f4f79
-blur.png,1696910166270,91f54c319a44963b23c916c738bd378fe8459857f4d53412399cb775651fc0c3
-poster-bg.jpeg,1696910166278,936849e45414ed194173b19a88ccf787b6be7ede0cd2197fecf36ea250c077e0
-static/js/main.c258293b.js,1696910177434,a55f4ea3578810f705860a824063dfa3b7c9a5211847b46abc0b5859fdee20f6
-netflix-gpt.psd,1696910166274,72ed367082d38c4b7c6459855360e6ad58276b2120001e63fc4c3e6fd0fa0042
-static/js/main.c258293b.js.map,1696910177434,13fa707768659590670a18225bf70ae3f998b771c2065ec642c2c1bf13ef62e2
+apple-touch-icon.png,1696993762322,cc447d7d0bde355ed4b3abff1fa078315814e690918d7091007ac19024d31d44
+favicon-16x16.png,1696993762325,d8f2b2a2997ab1e4378320038b0f0942d7925f62bd3ff947f860635ca4b236fa
+asset-manifest.json,1696993772897,ba9f2e8849c0a06d846fbdbb72990dff8b852c1bb7680a178da9a21311b6562f
+favicon-32x32.png,1696993762326,02bf6c3a31198f9e6cff9e039cc753899daff4fa31efec72681e13ccac79ffe4
+index.html,1696993772897,d3f6017a3444e78acdd281c546c6e640552aef50e5e2fa5642975b6b91e863c7
+manifest.json,1696993762328,9731cc6e32f7d0fd1d74b8523d8c1865a257f4b2eb93d473fdd013ded6632475
+logo192.png,1696993762326,daa73c437f8704bda6f0653811043231421e29fac90a1a3567a719f27a861f5c
+avatar-blue.jpeg,1696993762322,e0571406a1c75b619cf91e9ca2ad19db738da1f5d9a95ea24860904bc58078e6
+netflix-gpt.png,1696993762328,8628ef9600fc5393af99193616fd2ea4ef43e2afc4719a2b131b71f6604dafd8
+avatar-red.jpeg,1696993762322,4ee3c9d691fa927c844612623c3f36792aa135e37ef8e4d1fcf72c69730007b8
+favicon.ico,1696993762326,379df450a7b0d1bf72ac2a2395e74bb9546db1b5027d886a57664f80467a25b7
+robots.txt,1696993762333,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+ngpt-red-300x71.png,1696993762331,399b622ac994919271ea1cb3a332fd9843a0329b4c0ad8a8329c4d2b193d8009
+site.webmanifest,1696993762333,438eab4e1bab8df855faa047301dcd8cce4c8a815a1527502b0efc2270ad77fd
+ngpt-white-300x71.png,1696993762331,6528a56a48066a036a5c137d979f85f5ad0f45705e7ac1f45b1992223a11c4bd
+static/js/787.8e11e584.chunk.js,1696993772912,0e4f804981c1a7cbe1d871d33e7bf989a0a6a7d6613822dbdc8a0916ca1c881f
+no_movie_poster.png,1696993762332,540d98a5e9930611d710b8ea1bc0a2a2cf9a341efcdfcfb59c8587871593dc9a
+static/js/787.8e11e584.chunk.js.map,1696993772912,bd58d13d5312bd6291f66aa7538000a654dd2fc48099fae2b81e911c21d11c4e
+static/js/main.211f3e99.js.LICENSE.txt,1696993772910,1e9cdbdefa0af9c4dcdf74584b25a2b90591426ea3bdb859e82fa9b7cd7eef30
+static/css/main.3e145f70.css,1696993772910,fb280359d7ece724641fffbf7579475d85445d54fde70b81ea9d552dab963a51
+static/css/main.3e145f70.css.map,1696993772912,4693a90099c6732aadaf3d62b517f0cf41d7e873a4ef134ee0464b2afbb97347
+ngpt-red-300x71-01.png,1696993762330,799d627332c55893f0e1d9d6666a30395d32c0f057f43ad00679a0115b330e2d
+logo512.png,1696993762327,33ce2e3312132c09602b877fdafbdf1fff6e682e7284a85a49fcf40d1e7f4f79
+blur.png,1696993762325,91f54c319a44963b23c916c738bd378fe8459857f4d53412399cb775651fc0c3
+poster-bg.jpeg,1696993762333,936849e45414ed194173b19a88ccf787b6be7ede0cd2197fecf36ea250c077e0
+static/js/main.211f3e99.js,1696993772910,ec7d91dffa9d16485772ae7671143c7ab9e80203ea4f0d357ffee1c34005453e
+netflix-gpt.psd,1696993762330,72ed367082d38c4b7c6459855360e6ad58276b2120001e63fc4c3e6fd0fa0042
+static/js/main.211f3e99.js.map,1696993772910,09b0d29024588dd7b847c836aee1d38013fd89ed7704fa787e57c3e07f231860
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
@@ -10,33 +10,46 @@ import { NO_POSTER } from "../utils/constants";
 const MovieCard = ({ data }) => {
   const [isLargeScreen, setIsLargeScreen] = useState(false);
   const [hovered, setHovered] = useState(false);
-  const cardRef = useRef(null);
   const [centerPosition, setCenterPosition] = useState({ left: 0, right: 0, top: 0, bottom: 0 });
 
+
   const handleHover = () => {
-    setHovered(true);
-    const triggerRect = cardRef.current.getBoundingClientRect();
-    const offsetFromTop = triggerRect.top + window.scrollY;
-    const positionFromRight = window.innerWidth - triggerRect.right;
-    setCenterPosition({
-      left: triggerRect.left,
-      right: positionFromRight,
-      top: offsetFromTop,
-      bottom: offsetFromTop,
-    });
+    if (data !== null) {
+      clearTimeout(hoverTimeout);
+
+      hoverTimeout = setTimeout(() => {
+        setHovered(true);
+        if (cardRef.current) {
+          const triggerRect = cardRef.current.getBoundingClientRect();
+          const offsetFromTop = triggerRect.top + window.scrollY;
+          const positionFromRight = window.innerWidth - triggerRect.right;
+          setCenterPosition({
+            left: triggerRect.left,
+            right: positionFromRight,
+            top: offsetFromTop,
+            bottom: offsetFromTop,
+          });
+        }
+      }, 1000);
+    }
   };
 
   const handleLeave = () => {
+    clearTimeout(hoverTimeout);
     setHovered(false);
   };
 
-  const handleResize = () => {
-    setIsLargeScreen(window.innerWidth > 1024);
-  };
+  let hoverTimeout;
+  const cardRef = useRef(null);
 
   useEffect(() => {
-    handleResize();
+    const handleResize = () => {
+      setIsLargeScreen(window.innerWidth > 1024);
+    };
+
     window.addEventListener('resize', handleResize);
+    handleResize(); // Initialize isLargeScreen
+
     return () => {
       window.removeEventListener('resize', handleResize);
     };
@@ -79,6 +92,19 @@ const MovieCard = ({ data }) => {
   );
 };
 
+export const WithTrending = (MovieCard) => {
+  return (props) => {
+    const { index } = props;
+    return (
+      <div className="trending-card relative">
+        <div className="text-[200px] trending-number w-full h-full flex justify-start items-center absolute left-0">{index}</div>
+        <div className='w-32 ml-auto relative z-10'>
+          <MovieCard {...props} />
+        </div>
+      </div>
+    )
+  }
+}
 
 
 export default MovieCard;
diff --git a/src/components/MovieCardHover.js b/src/components/MovieCardHover.js
@@ -6,7 +6,8 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 
 const MovieCardHover = ({ data, centerPosition, hovered }) => {
   const { id, title, poster_path, backdrop_path, release_date } = data;
-  const releaseYear = release_date.split("-")[0];
+
+  const releaseYear = release_date && release_date.split("-")[0];
 
   let safeTranslateX = '-82px';
   let safeTranslateY = '-50px';
@@ -30,7 +31,7 @@ const MovieCardHover = ({ data, centerPosition, hovered }) => {
     >
       <div className="hover-container bg-[#141414] shadow-md shadow-slate-950 m-2 rounded-md overflow-hidden">
         <div className='h-40 w-full bg-gray-700'>
-          <Link to={`${PAGE.WATCH}/${id}`} target="_blank" className='inline-block w-full h-full'>
+          <Link to={`${PAGE.WATCH}/${id}`} className='inline-block w-full h-full'>
             <LazyLoadImage
               src={
                 poster_path !== null
@@ -45,7 +46,7 @@ const MovieCardHover = ({ data, centerPosition, hovered }) => {
         </div>
         <div className="detail p-5">
           <div className='actions flex items-center gap-3'>
-            <Link to={`${PAGE.WATCH}/${id}`} target="_blank" className='w-10 h-10 flex items-center bg-white hover:bg-gray-200 text-black rounded-full justify-center'>
+            <Link to={`${PAGE.WATCH}/${id}`} className='w-10 h-10 flex items-center bg-white hover:bg-gray-200 text-black rounded-full justify-center'>
               <span className='icon-fill text-[36px]'>play_arrow</span>
             </Link>
             <button className='w-10 h-10 flex items-center bg-[#262626] text-white rounded-full justify-center border-2 border-solid border-gray-500 hover:border-gray-50'>

diff --git a/src/components/MovieSlider.js b/src/components/MovieSlider.js
@@ -5,12 +5,14 @@ import { Navigation, Pagination } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/navigation';
 
-import MovieCard from "./MovieCard"
+import MovieCard, { WithTrending } from './MovieCard';
 
 SwiperCore.use([Navigation, Pagination]);
 
-const MovieSlider = ({ heading, data }) => {
+const MovieSlider = ({ type, heading, data }) => {
   const [slidesPerGroup, setSlidesPerGroup] = useState(2);
+  const TrendingMovieCard = WithTrending(MovieCard);
+
   const handleResize = () => {
     const slidesInView = Math.floor(window.innerWidth / 144);  // Adjust 200 to your slide width
     setSlidesPerGroup(slidesInView);
@@ -35,9 +37,9 @@ const MovieSlider = ({ heading, data }) => {
         className="mySwiper flex overflow-visibleF"
       >
         {
-          movies.map((movie) => (
-            <SwiperSlide key={movie.id} className='cursor-pointer flex-grow-0 flex-shrink-0 w-28 md:w-36 overflow-hidden rounded'>
-              {<MovieCard data={movie} />}
+          movies.map((movie, index) => (
+            <SwiperSlide key={movie.id} className={`${type === 'trending' ? 'w-52' : 'w-28 md:w-36'} cursor-pointer flex-grow-0 flex-shrink-0 overflow-hidden rounded`}>
+              {type === 'trending' ? <TrendingMovieCard index={index + 1} data={movie} /> : <MovieCard data={movie} />}
             </SwiperSlide>)
           )
         }

diff --git a/src/components/SignInForm.js b/src/components/SignInForm.js
@@ -33,7 +33,21 @@ const SignInform = () => {
 
     // Send provided credential to server for validation
     const userCredential = await authenticate(emailPhone, password);
-    setAuthError(userCredential?.error?.message);
+    let errorMessage = null;
+    switch (userCredential?.error?.code) {
+      case "auth/user-disabled":
+        errorMessage = "Your account has been disabled!"
+        break;
+
+      case "auth/invalid-login-credentials":
+        errorMessage = "Invalid login credentials."
+        break;
+
+      default:
+        errorMessage = "Something went wrong with your credentials."
+        break;
+    }
+    setAuthError(errorMessage);
     setLoadingBtn(false)
 
     if (userCredential?.error) return;

diff --git a/src/components/SignUpForm.js b/src/components/SignUpForm.js
@@ -28,8 +28,19 @@ const SignUpForm = () => {
 
     // Send provided credential to server for validation
     const userCredential = await register(emailPhone.current.value, password.current.value);
-    setAuthError(userCredential?.error?.message);
+    let errorMessage = null;
+    switch (userCredential?.error?.code) {
+      case "auth/email-already-in-use":
+        errorMessage = "Email you provided is already registered."
+        break;
+
+      default:
+        errorMessage = "Something went wrong with your credentials."
+        break;
+    }
+    setAuthError(errorMessage);
     setLoadingBtn(false);
+
     if (userCredential?.error) return;
 
     const { uid, displayName, email, photoURL, phoneNumber } = userCredential.user;

diff --git a/src/components/TrendingCard.js b/src/components/TrendingCard.js
diff --git a/src/components/TrendingSlider.js b/src/components/TrendingSlider.js
diff --git a/src/index.css b/src/index.css
@@ -85,7 +85,7 @@
   }
 
   .trending-card:hover {
-    transform: scale(1.2);
+    /* transform: scale(1.2); */
   }
 
   .moview-by-type {

diff --git a/src/pages/Browse.js b/src/pages/Browse.js
@@ -1,6 +1,5 @@
 import Showcase from '../components/Showcase';
 import MovieSlider from '../components/MovieSlider';
-import TrendingSlider from '../components/TrendingSlider';
 import useMovie from '../hooks/useMovie';
 import useTrending from '../hooks/useTrending';
 import { SHOWCASE, TRENDINGS, MOVIES } from '../services/tmdb';
@@ -10,7 +9,7 @@ import ShowcaseShimmer from '../components/ShowcaseShimmer';
 import MovieSliderShimmer from '../components/MovieSliderShimmer';
 
 const Browse = () => {
-  const { landingPage, tvShow, movie, latest } = SHOWCASE;
+  const { landingPage } = SHOWCASE;
   const { trendingAll, trendingTv, trendingMovies } = TRENDINGS;
   const { nowPlaying, popular, topRated } = MOVIES;
 
@@ -47,12 +46,57 @@ const Browse = () => {
     <div className='broswe-page'>
       {showCase ? <Showcase data={showCase} /> : <ShowcaseShimmer />}
       <div className='moview-by-type px-4 md:px-12 md:mt-[-10%] xl:mt-[-15%] z-50 relative'>
-        {movies.nowPlaying ? <MovieSlider heading="Now Playing" data={movies.nowPlaying} /> : <MovieSliderShimmer dimention={'w-28 md:w-36'} />}
-        {trendings.trendingMovies ? <TrendingSlider heading="Top 10 Trending Movies" data={trendings.trendingMovies} /> : <MovieSliderShimmer dimention={'w-52 h-[200px]'} />}
-        {movies.bollywood ? <MovieSlider heading="Now Playing Bollywood Movies" data={movies.bollywood} /> : <MovieSliderShimmer dimention={'w-28 md:w-36'} />}
-        {movies.topRated ? <MovieSlider heading="Top Rated Movies" data={movies.topRated} /> : <MovieSliderShimmer dimention={'w-28 md:w-36'} />}
-        {trendings.trendingTv ? <TrendingSlider heading="Top 10 TV Shows in India" data={trendings.trendingTv} /> : <MovieSliderShimmer dimention={'w-52 h-[200px]'} />}
-        {movies.popular ? <MovieSlider heading="Popular Movies" data={movies.popular} /> : <MovieSliderShimmer dimention={'w-28 md:w-36'} />}
+        {
+          movies.nowPlaying ? (
+            <MovieSlider type={null} heading="Now Playing" data={movies.nowPlaying} />
+          ) : (
+            <MovieSliderShimmer dimention={'w-28 md:w-36'} />
+          )
+        }
+
+        {
+          trendings.trendingMovies ? (
+            <MovieSlider
+              type="trending"
+              heading="Top 10 Trending Movies"
+              data={trendings.trendingMovies}
+            />
+          ) : (
+            <MovieSliderShimmer dimention={'w-52 h-[200px]'} />
+          )
+        }
+
+        {
+          movies.bollywood ? (
+            <MovieSlider type={null} heading="Now Playing Bollywood Movies" data={movies.bollywood} />
+          ) : (
+            <MovieSliderShimmer dimention={'w-28 md:w-36'} />
+          )
+        }
+
+        {
+          movies.topRated ? (
+            <MovieSlider type={null} heading="Top Rated Movies" data={movies.topRated} />
+          ) : (
+            <MovieSliderShimmer dimention={'w-28 md:w-36'} />
+          )
+        }
+
+        {
+          trendings.trendingTv ? (
+            <MovieSlider type="trending" heading="Top 10 TV Shows in India" data={trendings.trendingTv} />
+          ) : (
+            <MovieSliderShimmer dimention={'w-52 h-[200px]'} />
+          )
+        }
+
+        {
+          movies.popular ? (
+            <MovieSlider type={null} heading="Popular Movies" data={movies.popular} />
+          ) : (
+            <MovieSliderShimmer dimention={'w-28 md:w-36'} />
+          )
+        }
       </div>
     </div>
   )