Merge pull request #23 from Mridul2820/update-site

Bug Fixes
Mridul2820 · Jun 3, 2022 · 28e41ec · 28e41ec · vercel · Jun 3, 2022
2 parents d7ff477 + 4f58e64
commit 28e41ec
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 94 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,4 @@
 import React, { lazy, Suspense } from 'react';
-import Loader from 'react-loader-spinner';
 import DocumentMeta from 'react-document-meta';
 
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@@ -9,11 +8,13 @@ import UserContext from './context/user';
 import useAuthListner from './hooks/useAuthListner';
 import IsUserLoggedIn from './helpers/IsUserLoggedIn';
 
+import { ogDefault, ogImage, twitterData } from './constants/constant';
+import LoaderCustom from './components/widget/LoaderCustom';
+
 import Header from './components/nav/Header';
 import Navbar from './components/nav/Navbar';
 import Footer from './components/footer/Footer';
 import ScrollTop from './components/widget/ScrollTop';
-import { ogDefault, ogImage, twitterData } from './constants/constant';
 
 const Login = lazy(() => import('./pages/Login'));
 const Dashboard = lazy(() => import('./pages/Dashboard'));
@@ -68,19 +69,7 @@ const App = () => {
     <UserContext.Provider value={{ user }}>
       <DocumentMeta {...meta}>
         <Router>
-          <Suspense
-            fallback={
-              <div className="flex flex-col justify-center items-center w-full min-h-screen">
-                <Loader
-                  type="Circles"
-                  color="#00BFFF"
-                  height={50}
-                  width={200}
-                  className="m-5"
-                />
-              </div>
-            }
-          >
+          <Suspense fallback={<LoaderCustom />}>
             <Switch>
               <IsUserLoggedIn
                 user={user}

diff --git a/src/components/details/BannerInfo.js b/src/components/details/BannerInfo.js
@@ -74,19 +74,17 @@ const BannerInfo = ({ content, type, runtime }) => {
 
             <div className="flex items-center flex-wrap gap-3 justify-center sm:justify-start">
               {content.genres?.map((genre) => (
-                <a
+                <ChipLink
                   key={uuidv4()}
                   href={`/genre/${type}/${genre.name}/${genre.id}`}
                 >
-                  <div className="cursor-pointer">
-                    <Chip
-                      className="chip"
-                      label={genre.name}
-                      color="primary"
-                      size="small"
-                    />
-                  </div>
-                </a>
+                  <Chip
+                    className="chip"
+                    label={genre.name}
+                    color="primary"
+                    size="small"
+                  />
+                </ChipLink>
               ))}
             </div>
 
@@ -110,8 +108,8 @@ const BannerInfo = ({ content, type, runtime }) => {
                 }
               }}
             >
-              <BiListPlus size="24px" />
-              <p>Add to watchlist</p>
+              <BiListPlus size={24} />
+              <p className="text-base ml-2 leading-4">Add to watchlist</p>
             </Watch>
           </Details>
         </section>
@@ -143,11 +141,6 @@ const Watch = styled.div`
   font-size: 10px;
   color: #fff;
   margin-top: 5px;
-
-  p {
-    font-size: 17px;
-    margin-left: 8px;
-  }
 `;
 
 const Rating = styled.div`
@@ -161,4 +154,10 @@ const Rating = styled.div`
   background-color: ${({ vote_average, voteColor }) => voteColor(vote_average)};
 `;
 
+const ChipLink = styled.a`
+  .MuiChip-root {
+    cursor: pointer !important;
+  }
+`;
+
 export default BannerInfo;
diff --git a/src/components/details/CollectionData.js b/src/components/details/CollectionData.js
@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import Loader from 'react-loader-spinner';
 
 import { img300 } from '../../helpers/config';
-import { Container } from '../../styles/Styles';
 import { API_URL } from '../../constants/constant';
 import ContentGrid from '../widget/ContentGrid';
+import LoaderCustom from '../widget/LoaderCustom';
 
 const apiKey = `api_key=${process.env.REACT_APP_TMDB}`;
 
@@ -29,17 +28,7 @@ const CollectionData = ({ collectionId, type }) => {
   }, []);
 
   if (loading) {
-    return (
-      <Container className="flex flex-col justify-center items-center w-full">
-        <Loader
-          type="Circles"
-          color="#00BFFF"
-          height={50}
-          width={200}
-          className="m-5"
-        />
-      </Container>
-    );
+    return <LoaderCustom />;
   }
 
   return (

diff --git a/src/components/details/FactBox.js b/src/components/details/FactBox.js
@@ -19,6 +19,7 @@ const FactBox = ({ content, type }) => {
     networks,
     title,
     seasons,
+    release_date,
     last_air_date,
     first_air_date,
     belongs_to_collection,
@@ -102,6 +103,18 @@ const FactBox = ({ content, type }) => {
             </p>
           </div>
         )}
+
+        {release_date && (
+          <div className="fact-wrap">
+            <p className="fact-item">
+              <span className="fact-type">Release Date : </span>
+              <span className="fact-detail">
+                {new Date(release_date).toLocaleDateString('en-US', dateData)}
+              </span>
+            </p>
+          </div>
+        )}
+
         {release && (
           <div className="fact-wrap">
             <p className="fact-item">
@@ -113,45 +126,49 @@ const FactBox = ({ content, type }) => {
           </div>
         )}
 
-        {runtime ? (
+        {first_air_date && (
           <div className="fact-wrap">
             <p className="fact-item">
-              <span>Runtime : </span>
-              <span className="fact-detail">{formatTime(runtime)}</span>
+              <span className="fact-type">First Air Date : </span>
+              <span className="fact-detail">
+                {new Date(first_air_date).toLocaleDateString('en-US', dateData)}
+              </span>
             </p>
           </div>
-        ) : (
-          ' '
         )}
 
-        {lang && (
+        {last_air_date && (
           <div className="fact-wrap">
             <p className="fact-item">
-              <span className="fact-type">Original Language : </span>
+              <span className="fact-type">Last Air Date : </span>
               <span className="fact-detail">
-                {getLangDetail(lang).name}
-                {getLangDetail(lang).nativeName &&
-                  getLangDetail(lang).nativeName !== ' ' &&
-                  ` (${getLangDetail(lang).nativeName})`}
+                {new Date(last_air_date).toLocaleDateString('en-US', dateData)}
               </span>
             </p>
           </div>
         )}
 
-        {first_air_date && (
+        {runtime ? (
           <div className="fact-wrap">
             <p className="fact-item">
-              <span className="fact-type">First Air Date : </span>
-              <span className="fact-detail">{first_air_date}</span>
+              <span>Runtime : </span>
+              <span className="fact-detail">{formatTime(runtime)}</span>
             </p>
           </div>
+        ) : (
+          ' '
         )}
 
-        {last_air_date && (
+        {lang && (
           <div className="fact-wrap">
             <p className="fact-item">
-              <span className="fact-type">Last Air Date : </span>
-              <span className="fact-detail">{last_air_date}</span>
+              <span className="fact-type">Original Language : </span>
+              <span className="fact-detail">
+                {getLangDetail(lang).name}
+                {getLangDetail(lang).nativeName &&
+                  getLangDetail(lang).nativeName !== ' ' &&
+                  ` (${getLangDetail(lang).nativeName})`}
+              </span>
             </p>
           </div>
         )}

diff --git a/src/components/widget/LightBoxPop.js b/src/components/widget/LightBoxPop.js
@@ -1,22 +1,26 @@
 import React from 'react';
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css';
+import LoaderCustom from './LoaderCustom';
 
 const LightBoxPop = ({ imageArray, photoIndex, setPhotoIndex, setIsOpen }) => {
   return (
     <Lightbox
       mainSrc={imageArray[photoIndex]}
+      onCloseRequest={() => setIsOpen(false)}
       nextSrc={imageArray[(photoIndex + 1) % imageArray.length]}
       prevSrc={
         imageArray[(photoIndex + imageArray.length - 1) % imageArray.length]
       }
-      onCloseRequest={() => setIsOpen(false)}
-      onMovePrevRequest={() =>
-        setPhotoIndex(photoIndex + imageArray.length - 1) % imageArray.length
-      }
       onMoveNextRequest={() =>
         setPhotoIndex((photoIndex + 1) % imageArray.length)
       }
+      onMovePrevRequest={() =>
+        setPhotoIndex((photoIndex + imageArray.length - 1) % imageArray.length)
+      }
+      loader={<LoaderCustom />}
+      imagePadding={50}
+      closeLabel="Close Modal"
     />
   );
 };

diff --git a/src/components/widget/LoaderCustom.js b/src/components/widget/LoaderCustom.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Loader from 'react-loader-spinner';
+import { Container } from '../../styles/Styles';
+
+const LoaderCustom = () => {
+  return (
+    <Container className="flex flex-col justify-center items-center w-full">
+      <Loader
+        type="Circles"
+        color="#00BFFF"
+        height={50}
+        width={200}
+        className="m-5"
+      />
+    </Container>
+  );
+};
+
+export default LoaderCustom;
diff --git a/src/constants/routes.js b/src/constants/routes.js
@@ -5,7 +5,7 @@ export const PROFILE = '/p/:username';
 
 export const Trending = '/trending';
 export const Genres = '/genres';
-export const Search = '/search';
+export const Search = '/search-movie-tv';
 
 // Movies
 export const Movies_Discover = '/discover-movies';

diff --git a/src/data/menuData.js b/src/data/menuData.js
@@ -90,11 +90,11 @@ export const optionsNav = [
 
 export const optionsAll = [
   {
-    title: 'Trending',
+    title: 'Trending List',
     route: ROUTES.Trending,
   },
   {
-    title: 'Genres',
+    title: 'Genres List',
     route: ROUTES.Genres,
   },
   {

diff --git a/src/pages/search/MovieTVSearch.js b/src/pages/search/MovieTVSearch.js
@@ -37,7 +37,7 @@ const MovieTVSearch = () => {
 
   const fetchSearch = async () => {
     const { data } = await axios.get(
-      `${searchURL}${type}?${apiKey}&language=en-US&query=${searchText}&page=${page}$`
+      `${searchURL}${type}?${apiKey}&language=en-US&query=${searchText}&page=${page}`
     );
 
     setContents(data.results);

diff --git a/src/pages/withid/DetailsPage.js b/src/pages/withid/DetailsPage.js
@@ -3,7 +3,6 @@ import axios from 'axios';
 import DocumentMeta from 'react-document-meta';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import Loader from 'react-loader-spinner';
 
 import BannerInfo from '../../components/details/BannerInfo';
 import CastnCrew from '../../components/details/CastnCrew';
@@ -16,6 +15,7 @@ import { API_URL, BASE_URL } from '../../constants/constant';
 import { img500 } from '../../helpers/config';
 
 import { Container } from '../../styles/Styles';
+import LoaderCustom from '../../components/widget/LoaderCustom';
 
 const detailURL = `${API_URL}/`;
 const apiKey = `api_key=${process.env.REACT_APP_TMDB}`;
@@ -94,17 +94,7 @@ const DetailsPage = () => {
   };
 
   if (loading) {
-    return (
-      <Container className="flex flex-col justify-center items-center w-full">
-        <Loader
-          type="Circles"
-          color="#00BFFF"
-          height={50}
-          width={200}
-          className="m-5"
-        />
-      </Container>
-    );
+    return <LoaderCustom />;
   }
 
   return (

diff --git a/src/pages/withid/PersonDetail.js b/src/pages/withid/PersonDetail.js
@@ -1,6 +1,5 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import Loader from 'react-loader-spinner';
 import DocumentMeta from 'react-document-meta';
 import { useParams } from 'react-router-dom';
 import DetailCard from '../../components/person/DetailCard';
@@ -10,6 +9,7 @@ import { API_URL, BASE_URL } from '../../constants/constant';
 
 import { Container } from '../../styles/Styles';
 import { img500 } from '../../helpers/config';
+import LoaderCustom from '../../components/widget/LoaderCustom';
 
 const detailURL = `${API_URL}/`;
 const apiKey = `api_key=${process.env.REACT_APP_TMDB}`;
@@ -56,17 +56,7 @@ const PersonDetail = () => {
   };
 
   if (loading) {
-    return (
-      <Container className="flex flex-col justify-center items-center w-full">
-        <Loader
-          type="Circles"
-          color="#00BFFF"
-          height={50}
-          width={200}
-          className="m-5"
-        />
-      </Container>
-    );
+    return <LoaderCustom />;
   }
 
   return (