Resolved save Post Bug

src/components/Cards/MovieCard.jsx

@@ -1,50 +1,35 @@
-import React, { useState, useEffect } from 'react'
-import styles from '../../style'
-import { Link } from 'react-router-dom'
-import { FaHeart, FaRegHeart } from 'react-icons/fa'
-import { useUserAuth } from '../../context/authContext'
-import { database } from '../../firebase/firebaseConfig'
-import { arrayRemove, arrayUnion, doc, updateDoc } from 'firebase/firestore'
+import React, { useState, useEffect } from "react";
+import styles from "../../style";
+import { Link } from "react-router-dom";
+import { FaHeart, FaRegHeart } from "react-icons/fa";
+import { useUserAuth } from "../../context/authContext";
 
-const MovieCard = (props) => {
-  const { user } = useUserAuth()
-  const [like, setLike] = useState(false)
-  const [saved, setSaved] = useState(false)
-
-  const movieID = doc(database, 'users', `${user?.email}`)
 
+const MovieCard = (props) => {
+  const { user } = useUserAuth();
+  const [like, setLike] = useState(false);
   const saveShow = async () => {
-    if (user?.email) {
-      setLike(!like)
-      setSaved(true)
-    } else {
-      alert('Please log in to save a movie')
-    }
-  }
-
-  const handleSave = async () => {
-    if (like) {
-      await updateDoc(movieID, {
-        savedShows: arrayUnion({
-          id: props.movie.id,
-          title: props.movie.title,
-          img: props.movie.backdrop_path,
-        }),
-      })
-    } else {
-      await updateDoc(movieID, {
-        savedShows: arrayRemove({
-          id: props.movie.id,
-          title: props.movie.title,
-          img: props.movie.backdrop_path,
-        }),
-      })
+    if (user) {
+      try {
+        const savedShows = await JSON.parse(localStorage.getItem("savedShows"));
+        if (savedShows) {
+          if (savedShows.find((show) => show.id === props.movie.id)) {
+            localStorage.setItem("savedShows", JSON.stringify(savedShows.filter((show) => show.id !== props.movie.id)));
+            setLike(false);
+          } else {
+            localStorage.setItem("savedShows", JSON.stringify([...savedShows, props.movie]));
+            setLike(true);
+          }
+        } else {
+          localStorage.setItem("savedShows", JSON.stringify([props.movie]));
+          setLike(true);
+        }
+      } catch (error) {
+        console.log(error);
+      }
     }
   }
 
-  useEffect(() => {
-    handleSave()
-  }, [like])
 
   return (
     <div className={`shadow flex my-4 p-3 group`} key={props.movie.id}>

src/components/SavedShows.jsx

@@ -1,43 +1,42 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { MdChevronLeft, MdChevronRight } from 'react-icons/md'
-import { useUserAuth } from '../context/authContext'
-import { database } from '../firebase/firebaseConfig'
-import { updateDoc, doc, onSnapshot } from 'firebase/firestore'
-
-import { Link } from 'react-router-dom'
-import SavedCards from './SavedCards'
+import React, { useState, useEffect, useRef } from 'react';
+import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
+import { useUserAuth } from '../context/authContext';
+import { AiOutlineClose } from 'react-icons/ai';
+import { Link } from 'react-router-dom';
 
 const SavedShows = () => {
-  const [movies, setMovies] = useState([])
-  const { user } = useUserAuth()
-  const sliderRef = useRef(null)
-
+  const [movies, setMovies] = useState([]);
+  const { user } = useUserAuth();
+  const sliderRef = useRef(null);
+  const firebaseImageUrlPrefix = 'https://image.tmdb.org/t/p/original/';
   const slideLeft = () => {
     sliderRef.current.scrollLeft -= 500
   }
 
   const slideRight = () => {
     sliderRef.current.scrollLeft += 500
   }
+  useEffect(async () => {
+    if (user) {
+      try {
+        const savedShows = await JSON.parse(localStorage.getItem('savedShows'));
+        setMovies(savedShows);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }, []);
 
-  useEffect(() => {
-    onSnapshot(doc(database, 'users', `${user?.email}`), (doc) => {
-      setMovies(doc.data()?.savedShows)
-    })
-  }, [user?.email])
-
-  const movieRef = doc(database, 'users', `${user?.email}`)
-  const deleteMovie = async (passedID) => {
+  const deleteShow = async (passedID) => {
     try {
-      const result = movies.filter((item) => item.id !== passedID)
-      await updateDoc(movieRef, {
-        savedShows: result,
-      })
+      localStorage.setItem('savedShows', JSON.stringify(movies.filter((movie) => movie.id !== passedID)));
+      setMovies(movies.filter((movie) => movie.id !== passedID));
     } catch (error) {
-      return error;
+      console.log(error);
     }
   }
 
+
   return (
     <>
       <h2 className='text-gray-900 dark:text-white font-bold md:text-xl p-4 bg-gray-200 dark:bg-primary'>
@@ -68,8 +67,32 @@ const SavedShows = () => {
             ref={sliderRef}
             className='w-full h-full overflow-x-hidden whitespace-nowrap relative flex items-stretch'
           >
-            {movies &&
-              movies.map((item) => <SavedCards item={item} deleteMovie={deleteMovie} />)}
+
+            {movies && movies.map((item) => (
+
+              <div
+                key={item.id}
+                className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block cursor-pointer relative p-2 bg-gray-200 dark:bg-primary'
+              >
+                  <Link to={'/movie/' + item.title + '/' + item.id}>
+                <img
+                  className='w-full h-auto block'
+                  src={`https://image.tmdb.org/t/p/w500/${item?.poster_path}`}
+                  alt={item?.title} loading='lazy'
+                  style={{ height: '250px' }}
+                />
+                <div className='absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white'>
+
+                    <p className='white-space-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center'>
+                      {item?.title}
+                    </p>
+                    </div>
+                    </Link>
+                <p onClick={()=> deleteShow(item.id)} className='absolute text-gray-300 top-4 right-4'><AiOutlineClose /></p>
+
+              </div>
+
+            ))}
           </div>
         )}
         <MdChevronRight