\n \n \n \n \n
\n {title}
\n \n );\n }","// React\nimport { useEffect,\n useState,\n useRef,\n useContext\n} from 'react';\nimport { NavLink } from 'react-router-dom';\n\n// Styles\nimport './MovieList.view.css';\n\n// Context\nimport { MoviesContext } from '../../contexts/MoviesContext';\n\n// Components\nimport Card from '../../components/Card/Card';\n\n// API\nimport { fetchMovies } from '../../api/fetchMovies';\n\n// Icons\nimport { CgSearch } from \"react-icons/cg\";\n\nexport default function MovieListView() {\n const { movies, setMovies } = useContext(MoviesContext);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const inputRef = useRef();\n const containerRef = useRef();\n\n const updateMovies = async (event) => {\n event.preventDefault();\n\n const movies = await fetchMovies(searchTerm)\n .then(movies => movies)\n .catch(e => console.error(e));\n \n setMovies(movies);\n }\n\n useEffect(() => {\n containerRef.current.scrollTo(0, 0); // Scroll to top of page.\n inputRef.current.focus();\n }, []);\n\n return (\n\n
\n );\n}","// Styles\nimport './Banner.css';\n\nexport default function Banner({ title, pic, imgType, subtitle, isMutable, handleTitleChange, handleSubtitleChange, update }) {\n return (\n \n
\n Movies
\n \n- \n {\n movies.map((movie) => {\n return (\n
\n 
\n
\n );\n}","// React\nimport { useContext, useEffect, useRef } from 'react';\n\n// Components\nimport Banner from '../../components/Banner/Banner';\n\n// Styles\nimport './Movie.view.css';\n\n// Context\nimport { MoviesContext } from '../../contexts/MoviesContext';\n\n// Controller\nimport { addToLocalStorage } from './Movie.controller';\n\nexport default function MovieView({ location, navigation }) {\n const { selectedMovie, setSelectedMovie } = useContext(MoviesContext);\n const { \n title,\n year,\n poster,\n director,\n origin,\n wiki_page,\n crew,\n genre,\n plot\n } = selectedMovie ? selectedMovie : {};\n\n const containerRef = useRef();\n\n const handleAddToList = (event, listName) => {\n event.stopPropagation();\n\n addToLocalStorage(listName, title);\n alert(`Added \"${title}\" to ${listName}.`);\n }\n\n useEffect(() => {\n document.querySelector(\".content\").scrollTo(0, 0);\n \n if (location.state) {\n setSelectedMovie(location.state);\n }\n // eslint-disable-next-line\n }, []);\n\n return (\n \n {\n isMutable\n ? <>\n handleTitleChange(e)} />\n handleSubtitleChange(e)} />\n update()}\n >\n Update\n \n \n : <>\n
\n \n {title}\n
\n\n {subtitle}\n
\n \n }\n\n \n
\n );\n}\n","export const addToLocalStorage = (listName, movie) => {\n let listItems = JSON.parse(localStorage.getItem(listName)) || [];\n listItems = Array.from(\n new Set([...listItems, movie])\n );\n\n localStorage.setItem(listName, JSON.stringify(listItems));\n}","// React\nimport { useEffect, useState, useRef } from 'react';\n\n// Styles\nimport './UserList.view.css';\n\n// Controllers\nimport { init } from './UserList.controller';\n\n// Components\nimport Card from '../../components/Card/Card';\n\nexport default function UserListView() {\n const [username, setUsername] = useState(\"\");\n const [pic, setPic] = useState(\"\");\n const containerRef = useRef();\n\n useEffect(() => {\n containerRef.current.scrollTo(0, 0); // Scroll to top of page.\n init();\n\n const {\n username,\n pic\n } = JSON.parse(localStorage.getItem(\"profile\"));\n\n setUsername(username);\n setPic(pic);\n }, []);\n\n return (\n \n \n \n \n \n
\n \n {plot}\n
\n- \n
- \n
Cast
\n{crew}
\n \n - \n
Director
\n{director}
\n \n - \n
Origin
\n{origin}
\n \n - \n
Genre
\n{genre}
\n \n
Wiki
\n \n\n \n
\n );\n}","export const init = () => {\n const profile = localStorage.getItem(\"profile\");\n\n if (!profile) {\n const username = \"demo user\";\n const pic = \"https://images.pexels.com/photos/4681107/pexels-photo-4681107.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\";\n const location = \"Saint Louis, MO\";\n const watchlist = [];\n const completed = [];\n const dropped = [];\n const favorites = [];\n\n localStorage.setItem(\"profile\", JSON.stringify({ username, pic, location, watchlist, completed, dropped, favorites }));\n }\n}","import './Item.css';\n\nexport default function Item({ listName, text, deleteCallback }) {\n return (\n Just you
\n{text}
\n\n
\n );\n}","export const init = () => {\n const profile = localStorage.getItem(\"profile\");\n\n if (!profile) {\n const username = \"Demo User\";\n const pic = \"https://images.pexels.com/photos/4681107/pexels-photo-4681107.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\";\n const location = \"Saint Louis, MO\";\n\n localStorage.setItem(\"profile\", JSON.stringify({ username, pic, location }));\n }\n}\n\nexport const updateProfile = ({ username, pic, location }) => {\n localStorage.setItem(\"profile\", JSON.stringify({ username, pic, location }));\n}","import { NavLink } from 'react-router-dom';\n\n// Icons\nimport { \n CgFilm,\n CgProfile,\n CgUserList\n } from \"react-icons/cg\";\n\n// Styles\nimport './Menu.css';\n\nexport default function Menu() {\n return (\n - \n
- \n
Favorites
\n- \n {\n favorites.length > 0\n ? favorites.map(e => \n
- \n
\n Nothing added to favorites.\n
\n \n }\n
\n - \n
- \n
Watchlist
\n- \n {\n watchlist.length > 0\n ? watchlist.map(e => \n
- \n
\n Nothing added to watchlist.\n
\n \n }\n
\n - \n
- \n
Completed
\n- \n {\n completed.length > 0\n ? completed.map(e => \n
- \n
\n Nothing added to completed.\n
\n \n }\n
\n - \n
- \n
Dropped
\n- \n {\n dropped.length > 0\n ? dropped.map(e => \n
- \n
\n Nothing added to dropped.\n
\n \n }\n
\n - \n
\n \n
\n
\n );\n}","// React\nimport React from 'react';\nimport { \n HashRouter, \n Route, \n Redirect, \n Switch \n} from 'react-router-dom';\n\n// Styles\nimport './reset.css';\nimport './App.css';\n\n// Context\nimport MoviesProvider from \"./contexts/MoviesContext\";\n\n// Views\nimport MovieListView from './views/MovieList/MovieList.view';\nimport MovieView from './views/Movie/Movie.view';\nimport UserListView from './views/UserList/UserList.view';\nimport UserView from './views/User/User.view';\n\n// Components\nimport Menu from './components/Menu/Menu';\n\nexport default function App() {\n return (\n \n
\n - \n
- \n
\n Profile\n \n - \n
\n Movies\n \n - \n
\n Users\n \n