Merge pull request #33 from Mridul2820/update-site

Watch data issue fix
Mridul2820 · Jun 10, 2022 · 649c6b7 · 649c6b7 · vercel · Jun 10, 2022
2 parents 8c44a56 + b0c2448
commit 649c6b7
Show file tree

Hide file tree

Showing 13 changed files with 1,390 additions and 51 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,6 +12,7 @@
         <link rel="shortcut icon" href="favicon.ico" />
         <link rel="apple-touch-icon" href="apple-touch-icon.png" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
         <title>CineParadis</title>
     </head>
     <body>

diff --git a/src/components/details/BannerInfo.js b/src/components/details/BannerInfo.js
@@ -17,7 +17,7 @@ import {
 } from '../../services/firebase';
 
 import { img300, img500, unavailable } from '../../config/imgConfig';
-import formatTime from '../../helpers/formatTime';
+import { formatTime } from '../../helpers/formatTime';
 import voteColor from '../../helpers/voteColor';
 import { LOGIN } from '../../constants/routes';
 import SocialLinks from '../widget/SocialLinks';

diff --git a/src/components/details/CastnCrew.js b/src/components/details/CastnCrew.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import { img200, noUserImg } from '../../config/imgConfig';
-import SearchBar from '../search/SearchBar';
+import SearchWithIcon from '../search/SearchWithIcon';
 
 const CastnCrew = ({ credits, title }) => {
   const [search, setSearch] = useState('');
@@ -21,8 +21,7 @@ const CastnCrew = ({ credits, title }) => {
   return (
     <section className="tab-section">
       <h2 className="detail-tab-title">Cast of {title}</h2>
-
-      <SearchBar
+      <SearchWithIcon
         search={search}
         handleChange={handleChange}
         placeHolder="Search in Cast"

diff --git a/src/components/details/FactBox.js b/src/components/details/FactBox.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
 import { img200, noPicture } from '../../config/imgConfig';
-import formatTime from '../../helpers/formatTime';
+import { formatTime } from '../../helpers/formatTime';
 import { getDirector, getProducer } from '../../helpers/getCrew';
 import { getLangDetail } from '../../helpers/getLangDetail';
 import CollectionData from './CollectionData';
-import { v4 as uuidv4 } from 'uuid';
 import { dateSettings } from '../../helpers/dateSettings';
 
 const FactBox = ({ content, type }) => {

diff --git a/src/components/details/WatchData.js b/src/components/details/WatchData.js
@@ -1,55 +1,140 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 
+import { IoMdArrowDropdownCircle } from 'react-icons/io';
+import { AiFillCloseCircle } from 'react-icons/ai';
+
+import SearchWithIcon from '../search/SearchWithIcon';
 import { API_URL } from '../../constants/constant';
 import { img200, noPicture } from '../../config/imgConfig';
+import { countryFullName } from '../../helpers/countryFull';
+
 const apiKey = `api_key=${process.env.REACT_APP_TMDB}`;
 
 const WatchData = ({ type, id }) => {
-  // eslint-disable-next-line
-  const [watchData, setCatchData] = useState([]);
-  const [country, setCountry] = useState();
+  const dropdownRef = useRef();
+  const [search, setSearch] = useState('');
+  const [watchData, setWatchData] = useState([]);
+  const [dropdown, setDropdown] = useState(false);
+  const [country, setCountry] = useState(
+    localStorage.getItem('country') || 'IN'
+  );
 
   const fetchWatchData = async () => {
-    const country = await axios.get('http://ip-api.com/json');
-    setCountry(country.data.countryCode);
-
     const { data } = await axios(
       `${API_URL}/${type}/${id}//watch/providers?${apiKey}`
     );
-    setCatchData(data.results);
+    setWatchData(data.results);
   };
 
   useEffect(() => {
     fetchWatchData();
     // eslint-disable-next-line
-  }, []);
+  }, [country]);
+
+  useEffect(() => {
+    const checkIfClickedOutside = (e) => {
+      if (
+        dropdown &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target)
+      ) {
+        setDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', checkIfClickedOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', checkIfClickedOutside);
+    };
+  }, [dropdown]);
 
   const CountryWatchData = watchData[country];
+  const CountryCodes = Object.keys(watchData);
+
+  const FilteredCodes = CountryCodes.filter(
+    (code) =>
+      code.toLowerCase().includes(search.toLowerCase()) ||
+      countryFullName(code).toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+  };
 
   return (
-    <div className="flex flex-wrap items-center justify-center sm:justify-start gap-4 pt-2">
-      {CountryWatchData?.flatrate?.map((item) => (
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href={CountryWatchData?.link}
-          key={uuidv4()}
-          className="p-2 shadow-2xl border-2 border-blue-200 rounded-md flex items-center gap-2 cursor-pointer"
-          title={`Watch now on ${item.provider_name}`}
+    <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start">
+      <div className="flex flex-wrap items-center justify-center sm:justify-start gap-4 pt-2">
+        {CountryWatchData?.flatrate?.map((item) => (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={CountryWatchData?.link}
+            key={uuidv4()}
+            className="p-2 shadow-2xl border-2 border-blue-200 rounded-md flex items-center gap-2 cursor-pointer"
+            title={`Watch now on ${item.provider_name}`}
+          >
+            <img
+              src={item.logo_path ? `${img200}${item.logo_path}` : noPicture}
+              alt={item.provider_name}
+              className="w-10 h-10 rounded-full"
+            />
+            <div className="leading-4 -mt-1">
+              <span className="text-sm ">Watch now on</span>{' '}
+              <p className="font-semibold">{item.provider_name}</p>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      <div className="relative">
+        <div
+          className="flex gap-1 items-center p-2 cursor-pointer w-16"
+          onClick={() => setDropdown(!dropdown)}
+          title={countryFullName(country)}
         >
-          <img
-            src={item.logo_path ? `${img200}${item.logo_path}` : noPicture}
-            alt={item.provider_name}
-            className="w-10 h-10 rounded-full"
-          />
-          <div className="leading-4 -mt-1">
-            <span className="text-sm ">Watch now on</span>{' '}
-            <p className="font-semibold">{item.provider_name}</p>
-          </div>
-        </a>
-      ))}
+          <span className="font-semibold">{country}</span>
+          {dropdown ? (
+            <AiFillCloseCircle size={24} />
+          ) : (
+            <IoMdArrowDropdownCircle size={27} />
+          )}
+        </div>
+        <div className="absolute -left-16 dropdown">
+          {dropdown && (
+            <div
+              ref={dropdownRef}
+              className="bg-white shadow-lg rounded-sm max-h-60 w-48 overflow-y-scroll p-2 block select-none"
+            >
+              <SearchWithIcon
+                search={search}
+                handleChange={handleChange}
+                placeHolder={`Search Country`}
+                searchId={`search-country`}
+                small
+              />
+              {FilteredCodes.map((code) => (
+                <div
+                  key={uuidv4()}
+                  className={`${
+                    country === code && 'bg-gray-300'
+                  } text-black text-sm cursor-pointer px-2 py-1 flex gap-2`}
+                  onClick={() => {
+                    setCountry(code);
+                    localStorage.setItem('country', code);
+                    setDropdown(false);
+                  }}
+                >
+                  <span className="font-semibold">{code}</span>
+                  <span className="font-medium">{countryFullName(code)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/components/person/PersonCredits.js b/src/components/person/PersonCredits.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import SearchBar from '../search/SearchBar';
+import SearchWithIcon from '../search/SearchWithIcon';
 import ContentGrid from '../widget/ContentGrid';
 import Paginate from '../widget/Paginate';
 
@@ -30,7 +30,7 @@ const PersonCredits = ({ credits, media_type }) => {
   return (
     <div className="mb-2">
       <div className="mt-8">
-        <SearchBar
+        <SearchWithIcon
           search={search}
           handleChange={handleChange}
           placeHolder={`Search in ${media_type}`}

diff --git a/src/components/search/SearchBarIcon.js → src/components/search/SearchWithButton.js b/src/components/search/SearchBarIcon.js → src/components/search/SearchWithButton.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const SearchBarIcon = ({ onSubmit, onChange, placeHolder, searchId }) => {
+const SearchWithButton = ({ onSubmit, onChange, placeHolder, searchId }) => {
   return (
     <form onSubmit={onSubmit} className="min-w-[300px]">
       <div className="relative w-full">
@@ -36,4 +36,4 @@ const SearchBarIcon = ({ onSubmit, onChange, placeHolder, searchId }) => {
   );
 };
 
-export default SearchBarIcon;
+export default SearchWithButton;
diff --git a/src/components/search/SearchBar.js → src/components/search/SearchWithIcon.js b/src/components/search/SearchBar.js → src/components/search/SearchWithIcon.js
@@ -1,21 +1,33 @@
 import React from 'react';
 
-const SearchBar = ({ search, handleChange, placeHolder, searchId }) => {
+const SearchWithIcon = ({
+  search,
+  handleChange,
+  placeHolder,
+  searchId,
+  small,
+}) => {
   return (
     <form className="max-w-[300px] mx-auto mb-5">
       <div className="relative w-full">
         <input
           type="search"
           id={searchId}
-          className="block p-3 w-full z-20 text-sm text-gray-900 bg-gray-50 border border-blue-300 focus:ring-blue-500 focus:border-blue-500 rounded-md shadow-bs5"
+          className={`block pl-7 w-full z-20 text-sm text-gray-900 bg-gray-50 border border-blue-300 focus:ring-blue-500 focus:border-blue-500 rounded-md shadow-bs5 ${
+            small ? 'py-1' : 'py-3'
+          }`}
           placeholder={placeHolder}
           value={search}
           onChange={handleChange}
         />
 
-        <div className="absolute right-0 top-0 mt-3 mr-3">
+        <div
+          className={`absolute left-1.5 top-0 opacity-90 text-black ${
+            small ? 'mt-2' : 'mt-3'
+          }`}
+        >
           <svg
-            className="w-5 h-5"
+            className={small ? 'w-4 h-4' : 'w-5 h-5'}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -34,4 +46,4 @@ const SearchBar = ({ search, handleChange, placeHolder, searchId }) => {
   );
 };
 
-export default SearchBar;
+export default SearchWithIcon;