feat: Flixter - Pull Request to base repo

src/App.css

@@ -17,6 +17,22 @@
   z-index: 1000;
 }
 
+.App-footer {
+  background-color: #282c34;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  padding: 1.5rem;
+
+  /* position: fixed; */
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+}
+
 @media (max-width: 900px) {
   .movie-card {
     width: 100%;

src/App.jsx

@@ -7,6 +7,7 @@ import SortForm from './SortForm'
 const App = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [view, setView] = useState('nowPlaying'); // 'nowPlaying' or 'search'
+  const [sortBy, setSortBy] = useState('default');
 
   const handleSearch = (query) => {
     setSearchQuery(query);
@@ -22,18 +23,24 @@ const App = () => {
     setView(selectedView);
   };
 
+  const handleSortChange = (sortOption) => {
+    setSortBy(sortOption);
+  };
+
   return (
     <div className="App">
       <header className="App-header">
         <h1>Flixster</h1>
         <SearchForm onSearch={handleSearch} onClear={handleClearSearch} />
-        <SortForm />
+        <SortForm onSortChange={handleSortChange} />
       </header>
-      <MovieList
-        searchQuery={searchQuery}
-        view={view}
-        onViewToggle={handleViewToggle}
-      />
+      <sidebar className='App-sidebar'>
+
+      </sidebar>
+      <MovieList searchQuery={searchQuery}  view={view}   sortBy={sortBy}  onViewToggle={handleViewToggle}/>
+      <footer className='App-footer'>
+        <p>Copyright © 2025 Flixster</p>
+      </footer>
     </div>
   )
 }

src/MovieList.css

@@ -1,5 +1,5 @@
 .movie-list-container {
-  padding: 11rem 3.5rem;
+  padding: 11rem 3.5rem 4rem 3.5rem;
 }
 
 .view-toggle {

src/MovieList.jsx

@@ -3,7 +3,7 @@ import MovieCard from './MovieCard';
 import MovieModal from './MovieModal';
 import './MovieList.css';
 
-const MovieList = ({ searchQuery, view, onViewToggle }) => {
+const MovieList = ({ searchQuery, view, sortBy, onViewToggle }) => {
   const [selectedMovie, setSelectedMovie] = useState(null);
   const [movies, setMovies] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -86,7 +86,6 @@ const MovieList = ({ searchQuery, view, onViewToggle }) => {
     }
   };
 
-  // initial fetch of
   useEffect(() => {
     if (view === 'nowPlaying') {
       fetchMovies(1);
@@ -101,7 +100,26 @@ const MovieList = ({ searchQuery, view, onViewToggle }) => {
     return <div className="error">{error}</div>;
   }
 
-  const displayedMovies = view === 'nowPlaying' ? movies : searchResults;
+  // sort the movies based on the selected sort option
+  const sortMovies = (moviesToSort) => {
+    if (!moviesToSort || moviesToSort.length === 0) return [];
+
+    const sortedMovies = [...moviesToSort];
+
+    switch (sortBy) {
+      case 'title':
+        return sortedMovies.sort((a, b) => a.title.localeCompare(b.title));
+      case 'release_date':
+        return sortedMovies.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
+      case 'vote_average':
+        return sortedMovies.sort((a, b) => b.vote_average - a.vote_average);
+      default:
+        return sortedMovies;
+    }
+  };
+
+  const unsortedMovies = view === 'nowPlaying' ? movies : searchResults;
+  const displayedMovies = sortMovies(unsortedMovies);
   const title = view === 'nowPlaying' ? 'Now Playing' : `Search Results for "${searchQuery}"`;
 
   const handleMovieClick = (movie) => {

src/SortForm.css

@@ -1,16 +1,59 @@
-.sort-button
+.sort-form {
+    position: relative;
+}
 
-{
-    height: 4.05rem;
+.sort-dropdown {
+    position: relative;
+    display: inline-block;
+}
 
+.sort-button {
+    height: 4.05rem;
     border: 0.1rem solid rgba(250, 82, 82, 0.6);
     border-radius: 1rem;
-
-
     background-color: #1a1e21;
     color: rgb(250, 82, 82, 0.8);
     padding: 0 3.5rem;
-
     cursor: pointer;
     place-content: center;
+    white-space: nowrap;
+    min-width: 200px;
+    text-align: center;
+}
+
+.sort-button:hover {
+    background-color: #2a2e31;
+}
+
+.sort-options {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    margin-top: 0.5rem;
+    padding: 0.5rem 0;
+    background-color: #1a1e21;
+    border: 0.1rem solid rgba(250, 82, 82, 0.6);
+    border-radius: 0.5rem;
+    list-style: none;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.sort-option {
+    padding: 0.8rem 1.2rem;
+    cursor: pointer;
+    color: #fff;
+    transition: background-color 0.2s;
+}
+
+.sort-option:hover {
+    background-color: #2a2e31;
+}
+
+.sort-option.selected {
+    background-color: rgba(250, 82, 82, 0.2);
+    color: #fa5252;
 }

src/SortForm.jsx

@@ -1,14 +1,57 @@
-import './SortForm.css'
-
-const SortForm = () =>
-    {
-        return (
-            <div className = "SortForm">
-                <button className='sort-button'>
-                    Sort By: &darr;
+import { useState } from 'react';
+import './SortForm.css';
+
+const SortForm = ({ onSortChange }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedSort, setSelectedSort] = useState('default');
+
+    const sortOptions = [
+        { id: 'default', label: 'Default' },
+        { id: 'title', label: 'Title (A-Z)' },
+        { id: 'release_date', label: 'Release Date)' },
+        { id: 'vote_average', label: 'Vote Average' }
+    ];
+
+    const handleSortClick = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const handleOptionClick = (sortId) => {
+        setSelectedSort(sortId);
+        setIsOpen(false);
+        onSortChange(sortId);
+    };
+
+    return (
+        <div className="sort-form">
+            <div className="sort-dropdown">
+                <button
+                    className="sort-button"
+                    onClick={handleSortClick}
+                    aria-expanded={isOpen}
+                    aria-haspopup="listbox"
+                >
+                    Sort By: {sortOptions.find(option => option.id === selectedSort).label} &darr;
                 </button>
+
+                {isOpen && (
+                    <ul className="sort-options" role="listbox">
+                        {sortOptions.map(option => (
+                            <li
+                                key={option.id}
+                                className={`sort-option ${selectedSort === option.id ? 'selected' : ''}`}
+                                onClick={() => handleOptionClick(option.id)}
+                                role="option"
+                                aria-selected={selectedSort === option.id}
+                            >
+                                {option.label}
+                            </li>
+                        ))}
+                    </ul>
+                )}
             </div>
-        )
-    }
+        </div>
+    );
+};
 
-export default SortForm
+export default SortForm;