From 4b72e0cfc1482d3a35e9e9d5873de99498afcc6d Mon Sep 17 00:00:00 2001
From: andres alcocer <andresalcocer7@yahoo.com>
Date: Thu, 3 Feb 2022 19:06:02 -0500
Subject: [PATCH] formatted code

---
 src/AppRouter.js                          |  38 ++---
 src/pages/NotFound.js                     |  39 ++---
 src/pages/Search.js                       | 174 ++++++++++------------
 src/static/sass/components/_notfound.scss |   8 +-
 src/static/sass/style.scss                |   3 -
 5 files changed, 115 insertions(+), 147 deletions(-)

diff --git a/src/AppRouter.js b/src/AppRouter.js
index 809a3a0..9d001af 100644
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -1,22 +1,22 @@
-import React from 'react';
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
-import Footer from './components/Footer';
-import Navbar from './components/Navbar';
-import Home from './pages/Home';
-import NotFound from './pages/NotFound';
-import Search from './pages/Search';
+import React from 'react'
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
+import Footer from './components/Footer'
+import Navbar from './components/Navbar'
+import Home from './pages/Home'
+import NotFound from './pages/NotFound'
+import Search from './pages/Search'
 
 const AppRouter = () => (
-	<BrowserRouter>
-		<Navbar />
-		<Switch>
-			<Route path='/' exact render={() => <Redirect to='/browse' />} />
-			<Route path='/browse' component={Home} />
-			<Route path='/search' component={Search} />
-			<Route component={NotFound} />
-		</Switch>
-		<Footer />
-	</BrowserRouter>
-);
+  <BrowserRouter>
+    <Navbar />
+    <Switch>
+      <Route path='/' exact render={() => <Redirect to='/browse' />} />
+      <Route path='/browse' component={Home} />
+      <Route path='/search' component={Search} />
+      <Route component={NotFound} />
+    </Switch>
+    <Footer />
+  </BrowserRouter>
+)
 
-export default AppRouter;
+export default AppRouter
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 12b8df6..ce25cea 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -1,34 +1,23 @@
 import React from 'react'
 
 const NotFound = () => {
-<<<<<<< HEAD
   return (
-    <div>
-      <h1>NOT FOUND</h1>
+    <div className='not-found__message'>
+      {/* TODO: add css to match netflix not found page */}
+      <h1>LOST YOUR WAY?</h1>
+      <p>
+        Sorry, we can't find that page. You'll find lots to explore on the home
+        page.
+      </p>
+      <button>Netflix Home</button>
+      <span>
+        Error Code <strong>NSES-404</strong>
+      </span>
+      <span>
+        FROM <strong>LOST IN SPACE</strong>
+      </span>
     </div>
   )
 }
 
 export default NotFound
-=======
-	return (
-		<div className='not-found__message'>
-			{/* TODO: add css to match netflix not found page */}
-			<h1>LOST YOUR WAY?</h1>
-			<p>
-				Sorry, we can't find that page. You'll find lots to explore on
-				the home page.
-			</p>
-			<button>Netflix Home</button>
-			<span>
-				Error Code <strong>NSES-404</strong>
-			</span>
-			<span>
-				FROM <strong>LOST IN SPACE</strong>
-			</span>
-		</div>
-	);
-};
-
-export default NotFound;
->>>>>>> e91ba1936642090199bf3c2946edc8cc861f864f
diff --git a/src/pages/Search.js b/src/pages/Search.js
index 4023ae0..fe8d326 100644
--- a/src/pages/Search.js
+++ b/src/pages/Search.js
@@ -1,108 +1,90 @@
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import ModalMovieDetails from '../components/ModalMovieDetails';
-import Modal from '../components/UI/Modal';
-import { useDebounce } from '../hooks/useDebounce';
-import * as movieActions from '../store/actions';
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
+import ModalMovieDetails from '../components/ModalMovieDetails'
+import Modal from '../components/UI/Modal'
+import { useDebounce } from '../hooks/useDebounce'
+import * as movieActions from '../store/actions'
 
 // A custom hook that builds on useLocation to parse
 // the query string for you.
 const useQuery = () => {
-	return new URLSearchParams(useLocation().search);
-};
+  return new URLSearchParams(useLocation().search)
+}
 
 const Search = () => {
-	let query = useQuery();
-	const debouncedSearchTerm = useDebounce(query.get('q'), 500);
-	const [isToggleModal, setIsToggleModal] = useState(false);
-	const { searchResults, isLoading } = useSelector(
-		(state) => state.searchMovie
-	);
-	const { movieDetails } = useSelector((state) => state.movieDetails);
-	const dispatch = useDispatch();
+  let query = useQuery()
+  const debouncedSearchTerm = useDebounce(query.get('q'), 500)
+  const [isToggleModal, setIsToggleModal] = useState(false)
+  const { searchResults, isLoading } = useSelector((state) => state.searchMovie)
+  const { movieDetails } = useSelector((state) => state.movieDetails)
+  const dispatch = useDispatch()
 
-	useEffect(() => {
-		if (debouncedSearchTerm) {
-			dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm));
-		}
-	}, [debouncedSearchTerm]);
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm))
+    }
+  }, [debouncedSearchTerm])
 
-	const onCloseModalHandler = () => {
-		setIsToggleModal(false);
-	};
+  const onCloseModalHandler = () => {
+    setIsToggleModal(false)
+  }
 
-	const onSelectMovieHandler = (movie) => {
-		dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id));
-		setIsToggleModal(true);
-	};
+  const onSelectMovieHandler = (movie) => {
+    dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id))
+    setIsToggleModal(true)
+  }
 
-	const renderSearchResults = () => {
-		return searchResults.length > 0 ? (
-			<>
-				<div className='search-container'>
-					{searchResults.map((movie) => {
-						if (
-							movie.backdrop_path !== null &&
-							movie.media_type !== 'person'
-						) {
-							const movieImageUrl =
-								'https://image.tmdb.org/t/p/w500' +
-								movie.backdrop_path;
-							return (
-								<div className='movie'>
-									<div
-										onClick={() =>
-											onSelectMovieHandler(movie)
-										}
-										className='movie__column-poster'
-									>
-										<img
-											src={movieImageUrl}
-											alt=''
-											className='movie__poster'
-										/>
-									</div>
-								</div>
-							);
-						}
-					})}
-				</div>
-				<Modal
-					show={isToggleModal}
-					modalClosed={onCloseModalHandler}
-					backgroundImage={
-						movieDetails.backdrop_path || movieDetails.poster_path
-					}
-				>
-					<ModalMovieDetails movie={movieDetails} />
-				</Modal>
-			</>
-		) : (
-			<div className='no-results'>
-				<div className='no-results__text'>
-					<p>
-						Your search for "{debouncedSearchTerm}" did not have any
-						matches.
-					</p>
-					<p>Suggestions:</p>
-					<ul>
-						<li>Try different keywords</li>
-						<li>Looking for a movie or TV show?</li>
-						<li>
-							Try using a movie, TV show title, an actor or
-							director
-						</li>
-						<li>
-							Try a genre, like comedy, romance, sports, or drama
-						</li>
-					</ul>
-				</div>
-			</div>
-		);
-	};
+  const renderSearchResults = () => {
+    return searchResults.length > 0 ? (
+      <>
+        <div className='search-container'>
+          {searchResults.map((movie) => {
+            if (movie.backdrop_path !== null && movie.media_type !== 'person') {
+              const movieImageUrl =
+                'https://image.tmdb.org/t/p/w500' + movie.backdrop_path
+              return (
+                <div className='movie'>
+                  <div
+                    onClick={() => onSelectMovieHandler(movie)}
+                    className='movie__column-poster'
+                  >
+                    <img src={movieImageUrl} alt='' className='movie__poster' />
+                  </div>
+                </div>
+              )
+            }
+          })}
+        </div>
+        <Modal
+          show={isToggleModal}
+          modalClosed={onCloseModalHandler}
+          backgroundImage={
+            movieDetails.backdrop_path || movieDetails.poster_path
+          }
+        >
+          <ModalMovieDetails movie={movieDetails} />
+        </Modal>
+      </>
+    ) : (
+      <div className='no-results'>
+        <div className='no-results__text'>
+          <p>
+            Your search for "{debouncedSearchTerm}" did not have any matches.
+          </p>
+          <p>Suggestions:</p>
+          <ul>
+            <li>Try different keywords</li>
+            <li>Looking for a movie or TV show?</li>
+            <li>Try using a movie, TV show title, an actor or director</li>
+            <li>Try a genre, like comedy, romance, sports, or drama</li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
 
-	return !isLoading ? renderSearchResults() : <h1>Loading...</h1>;
-};
+  return !isLoading ? renderSearchResults() : <h1>Loading...</h1>
+}
 
-export default Search;
+export default Search
diff --git a/src/static/sass/components/_notfound.scss b/src/static/sass/components/_notfound.scss
index c56da4f..7f21563 100644
--- a/src/static/sass/components/_notfound.scss
+++ b/src/static/sass/components/_notfound.scss
@@ -1,9 +1,9 @@
 .not-found__message {
-	position: absolute;
-	top: 50%;
-	left: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
 }
 
 .not-found__message > h1 {
-	color: #fff;
+  color: #fff;
 }
diff --git a/src/static/sass/style.scss b/src/static/sass/style.scss
index dbbc967..4e69e61 100644
--- a/src/static/sass/style.scss
+++ b/src/static/sass/style.scss
@@ -8,10 +8,7 @@
 @import 'components/search';
 @import 'components/movie';
 @import 'components/movieShowcase';
-<<<<<<< HEAD
-=======
 @import 'components/notfound';
->>>>>>> e91ba1936642090199bf3c2946edc8cc861f864f
 
 @import 'layout/footer';
 @import 'layout/header';