Merge pull request #28 from Mridul2820/update-site

Paginate genres, Not found page, Watch items add, Readme Update
Mridul2820 · Jun 7, 2022 · 8c44a56 · 8c44a56 · vercel · Jun 7, 2022
2 parents dec5b12 + ec9c383
commit 8c44a56
Show file tree

Hide file tree

Showing 30 changed files with 312 additions and 123 deletions.
diff --git a/README.md b/README.md
@@ -36,10 +36,15 @@
 - Dashborad 
 - Trending Movies and TV Series
 - Discover Movies and TV Series in different genres
+- Latest, Pupoular , Upcoming Movies and TV Series
 - Search Movies and TV Series
 - Movie and TV Series Details(Cast, Crew, Trivia, Photos, Videos etc.)
 - Recommendations for Each Movie and TV Series
-- Add to Watchlist
+- Add and Remove from Watchlist
+- Trending Persons
+- Search Persons
+- Person Detail Page with Biography, Movies, TV Series and Gallery etc.
+- Image Carousel with Zoom
 - and More...
 
 ## Tech Stack 👾

diff --git a/src/404/NotFound.js b/src/404/NotFound.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+
+import { IoIosArrowForward } from 'react-icons/io';
+
+import { errorPage } from '../data/notFound';
+
+const NotFound = () => {
+  return (
+    <Container className="not-found">
+      <div className="flex flex-col md:flex-row gap-5 items-center w-full max-w-6xl ">
+        <div className="flex flex-col justify-center items-center gap-y-10 w-full md:w-1/2">
+          <p className="text-mt-red text-5xl md:text-7xl scale-150 font-bold">
+            Oops
+          </p>
+          <p className="text-3xl md:text-4xl font-light">Page Not Found</p>
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            {errorPage.map((item) => (
+              <Link
+                to={item.route}
+                className="flex items-center gap-2 text-normal font-semibold"
+                key={uuidv4()}
+              >
+                <IoIosArrowForward /> {item.title}
+              </Link>
+            ))}
+          </div>
+          <Link
+            to="/"
+            className="text-white px-3 py-1.5 rounded-md bg-blue-600 font-semibold hover:shadow-lg"
+          >
+            Back to Homepage
+          </Link>
+        </div>
+        <div className="w-1 h-56 hidden md:block bg-mt-red" />
+        <div className="flex justify-center items-center w-full md:w-1/2">
+          <img
+            src="https://res.cloudinary.com/dgt1da1bz/image/upload/v1644929548/not_found_252219e95c.gif"
+            alt="not found"
+            height="300"
+            width="450"
+          />
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 40px 16px;
+  min-height: 90vh;
+`;
+
+export default NotFound;
diff --git a/src/App.js b/src/App.js
@@ -154,12 +154,12 @@ const App = () => {
                   <Route path={ROUTES.Perosn_Search} component={PersonSearch} />
 
                   <Route path={ROUTES.Chats} component={ChatPage} />
+
+                  <Route component={NotFound} />
                 </Switch>
                 <ScrollTop />
                 <Footer />
               </>
-
-              <Route component={NotFound} />
             </Switch>
           </Suspense>
         </Router>

diff --git a/src/components/cards/MovieSeries.js b/src/components/cards/MovieSeries.js
@@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-import { img300, unavailableLandscape } from '../../helpers/config';
 import { BiListPlus } from 'react-icons/bi';
 import { AiFillStar } from 'react-icons/ai';
 import { BsFillTrashFill } from 'react-icons/bs';
@@ -21,8 +20,10 @@ import {
   updateProfileWatchlist,
 } from '../../services/firebase';
 
+import { img300, unavailableLandscape } from '../../config/imgConfig';
+
 import { LOGIN } from '../../constants/routes';
-import { settings } from '../../helpers/notification';
+import { notificationSettings } from '../../helpers/notificationSettings';
 import ButtonLoading from '../loaders/ButtonLoading';
 
 const MovieSeries = ({
@@ -55,6 +56,8 @@ const MovieSeries = ({
     };
 
     checkIfThisInWatchlist();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inWatchlist]);
 
   const handleWatchlist = async (id, media_type, title) => {
@@ -64,12 +67,12 @@ const MovieSeries = ({
       setInWatchlist(true);
 
       toast.success(`${title} Added to Your Watchlist`, {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     } catch (error) {
       toast.error('Something Went Wrong', {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     }
@@ -82,12 +85,12 @@ const MovieSeries = ({
       await deleteItemFromWatchlist(userId, id, media_type);
       setInWatchlist(false);
       toast.warn(`${title} removed from Your Watchlist`, {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     } catch (error) {
       toast.error('Something Went Wrong', {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     }

diff --git a/src/components/cards/PersonCard.js b/src/components/cards/PersonCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { img300, noUserImg } from '../../helpers/config';
+import { img300, noUserImg } from '../../config/imgConfig';
 
 const PersonCard = ({ person }) => {
   return (

diff --git a/src/components/details/BannerInfo.js b/src/components/details/BannerInfo.js
@@ -16,13 +16,14 @@ import {
   updateProfileWatchlist,
 } from '../../services/firebase';
 
-import { img300, img500, unavailable } from '../../helpers/config';
+import { img300, img500, unavailable } from '../../config/imgConfig';
 import formatTime from '../../helpers/formatTime';
 import voteColor from '../../helpers/voteColor';
 import { LOGIN } from '../../constants/routes';
 import SocialLinks from '../widget/SocialLinks';
-import { settings } from '../../helpers/notification';
+import { notificationSettings } from '../../helpers/notificationSettings';
 import ButtonLoading from '../loaders/ButtonLoading';
+import WatchData from './WatchData';
 
 const BannerInfo = ({ content, type, runtime }) => {
   const [loading, setLoading] = useState(false);
@@ -40,6 +41,7 @@ const BannerInfo = ({ content, type, runtime }) => {
     };
 
     checkIfThisInWatchlist();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inWatchlist]);
 
   const handleDelete = async (id, media_type, title) => {
@@ -49,12 +51,12 @@ const BannerInfo = ({ content, type, runtime }) => {
       await deleteItemFromWatchlist(userId, id, media_type);
       setInWatchlist(false);
       toast.warn(`${title} removed from Your Watchlist`, {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     } catch (error) {
       toast.error('Something Went Wrong', {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     }
@@ -68,12 +70,12 @@ const BannerInfo = ({ content, type, runtime }) => {
       setInWatchlist(true);
 
       toast.success(`${title} Added to Your Watchlist`, {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     } catch (error) {
       toast.error('Something Went Wrong', {
-        ...settings,
+        ...notificationSettings,
       });
       setLoading(false);
     }
@@ -86,21 +88,19 @@ const BannerInfo = ({ content, type, runtime }) => {
           style={{
             backgroundImage: `radial-gradient(circle at 20% 50%, rgba(30, 39, 44, 0.9) 0%, rgba(30, 39, 44, 0.8) 100%), url(${img500}${content.backdrop_path})`,
           }}
-          className="flex flex-col justify-start items-start sm:flex-row gap-4 bg-cover bg-center"
+          className="flex flex-col justify-start items-start sm:flex-row bg-cover bg-center shadow-lg"
         >
-          <div className="w-full xs:max-w-[280px] mx-auto sm:mx-0 flex justify-center sm:justify-start">
-            <img
-              className="max-w-[250px] xs:max-w-[280px] w-full object-cover align-middle"
-              src={
-                content.poster_path
-                  ? `${img300}${content.poster_path}`
-                  : unavailable
-              }
-              alt={content.title}
-            />
-          </div>
+          <img
+            className="max-w-[300px] xs:max-w-[320px] mx-auto sm:mx-0 w-full object-cover align-middle rounded-sm shadow-lg p-3 sm:p-5"
+            src={
+              content.poster_path
+                ? `${img300}${content.poster_path}`
+                : unavailable
+            }
+            alt={content.title}
+          />
           <Details className="space-y-3">
-            <p className="mb-4 text-white text-xl md:text-2xl lg:text-3xl font-bold text-center sm:text-left">
+            <p className="text-white text-xl md:text-2xl lg:text-3xl font-bold text-center sm:text-left">
               {content.name || content.title}{' '}
               {content.first_air_date || content.release_date
                 ? `(${(
@@ -117,6 +117,8 @@ const BannerInfo = ({ content, type, runtime }) => {
               {runtime ? <span>• {formatTime(runtime)}</span> : ' '}
             </div>
 
+            <WatchData type={type} id={content.id} />
+
             {content.tagline && (
               <i className="block text-center sm:text-left">
                 {content.tagline}

diff --git a/src/components/details/CastnCrew.js b/src/components/details/CastnCrew.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { img200, noUserImg } from '../../helpers/config';
+import { img200, noUserImg } from '../../config/imgConfig';
 import SearchBar from '../search/SearchBar';
 
 const CastnCrew = ({ credits, title }) => {

diff --git a/src/components/details/CollectionData.js b/src/components/details/CollectionData.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 
-import { img300 } from '../../helpers/config';
+import { img300 } from '../../config/imgConfig';
 import { API_URL } from '../../constants/constant';
 import ContentGrid from '../widget/ContentGrid';
 import LoaderCustom from '../loaders/LoaderCustom';

diff --git a/src/components/details/FactBox.js b/src/components/details/FactBox.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import { img200, noPicture } from '../../helpers/config';
+import { img200, noPicture } from '../../config/imgConfig';
 import formatTime from '../../helpers/formatTime';
 import { getDirector, getProducer } from '../../helpers/getCrew';
 import { getLangDetail } from '../../helpers/getLangDetail';
 import CollectionData from './CollectionData';
-// import WatchData from './WatchData';
 import { v4 as uuidv4 } from 'uuid';
-import { dateData } from '../../helpers/dateData';
+import { dateSettings } from '../../helpers/dateSettings';
 
 const FactBox = ({ content, type }) => {
   const {
@@ -32,8 +31,6 @@ const FactBox = ({ content, type }) => {
       <h2 className="detail-tab-title">Facts About {title}</h2>
 
       <div className="max-w-2xl mx-auto">
-        {/* <WatchData type={type} id={id} /> */}
-
         {original_title && (
           <div className="fact-wrap">
             <p className="fact-item">
@@ -109,7 +106,10 @@ const FactBox = ({ content, type }) => {
             <p className="fact-item">
               <span className="fact-type">Release Date : </span>
               <span className="fact-detail">
-                {new Date(release_date).toLocaleDateString('en-US', dateData)}
+                {new Date(release_date).toLocaleDateString(
+                  'en-US',
+                  dateSettings
+                )}
               </span>
             </p>
           </div>
@@ -120,7 +120,7 @@ const FactBox = ({ content, type }) => {
             <p className="fact-item">
               <span className="fact-type">Release Date : </span>
               <span className="fact-detail">
-                {new Date(release).toLocaleDateString('en-US', dateData)}
+                {new Date(release).toLocaleDateString('en-US', dateSettings)}
               </span>
             </p>
           </div>
@@ -131,7 +131,10 @@ const FactBox = ({ content, type }) => {
             <p className="fact-item">
               <span className="fact-type">First Air Date : </span>
               <span className="fact-detail">
-                {new Date(first_air_date).toLocaleDateString('en-US', dateData)}
+                {new Date(first_air_date).toLocaleDateString(
+                  'en-US',
+                  dateSettings
+                )}
               </span>
             </p>
           </div>
@@ -142,7 +145,10 @@ const FactBox = ({ content, type }) => {
             <p className="fact-item">
               <span className="fact-type">Last Air Date : </span>
               <span className="fact-detail">
-                {new Date(last_air_date).toLocaleDateString('en-US', dateData)}
+                {new Date(last_air_date).toLocaleDateString(
+                  'en-US',
+                  dateSettings
+                )}
               </span>
             </p>
           </div>

diff --git a/src/components/details/Gallery.js b/src/components/details/Gallery.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { img500, imgOriginal } from '../../helpers/config';
+import { img500, imgOriginal } from '../../config/imgConfig';
 import LightBoxPop from '../widget/LightBoxPop';
 
 const Gallery = ({ title, photos, backdrop_path, poster_path }) => {