From 969e28f26ec11d5069b0600cf864869cca007961 Mon Sep 17 00:00:00 2001
From: MOHAMED RIAD <mohamedriiad@gmail.com>
Date: Fri, 10 Dec 2021 22:45:43 +0100
Subject: [PATCH 1/2] MRI: Adding some styling for NotFound component

---
 src/AppRouter.js                          |  39 +++--
 src/pages/NotFound.js                     |  16 +-
 src/pages/Search.js                       | 175 ++++++++++++----------
 src/static/sass/components/_notfound.scss |   9 ++
 src/static/sass/style.scss                |  23 +--
 5 files changed, 144 insertions(+), 118 deletions(-)
 create mode 100644 src/static/sass/components/_notfound.scss

diff --git a/src/AppRouter.js b/src/AppRouter.js
index 48aa069..809a3a0 100644
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -1,23 +1,22 @@
-import React from 'react'
-import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
-
-import Home from './pages/Home'
-import NotFound from './pages/NotFound'
-import Search from './pages/Search'
-import Navbar from './components/Navbar'
-import Footer from './components/Footer'
+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 695e077..b38e7e4 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -1,11 +1,11 @@
 import React from 'react';
 
-const  NotFound = () => {
-  return (
-    <div>
-      <h1>NOT FOUND</h1>
-    </div>
-  );
-}
+const NotFound = () => {
+	return (
+		<div className='not-found__message'>
+			<h1>NOT FOUND</h1>
+		</div>
+	);
+};
 
-export default NotFound
\ No newline at end of file
+export default NotFound;
diff --git a/src/pages/Search.js b/src/pages/Search.js
index b4c4aa3..4023ae0 100644
--- a/src/pages/Search.js
+++ b/src/pages/Search.js
@@ -1,91 +1,108 @@
-import React, { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
-
-import { useDebounce } from '../hooks/useDebounce'
-import * as movieActions from '../store/actions'
-import Modal from '../components/UI/Modal'
-import ModalMovieDetails from '../components/ModalMovieDetails'
+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
new file mode 100644
index 0000000..c56da4f
--- /dev/null
+++ b/src/static/sass/components/_notfound.scss
@@ -0,0 +1,9 @@
+.not-found__message {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+}
+
+.not-found__message > h1 {
+	color: #fff;
+}
diff --git a/src/static/sass/style.scss b/src/static/sass/style.scss
index 8057664..4e69e61 100644
--- a/src/static/sass/style.scss
+++ b/src/static/sass/style.scss
@@ -1,14 +1,15 @@
-@import "abstracts/functions";
-@import "abstracts/variables";
+@import 'abstracts/functions';
+@import 'abstracts/variables';
 
-@import "base/base";
+@import 'base/base';
 
-@import "components/backdrop";
-@import "components/modal";
-@import "components/search";
-@import "components/movie";
-@import "components/movieShowcase";
+@import 'components/backdrop';
+@import 'components/modal';
+@import 'components/search';
+@import 'components/movie';
+@import 'components/movieShowcase';
+@import 'components/notfound';
 
-@import "layout/footer";
-@import "layout/header";
-@import "layout/navigation";
\ No newline at end of file
+@import 'layout/footer';
+@import 'layout/header';
+@import 'layout/navigation';

From c03104c8dc51d52b453f64665c4510d1b28d0149 Mon Sep 17 00:00:00 2001
From: MOHAMED RIAD <mohamedriiad@gmail.com>
Date: Wed, 15 Dec 2021 22:40:24 +0100
Subject: [PATCH 2/2] Add Netflix not found page

---
 src/pages/NotFound.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index b38e7e4..4c6120f 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -3,7 +3,19 @@ import React from 'react';
 const NotFound = () => {
 	return (
 		<div className='not-found__message'>
-			<h1>NOT FOUND</h1>
+			{/* 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>
 	);
 };