formatted code

src/AppRouter.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from 'react'
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
-import Footer from './components/Footer';
+import Footer from './components/Footer'
-import Navbar from './components/Navbar';
+import Navbar from './components/Navbar'
-import Home from './pages/Home';
+import Home from './pages/Home'
-import NotFound from './pages/NotFound';
+import NotFound from './pages/NotFound'
-import Search from './pages/Search';
+import Search from './pages/Search'
 
 const AppRouter = () => (
   <BrowserRouter>
@@ -17,6 +17,6 @@ const AppRouter = () => (
     </Switch>
     <Footer />
   </BrowserRouter>
-);
+)
 
-export default AppRouter;
+export default AppRouter

src/pages/NotFound.js

@@ -1,23 +1,13 @@
 import React from 'react'
 
 const NotFound = () => {
-<<<<<<< HEAD
-  return (
-    <div>
-      <h1>NOT FOUND</h1>
-    </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
+        Sorry, we can't find that page. You'll find lots to explore on the home
-				the home page.
+        page.
       </p>
       <button>Netflix Home</button>
       <span>
@@ -27,8 +17,7 @@ export default NotFound
         FROM <strong>LOST IN SPACE</strong>
       </span>
     </div>
-	);
+  )
-};
+}
 
-export default NotFound;
+export default NotFound
->>>>>>> e91ba1936642090199bf3c2946edc8cc861f864f

src/pages/Search.js

@@ -1,70 +1,58 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux'
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom'
-import ModalMovieDetails from '../components/ModalMovieDetails';
+import ModalMovieDetails from '../components/ModalMovieDetails'
-import Modal from '../components/UI/Modal';
+import Modal from '../components/UI/Modal'
-import { useDebounce } from '../hooks/useDebounce';
+import { useDebounce } from '../hooks/useDebounce'
-import * as movieActions from '../store/actions';
+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();
+  let query = useQuery()
-	const debouncedSearchTerm = useDebounce(query.get('q'), 500);
+  const debouncedSearchTerm = useDebounce(query.get('q'), 500)
-	const [isToggleModal, setIsToggleModal] = useState(false);
+  const [isToggleModal, setIsToggleModal] = useState(false)
-	const { searchResults, isLoading } = useSelector(
+  const { searchResults, isLoading } = useSelector((state) => state.searchMovie)
-		(state) => state.searchMovie
+  const { movieDetails } = useSelector((state) => state.movieDetails)
-	);
+  const dispatch = useDispatch()
-	const { movieDetails } = useSelector((state) => state.movieDetails);
-	const dispatch = useDispatch();
 
   useEffect(() => {
     if (debouncedSearchTerm) {
-			dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm));
+      dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm))
     }
-	}, [debouncedSearchTerm]);
+  }, [debouncedSearchTerm])
 
   const onCloseModalHandler = () => {
-		setIsToggleModal(false);
+    setIsToggleModal(false)
-	};
+  }
 
   const onSelectMovieHandler = (movie) => {
-		dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id));
+    dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id))
-		setIsToggleModal(true);
+    setIsToggleModal(true)
-	};
+  }
 
   const renderSearchResults = () => {
     return searchResults.length > 0 ? (
       <>
         <div className='search-container'>
           {searchResults.map((movie) => {
-						if (
+            if (movie.backdrop_path !== null && movie.media_type !== 'person') {
-							movie.backdrop_path !== null &&
-							movie.media_type !== 'person'
-						) {
               const movieImageUrl =
-								'https://image.tmdb.org/t/p/w500' +
+                'https://image.tmdb.org/t/p/w500' + movie.backdrop_path
-								movie.backdrop_path;
               return (
                 <div className='movie'>
                   <div
-										onClick={() =>
+                    onClick={() => onSelectMovieHandler(movie)}
-											onSelectMovieHandler(movie)
-										}
                     className='movie__column-poster'
                   >
-										<img
+                    <img src={movieImageUrl} alt='' className='movie__poster' />
-											src={movieImageUrl}
-											alt=''
-											className='movie__poster'
-										/>
                   </div>
                 </div>
-							);
+              )
             }
           })}
         </div>
@@ -82,27 +70,21 @@ const Search = () => {
       <div className='no-results'>
         <div className='no-results__text'>
           <p>
-						Your search for "{debouncedSearchTerm}" did not have any
+            Your search for "{debouncedSearchTerm}" did not have any matches.
-						matches.
           </p>
           <p>Suggestions:</p>
           <ul>
             <li>Try different keywords</li>
             <li>Looking for a movie or TV show?</li>
-						<li>
+            <li>Try using a movie, TV show title, an actor or director</li>
-							Try using a movie, TV show title, an actor or
+            <li>Try a genre, like comedy, romance, sports, or drama</li>
-							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

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';