🎨 added empty states for movies and shows

src/components/EmptyState.tsx

@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+import { Icon } from './Icon';
+
+export const EmptyState = () => (
+  <div className="bg-gray-100 max-w-80 m-auto mt-12 rounded-3xl p-5">
+    <div className="text-center">
+      <Icon name="ufo" />
+      <h1 className="my-5 text-2xl font-bold">Nothing to see here yet</h1>
+      <p className="my-5 font-thin">
+        Start following a show or add a movie to your watchlist
+      </p>
+      <Link
+        to="/search"
+        className="bg-gray-200 py-2 px-6 rounded-full text-gray-700 inline-block"
+      >
+        Go for it!
+      </Link>
+    </div>
+  </div>
+);

src/components/Icon.tsx

@@ -15,6 +15,7 @@ import Share from 'assets/share-svgrepo-com.svg?react';
 import Like from 'assets/like-svgrepo-com.svg?react';
 import Play from 'assets/play-circle-svgrepo-com.svg?react';
 import Logout from 'assets/logout-2-svgrepo-com.svg?react';
+import Ufo from 'assets/ufo-3-svgrepo-com.svg?react';
 import { ThemeContext } from 'contexts';
 import React, { HTMLProps, useContext } from 'react';
 
@@ -36,6 +37,7 @@ const iconsMap = {
   like: <Like />,
   play: <Play />,
   logout: <Logout />,
+  ufo: <Ufo />,
 } as const;
 
 interface IconProps extends HTMLProps<HTMLDivElement> {

src/pages/movies/MoviesWatched.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from 'state/store';
 import ImageLink from '../../components/ImageLink';
 import PaginationContainer from '../../components/Pagination/PaginationContainer';
 import { usePagination } from '../../hooks';
+import { EmptyState } from 'components/EmptyState';
 
 export const MoviesWatched: React.FC = () => {
   const [orderedMovies, setOrderedMovies] = useState<MovieWatched[]>([]);
@@ -21,7 +22,7 @@ export const MoviesWatched: React.FC = () => {
     setOrderedMovies(newItems);
   }, [watched]);
 
-  return (
+  return orderedMovies.length ? (
     <PaginationContainer items={orderedMovies} onFilter={setGenres}>
       <ul className="flex flex-wrap p-2 items-stretch justify-center">
         {getItemsByPage().map((m, i) => (
@@ -41,5 +42,7 @@ export const MoviesWatched: React.FC = () => {
         ))}
       </ul>
     </PaginationContainer>
+  ) : (
+    <EmptyState />
   );
 };

src/pages/movies/MoviesWatchlist.tsx

@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { filterByGenres } from 'state/slices/movies';
 import { useAppSelector } from 'state/store';
 import { usePagination } from '../../hooks';
+import { EmptyState } from 'components/EmptyState';
 
 export const MoviesWatchlist: React.FC = () => {
   const [genres, setGenres] = useState<string[]>([]);
@@ -29,7 +30,7 @@ export const MoviesWatchlist: React.FC = () => {
 
   const { getItemsByPage } = usePagination(orderedMovies);
 
-  return (
+  return orderedMovies.length ? (
     <PaginationContainer items={orderedMovies} onFilter={setGenres}>
       <ul className="flex flex-wrap p-2 items-stretch justify-center">
         {getItemsByPage().map((m, i) => (
@@ -49,5 +50,7 @@ export const MoviesWatchlist: React.FC = () => {
         ))}
       </ul>
     </PaginationContainer>
+  ) : (
+    <EmptyState />
   );
 };

src/pages/shows/ShowsWatched.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from 'state/store';
 import ImageLink from '../../components/ImageLink';
 import PaginationContainer from '../../components/Pagination/PaginationContainer';
 import { usePagination } from '../../hooks';
+import { EmptyState } from 'components/EmptyState';
 
 const ShowsWatched: React.FC = () => {
   const [orderedShows, setOrderedShows] = useState<ShowWatched[]>([]);
@@ -29,7 +30,7 @@ const ShowsWatched: React.FC = () => {
 
   const { getItemsByPage } = usePagination(orderedShows);
 
-  return (
+  return orderedShows.length ? (
     <PaginationContainer items={orderedShows} onFilter={setGenres}>
       <ul className="flex flex-wrap p-2 items-stretch justify-center">
         {getItemsByPage().map((m) => (
@@ -49,6 +50,8 @@ const ShowsWatched: React.FC = () => {
         ))}
       </ul>
     </PaginationContainer>
+  ) : (
+    <EmptyState />
   );
 };
 

src/pages/shows/ShowsWatchlist.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from 'state/store';
 import ImageLink from '../../components/ImageLink';
 import PaginationContainer from '../../components/Pagination/PaginationContainer';
 import { usePagination } from '../../hooks';
+import { EmptyState } from 'components/EmptyState';
 
 const ShowsWatchlist: React.FC = () => {
   const [genres, setGenres] = useState<string[]>([]);
@@ -28,7 +29,7 @@ const ShowsWatchlist: React.FC = () => {
     }, []);
   const { getItemsByPage } = usePagination(orderedShows);
 
-  return (
+  return orderedShows.length ? (
     <PaginationContainer items={orderedShows} onFilter={setGenres}>
       <ul className="flex flex-wrap p-2 items-stretch justify-center">
         {getItemsByPage().map((m) => (
@@ -48,6 +49,8 @@ const ShowsWatchlist: React.FC = () => {
         ))}
       </ul>
     </PaginationContainer>
+  ) : (
+    <EmptyState />
   );
 };