codepath · tobygabriella · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/movie.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flixster</title>
   </head>

diff --git a/src/App.css b/src/App.css
@@ -17,12 +17,13 @@
     width: 100%;
   }
 
-  .search-bar {
+  .searchBar {
     flex-direction: column;
     gap: 10px;
   }
 
-  .search-bar form {
+  .searchBar form {
     flex-direction: column;
   }
 }
+
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,68 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import './App.css'
+import Header from "./components/Header";
+import.meta.env.VITE_API_KEY;
+import NowPlayingScreen from './components/NowPlayingScreen';
+import SearchScreen from './components/SearchScreen.jsx';
+import Footer from './components/Footer.jsx';
 
 const App = () => {
-  <div className="App">
-
-  </div>
+  const [isSearching, setSearching] = useState(false);
+  const [criteria, setCriteria] = useState("");
+
+  const [isFave, setFave] = useState([]);
+  const [isWatched, setWatched] = useState([]);
+
+  function loadFromLocalStorage() {
+    let savedLists = localStorage.getItem("userLists");
+    if (savedLists == undefined || savedLists == null ||savedLists == "") {
+      return;
+    }
+    let ListsObject = JSON.parse(savedLists);
+    setFave(ListsObject.favList);
+    setWatched(ListsObject.watchedList);
+  }
+
+  /**
+   * If the watchlist are now empty, check for stored (usually after a page load)
+   * else: put the current state into localstorage
+   */
+  useEffect(() => {
+    if (isWatched.length == 0 && isFave.length == 0) {
+      loadFromLocalStorage()
+    } else {
+      localStorage.setItem("userLists", JSON.stringify(
+        {
+          favList: isFave,
+          watchedList: isWatched
+        }
+      ))
+    }
+  }, [isFave, isWatched])
+
+  const handleNewCriteria = (criteriaFromHeader) => {
+    setCriteria(criteriaFromHeader)
+  }
+
+  const handleSetFav = (newVal) => {
+    setFave(newVal);
+  }
+
+  const handleSetWatched = (newVal) => {
+    setWatched(newVal);
+  }
+
+  return (
+    <div className="App">
+      <Header sortMovies={handleNewCriteria} setSearching={setSearching} />
+      {!isSearching ?
+        <NowPlayingScreen criteriaFromHeader={criteria} isFave={isFave} setFave={handleSetFav} isWatched={isWatched} setWatched={handleSetWatched}/>
+        :
+        <SearchScreen isFave={isFave} setFave={handleSetFav} isWatched={isWatched} setWatched={handleSetWatched}/>
+      }
+      <Footer />
+    </div>
+  );
 }
 
-export default App
+export default App;
diff --git a/src/components/FavMovies.jsx b/src/components/FavMovies.jsx
@@ -0,0 +1,10 @@
+function FavMovies(props){
+    return(
+        <div>
+            <img src= {"https://image.tmdb.org/t/p/w500"+props.image} width="100" height="100"></img>
+            <p>{props.title}</p>
+        </div>       
+    )
+}
+
+export default FavMovies
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -0,0 +1,59 @@
+.footer {
+    background-color: #141414; 
+    color: white;
+    padding: 20px 0;
+    text-align: center;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
+}
+
+.footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.footer-links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.footer-link {
+    color: #e50914; 
+    margin: 0 10px;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-link:hover {
+    color: #ff1e1e; 
+}
+
+.footer-social {
+    margin-bottom: 20px;
+}
+
+.social-link {
+    color: white;
+    margin: 0 10px;
+    text-decoration: none;
+    font-size: 18px;
+    transition: color 0.3s ease;
+}
+
+.social-link:hover {
+    color: #e50914; 
+}
+
+.footer-bottom {
+    margin-top: 20px;
+}
+
+.footer-bottom p {
+    margin: 0;
+    font-size: 14px;
+    color: #888; 
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,29 @@
+import './Footer.css';
+
+const Footer = () => {
+    return (
+        <footer className="footer">
+            <div className="footer-content">
+                <div className="footer-links">
+                    <a href="#" className="footer-link">FAQ</a>
+                    <a href="#" className="footer-link">Help Center</a>
+                    <a href="#" className="footer-link">Terms of Use</a>
+                    <a href="#" className="footer-link">Privacy</a>
+                    <a href="#" className="footer-link">Cookie Preferences</a>
+                    <a href="#" className="footer-link">Corporate Information</a>
+                </div>
+                <div className="footer-social">
+                    <a href="#" className="social-link">Facebook</a>
+                    <a href="#" className="social-link">Instagram</a>
+                    <a href="#" className="social-link">Twitter</a>
+                    <a href="#" className="social-link">YouTube</a>
+                </div>
+            </div>
+            <div className="footer-bottom">
+                <p>&copy; 2024 Gabriella, Inc.</p>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -0,0 +1,44 @@
+.header {
+    background-color:red;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+}
+
+.header h1 {
+    margin: 0;
+}
+
+.toggleButton {
+    display: flex;
+    align-items: center;
+}
+
+.header input {
+    padding: 5px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+
+.header button {
+    background-color: white;
+    color: #ff0000;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.header .sortBy {
+    background-color: #ff0000;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,21 @@
+import './Header.css';
+
+function Header({setSearching,sortMovies }) {
+
+  return (
+    <div className="header">
+      <h1>Flixster</h1>
+      <div className="toggleButton">
+        <button onClick={() => setSearching(false)}>Now Playing</button>
+        <button onClick={() => setSearching(true)}>Search</button>
+        <select className="sortBy" onChange={(e) => sortMovies(e.target.value)}>
+          <option value="title">Sort by Title</option>
+          <option value="date">Sort by Date</option>
+          <option value="rating">Sort by Rating</option>
+        </select>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/components/ModalContainer.css b/src/components/ModalContainer.css
@@ -0,0 +1,86 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  backdrop-filter: blur(5px);
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.75); 
+}
+
+.modalContent {
+  background: #141414;
+  margin: auto;
+  margin-top: 10%;
+  padding: 20px;
+  border-radius: 10px;
+  width: 50%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  position: relative;
+  color: white;
+  overflow: auto;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
+}
+
+.modalContent div {
+  margin-bottom: 10px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: white; 
+}
+
+.modalBody {
+  margin-top: 20px;
+}
+
+.modalBody div {
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.modalBody img {
+  border-radius: 5px;
+}
+
+.modalBody div:first-child {
+  font-size: 24px;
+  font-weight: bold;
+  color: #e50914; 
+}
+
+.modalBody div:nth-child(3) {
+  font-size: 18px;
+  color: #e50914; 
+}
+
+.modalContent div:nth-child(4){
+  color:white; 
+}
+
+.modalContent div:nth-child(5){
+  color:white; 
+}
+
+button {
+  background-color: #e50914;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-weight: bold;
+}
+
+button:hover {
+  background-color: #ff1e1e; 
+}