feat(watchlist): store added to watchlist movies ids

src/components/header/header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { logout } from '@/store/userSlice';
-import { RootState } from '@/store/userStore';
+import { RootState } from '@/store/store';
 import { getCookie } from 'cookies-next';
 import { LogIn, LogOut } from 'lucide-react';
 import Link from 'next/link';

src/modules/detailMovie/detailMovie.tsx

@@ -11,13 +11,14 @@ import Genres from '@/components/genres/genres';
 import YearRuntime from '@/components/yearRuntime/yearRuntime';
 import CrewList from '@/components/crewList/crewList';
 import TopCast from '@/components/topCast/topCast';
-import { useSelector } from 'react-redux';
-import { RootState } from '@/store/userStore';
-import { Plus } from 'lucide-react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/store/store';
+import { Check, Plus } from 'lucide-react';
 import { addToWatchlist } from '@/api/watchlist.api';
 import { getCookie } from 'cookies-next';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { addWatchlist } from '@/store/watchlistSlice';
 
 interface IDetailMovieModule {
   id: string;
@@ -28,6 +29,10 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
   const [movie, setMovie] = useState<DetailMovie>();
   const [isLoading, setIsLoading] = useState(true);
   const accessToken = getCookie('accessToken') as string;
+  const wathclistIds = useSelector(
+    (state: RootState) => state.watchlist.watchlistIds,
+  );
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const fetchMovie = async () => {
@@ -55,13 +60,16 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
       console.log(data);
       const res = await addToWatchlist(accessToken, data);
       toast.success('Movie added to watchlist');
+      dispatch(addWatchlist(res.id));
       console.log('added to watchlist');
-      console.log(res);
     } catch (e) {
       toast.error('failed adding to watchlist');
       console.log('failed to add to watchlist');
     }
   };
+  const handleAddedToWatchlist = () => {
+    toast.success('Movie already added to watchlist');
+  };
 
   if (!movie) {
     return;
@@ -109,7 +117,16 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
             <Genres genres={movie.genres} />
             <div className="flex flex-row gap-4">
               <Rating rating={movie.vote_average} />
-              {user && (
+              {user && wathclistIds.includes(movie.id) && (
+                <button
+                  onClick={handleAddedToWatchlist}
+                  className="flex flex-row items-center gap-2 rounded-xl bg-green-500 px-3 py-2 text-sm font-bold text-black duration-150 hover:scale-105 hover:cursor-pointer hover:bg-green-600 md:px-4 md:text-base"
+                >
+                  <Check />
+                  <p className="">Added to watchlist</p>
+                </button>
+              )}
+              {user && !wathclistIds.includes(movie.id) && (
                 <button
                   onClick={handleAddWatchlist}
                   className="flex flex-row items-center gap-2 rounded-xl bg-yellow-500 px-3 py-2 text-sm font-bold text-black duration-150 hover:scale-105 hover:cursor-pointer hover:bg-yellow-600 md:px-4 md:text-base"

src/modules/home/home.tsx

@@ -7,12 +7,37 @@ import Backdrop from '@/components/backdrop/backdrop';
 import ListMovies from '@/components/listMovies/listMovies';
 import MyPagination from '@/components/myPagination/myPagination';
 import SearchBar from '@/components/searchBar/searchBar';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/store/store';
+import { getCookie } from 'cookies-next';
+import { getWatchlist } from '@/api/watchlist.api';
+import { addWatchlist } from '@/store/watchlistSlice';
 
 const HomeModule: React.FC = () => {
   const [movies, setMovies] = useState<Movie[]>([]);
   const [backdrop, setBackdrop] = useState<string>('');
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [query, setQuery] = useState<string>('');
+  const user = useSelector((state: RootState) => state.user.user);
+  const accessToken = getCookie('accessToken') as string;
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!user) {
+      return;
+    }
+    const fetchWatchlist = async () => {
+      try {
+        const res = await getWatchlist(accessToken);
+        for (const movie of res) {
+          dispatch(addWatchlist(movie.id));
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    fetchWatchlist();
+  }, [user, accessToken]);
 
   useEffect(() => {
     if (query !== '') {

src/modules/watchlist/watchlist.tsx

@@ -7,7 +7,7 @@ import { SquareArrowOutUpRight } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSelector } from 'react-redux';
-import { RootState } from '@/store/userStore';
+import { RootState } from '@/store/store';
 import { useRouter } from 'next/navigation';
 
 interface Movie {
@@ -35,8 +35,6 @@ const WatchlistModule = () => {
     const fetchWatchlist = async () => {
       try {
         const res = await getWatchlist(accessToken);
-        console.log('WATCHLIST');
-        console.log(res);
         setWatchlist(res);
       } catch (e) {
         console.log(e);
@@ -52,7 +50,7 @@ const WatchlistModule = () => {
           Your watchlist is empty :{`(`}
         </div>
       ) : (
-        <div className="flex flex-col px-4 md:px-10">
+        <div className="flex w-full flex-col px-10 md:px-14">
           <h1 className="m-3 text-center text-lg font-bold md:text-xl lg:text-2xl">
             Watchlist
           </h1>
@@ -61,7 +59,7 @@ const WatchlistModule = () => {
             {watchlist.map((movie, index) => (
               <div
                 key={movie.id}
-                className="flex w-full flex-col items-center gap-3 border-b-[1px] border-slate-500 p-2 md:flex-row"
+                className="flex w-full flex-col items-center gap-3 border-b-[1px] border-slate-500 p-2 py-4 md:flex-row md:py-8"
               >
                 <Image
                   src={`${baseUrl}${movie.poster_path}`}
@@ -71,7 +69,7 @@ const WatchlistModule = () => {
                   className="rounded-md"
                 />
                 <div className="flex w-full flex-col gap-1">
-                  <p className="text-sm font-semibold md:text-base">
+                  <p className="text-center text-sm font-semibold md:text-left md:text-base">
                     {movie.title} ({movie.release_date.split('-')[0]})
                   </p>
                   <p className="hidden text-xs md:block md:text-sm">
@@ -80,6 +78,7 @@ const WatchlistModule = () => {
                 </div>
                 <Link
                   href={`/${movie.id}`}
+                  target="_blank"
                   className="rounded-md p-1 duration-150 hover:cursor-pointer hover:bg-slate-200 hover:bg-opacity-15"
                 >
                   <SquareArrowOutUpRight />

src/provider/userProvider.tsx

@@ -2,7 +2,7 @@
 
 import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
-import { store } from '@/store/userStore';
+import { store } from '@/store/store';
 
 const UserProvider = ({ children }: { children: ReactNode }) => {
   return <Provider store={store}>{children}</Provider>;

src/store/userStore.ts → src/store/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import userReducer from './userSlice';
+import watchlistReducer from './watchlistSlice';
 
 export const store = configureStore({
   reducer: {
     user: userReducer,
+    watchlist: watchlistReducer,
   },
 });
 

src/store/watchlistSlice.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface WatchlistState {
+  watchlistIds: number[];
+}
+
+const initialState: WatchlistState = {
+  watchlistIds: [],
+};
+
+const watchlistSlice = createSlice({
+  name: 'watchlist',
+  initialState,
+  reducers: {
+    addWatchlist: (state, action: PayloadAction<number>) => {
+      state.watchlistIds.push(action.payload);
+    },
+  },
+});
+
+export const { addWatchlist } = watchlistSlice.actions;
+
+export default watchlistSlice.reducer;