[Don't Pull] MR for review purposes

src/App.css

@@ -53,17 +53,12 @@ header{
   .movie-list {
     /* grid-template-columns: 1fr;
     gap: 15px; */
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);    gap: 16px;
+    display: flex;
+    grid-template-columns: repeat(5, 1fr);    gap: 18px;
     margin-top: 20px;
 
   }
 
-  .movie-card {
-    max-width: 100%;
-    height: 360px;
-  }
-
   .movie-card img {
     height: auto;
     object-fit: contain;
@@ -157,13 +152,18 @@ h2 {
 
 /* Individual movie card */
 .movie-card {
-  background-color: palevioletred;
+  background-color: #f48fb1;
   border-radius: 10px;
   overflow: hidden;
   text-align: center;
   padding: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease;
+  width: 200px;               /* fixed width */
+  height: 400px;              /* fixed height to unify layout */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .movie-card:hover {
@@ -173,13 +173,16 @@ h2 {
 .movie-card img {
   width: 100%;
   border-radius: 10px;
-  height: 270px;
+  height: 250px;
   object-fit: cover;
 }
 
 .movie-card h3 {
   font-size: 1rem;
   margin: 10px 0 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .movie-card p {
@@ -287,7 +290,7 @@ button.eye-icon{
   width: 100%;
   margin: 0 auto;
   padding: 0;
-  display: flex;
+  display: grid;
   align-items: flex-start;
   gap: 0;
   background-color: #ffe6f0; 

src/components/MovieList.jsx

@@ -15,6 +15,7 @@ const MovieList = () => {
   const [favorites, setFavorites] = useState([]);
   const [watched, setWatched] = useState([]);
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [viewMode, setViewMode] = useState('all');
 
 
 
@@ -89,34 +90,48 @@ const MovieList = () => {
     setSelectedMovie(data);
   };
 
-  const toggleFavorite = (movieId) => {
-    setFavorites((prevFavorites) =>
-      prevFavorites.includes(movieId)
-        ? prevFavorites.filter((id) => id !== movieId)
-        : [...prevFavorites, movieId]
-    );
-  };
+  const toggleFavorite = (movie) => {
+  setFavorites((prevFavorites) => {
+    const isAlreadyFavorited = prevFavorites.some((m) => m.id === movie.id);
+    return isAlreadyFavorited
+      ? prevFavorites.filter((m) => m.id !== movie.id)
+      : [...prevFavorites, movie];
+  });
+};
+
+
+
+  const toggleWatched = (movie) => {
+    setWatched((prevWatched) => {
+        const isAlreadyWatched = prevWatched.some((m) => m.id === movie.id);
+        return isAlreadyWatched
+        ? prevWatched.filter((m) => m.id !== movie.id)
+        : [...prevWatched, movie];
+    });
+};
 
-  const toggleWatched = (movieId) => {
-    setWatched((prev) =>
-      prev.includes(movieId)
-        ? prev.filter((id) => id !== movieId)
-        : [...prev, movieId]
-    );
-  };
 
   const getSortedMovies = () => {
-    let sorted = [...movies];
+
+    let filteredMovies;
+
+  if (viewMode === 'favorites') {
+    filteredMovies = [...favorites];
+  } else if (viewMode === 'watched') {
+    filteredMovies = [...watched];
+  } else {
+    filteredMovies = [...movies];
+  }
 
     if (sortOption === 'title') {
-      sorted.sort((a, b) => a.title.localeCompare(b.title));
+      filteredMovies.sort((a, b) => a.title.localeCompare(b.title));
     } else if (sortOption === 'release') {
-      sorted.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
+      filteredMovies.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
     } else if (sortOption === 'rating') {
-      sorted.sort((a, b) => b.vote_average - a.vote_average);
+      filteredMovies.sort((a, b) => b.vote_average - a.vote_average);
     }
 
-    return sorted;
+    return filteredMovies;
   };
 
   const clearSearchBtn = () => {
@@ -127,31 +142,38 @@ const MovieList = () => {
 
   // for sidebar home
    const homePage = () => {
+    setSearchQuery('');
+    setViewMode('all');
     setMode('nowPlaying');
-    setSidebarOpen(!sidebarOpen)
+    setPage(1);
+    setHasMore(true);
+    fetchMovies(1, 'nowPlaying');
+    setSidebarOpen(false);
   }
-
-    // Function to pass to the child component for the "Favorites" button click
-//   const handleShowFavorites = () => {
-//     alert("Displaying liked movies: " + prevFavorites.map(movieId => movie.title).join(', '));
-//   };
 
 
 
-  return (
+
+   return (
     <div className="layout-container">
         <button className="sidebar-toggle" onClick={() => setSidebarOpen(!sidebarOpen)}>
             ☰
         </button>
         {sidebarOpen && (
+
             <Sidebar
-            mode = {homePage}
-            favorites={movies.filter((m) => favorites.includes(m.id))}
-            watched={movies.filter((m) => watched.includes(m.id))}
-            onClose={() => setSidebarOpen(false)}
+                mode={homePage}
+                favorites={favorites}
+                watched={watched}
+                onSelectView={(mode) => {
+                    setViewMode(mode);
+                    setSidebarOpen(false); // close after click
+                }}
             />
+
         )}
 
+
         <main>
             {selectedMovie && (
                 <MovieModal
@@ -193,11 +215,12 @@ const MovieList = () => {
                         title={movie.title}
                         posterPath={movie.poster_path}
                         voteAverage={movie.vote_average}
-                        isFavorite={favorites.includes(movie.id)}
-                        onToggleFavorite={() => toggleFavorite(movie.id)}
-                        hasWatched={watched.includes(movie.id)}
-                        onToggleWatched={() => toggleWatched(movie.id)}
+                        isFavorite={favorites.some((fav) => fav.id === movie.id)}
+                        onToggleFavorite={() => toggleFavorite(movie)}
+                        hasWatched={watched.some((w) => w.id === movie.id)}
+                        onToggleWatched={() => toggleWatched(movie)}
                     />
+
                     </div>
                 ))}
             </div>

src/components/Sidebar.css

@@ -1,5 +1,5 @@
 
-.sidebar {
+/* .sidebar {
   width: 250px;
   background-color: #fff0f5;
   padding: 1rem;
@@ -8,8 +8,21 @@
   overflow-y: auto;
   position: sticky;
   top: 0;
+} */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 100%;
+  background-color: rgba(255, 182, 185, 0.6);
+  z-index: 1000;
+  overflow-y: auto;
+  padding: 20px;
 }
 
+
 .sidebar-section {
   margin-bottom: 2rem;
 }

src/components/Sidebar.jsx

@@ -2,17 +2,15 @@
 import PropTypes from 'prop-types';
 import './Sidebar.css';
 
-const Sidebar = ({mode, favorites, watched }) => {
-
-
+const Sidebar = ({ mode, favorites, watched, onSelectView }) => {
   return (
     <aside className="sidebar">
       <div className="sidebar-section">
-        <button onClick={mode}>🏠 Home</button>       
+        <button onClick={mode}>🏠 Home</button>
       </div>
-      
+
       <div className="sidebar-section">
-        <button>❤️ Favorites</button>
+        <button onClick={() => onSelectView('favorites')}>❤️ Favorites</button>
         {favorites.length === 0 ? (
           <p>No favorites yet.</p>
         ) : (
@@ -25,7 +23,7 @@ const Sidebar = ({mode, favorites, watched }) => {
       </div>
 
       <div className="sidebar-section">
-        <button>👁️ Watched</button>
+        <button onClick={() => onSelectView('watched')}>👁️ Watched</button>
         {watched.length === 0 ? (
           <p>No watched movies.</p>
         ) : (
@@ -36,15 +34,15 @@ const Sidebar = ({mode, favorites, watched }) => {
           </ul>
         )}
       </div>
-
     </aside>
   );
 };
 
 Sidebar.propTypes = {
+  mode: PropTypes.func.isRequired,
   favorites: PropTypes.array.isRequired,
   watched: PropTypes.array.isRequired,
-  mode: PropTypes.func.isRequired,
+  onSelectView: PropTypes.func.isRequired,
 };
 
-export default Sidebar;
+export default Sidebar;