Progress

.env

@@ -0,0 +1 @@
+VITE_API_KEY=4230b01717a30e627d99da67b6a68895

package.json

@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.css

@@ -26,3 +26,13 @@
     flex-direction: column;
   }
 }
+
+.Header {
+  border-style: dashed;
+  border-color: black;
+}
+
+.MovieCard {
+  border-style: dashed;
+  border-color: black;
+}

src/App.jsx

@@ -1,10 +1,30 @@
-import { useState } from 'react'
-import './App.css'
+import React, { useState } from 'react';
+
+import Header from './HomePageComponents/Header';
+import MovieCardsContainer from './HomePageComponents/MovieCardsContainer';
+import DropdownMenu from './HomePageComponents/Sort';
 
 const App = () => {
-  <div className="App">
-
-  </div>
+  const [page, setPage] = useState(1);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortOption, setSortOption] = useState('');
+
+
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+    setPage(1);
+  };
+
+  const handleSortChange = (option) => {
+    setSortOption(option);
+  };
+
+  return (
+    <div className="App">
+      <Header onSearch={handleSearch} />
+      <MovieCardsContainer page={page} searchQuery={searchQuery} sortOption={sortOption} />
+    </div>
+  );
 }
 
-export default App
+export default App;

src/HomePageComponents/Filter.jsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+const Filter = ({ onFilterChange }) => {
+  const [favorited, setFavorited] = useState(false);
+  const [watched, setWatched] = useState(false);
+
+  useEffect(() => {
+    onFilterChange({ favorited, watched });
+  }, [favorited, watched, onFilterChange]);
+
+  return (
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          checked={favorited}
+          onChange={(e) => setFavorited(e.target.checked)}
+        />
+        Favorites
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={watched}
+          onChange={(e) => setWatched(e.target.checked)}
+        />
+        Watched
+      </label>
+    </div>
+  );
+};
+
+export default Filter;

src/HomePageComponents/Header.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+
+const Header = ({ onSearch }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+
+  const handleInputChange = async (event) => {
+    const query = event.target.value;
+    setSearchQuery(query);
+
+    if (query.length > 2) {
+      const apiKey = import.meta.env.VITE_API_KEY;
+      const url = `https://api.themoviedb.org/3/search/movie?query=${encodeURIComponent(query)}&api_key=${apiKey}`;
+      const response = await fetch(url);
+      const data = await response.json();
+      setSuggestions(data.results);
+    } else {
+      setSuggestions([]);
+      if (query.length === 0) {
+        onSearch(''); // Trigger fetching "now playing" movies when search is cleared
+      }
+    }
+  };
+
+  const handleSearch = (query) => {
+    onSearch(query);
+    setSuggestions([]); // Clear suggestions after search
+  };
+
+  const handleKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      handleSearch(searchQuery);
+    }
+  };
+
+  return (
+    <header className="Header">
+      <h1 className='headerTitle'>Flixster</h1>
+      <input
+        type="text"
+        id="searchBar"
+        placeholder="Search movies..."
+        className="searchBar"
+        value={searchQuery}
+        onChange={handleInputChange}
+        onKeyPress={handleKeyPress}
+      />
+      <button onClick={() => handleSearch(searchQuery)}>Search</button>
+      {suggestions.length > 0 && (
+        <ul className="suggestions">
+          {suggestions.map((movie, index) => (
+            <li key={index} onClick={() => {
+              setSearchQuery(movie.title);
+              handleSearch(movie.title); // Pass the movie title directly to handleSearch
+            }}>
+              <img src={`https://image.tmdb.org/t/p/w92${movie.poster_path}`} alt={movie.title} style={{ marginRight: '10px' }} />
+              {movie.title}
+            </li>
+          ))}
+        </ul>
+      )}
+    </header>
+  );
+}
+
+export default Header;

src/HomePageComponents/LoadMoreButton.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LoadMoreButton = ({ onLoadMore }) => {
+  return (
+    <div className="LoadMore">
+      <button className="LoadMoreButton" onClick={onLoadMore}>Load More</button>
+    </div>
+  );
+}
+
+export default LoadMoreButton;

src/HomePageComponents/MovieCard.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHeart as farHeart } from '@fortawesome/free-regular-svg-icons';
+import { faHeart as fasHeart } from '@fortawesome/free-solid-svg-icons';
+
+const MovieCard = ({ movie, isFavorite, isWatched, onToggleFavorite, onToggleWatched }) => {
+  return (
+    <div className="MovieCard">
+      <h3>{movie?.title}</h3>
+      <img src={`https://image.tmdb.org/t/p/w200${movie?.poster_path}`} alt={movie?.title} />
+      <div>
+        <button onClick={onToggleFavorite} style={{ color: isFavorite ? 'red' : 'grey', border: 'none', background: 'transparent' }}>
+          <FontAwesomeIcon icon={isFavorite ? fasHeart : farHeart} size="lg" />
+        </button>
+        <label>
+          <input type="checkbox" checked={isWatched} onChange={onToggleWatched} />
+          Watched
+        </label>
+        <span>Rating: {movie?.vote_average} / 10</span>
+      </div>
+    </div>
+  );
+};
+
+export default MovieCard;