From 0daf75f80466c6774048435d00155e261d74b548 Mon Sep 17 00:00:00 2001
From: andres alcocer <andresalcocer7@yahoo.com>
Date: Fri, 10 Jul 2020 19:13:11 -0400
Subject: [PATCH] implemented 404 page styles

---
 src/containers/Navbar.js                |  3 +-
 src/containers/Search.js                | 50 +++++++++++++++++++++++--
 src/index.js                            |  2 -
 src/static/sass/components/_search.scss | 28 ++++++++++++++
 4 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/src/containers/Navbar.js b/src/containers/Navbar.js
index 1a4529d..153ddc1 100644
--- a/src/containers/Navbar.js
+++ b/src/containers/Navbar.js
@@ -83,7 +83,8 @@ class Navbar extends Component {
     await this.setState({ movieList: movieRows });
     this.props.history.push({
       pathname: '/search',
-      movieRows: this.state.movieList
+      movieRows: this.state.movieList,
+      userInput: searchItem
     });
   }
 
diff --git a/src/containers/Search.js b/src/containers/Search.js
index ec358d3..dcd90ff 100644
--- a/src/containers/Search.js
+++ b/src/containers/Search.js
@@ -1,11 +1,55 @@
 import React, { Component } from 'react';
 
 export default class Search extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      movies: []
+    }
+  }
+
+  componentDidMount = async () => {
+    const { movieRows } = this.props.history.location;
+    if (movieRows)
+      await this.setState({ movies: movieRows });
+  }
+
+  componentDidUpdate = async (prevProps) => {
+    if (
+      prevProps.location.movieRows.length !==
+      this.props.location.movieRows.length
+    ) {
+      await this.setState({ movies: this.props.location.movieRows });
+    }
+  }
+
   render() {
+    const { movies } = this.state
+    const { userInput } = this.props.location
+
     return (
-      <div className="search-container">
-        {this.props.history.location.movieRows}
-      </div>
+      <>
+        {
+          this.state.movies.length > 0 ? (
+            <div className="search-container">
+              {this.state.movies}
+            </div>
+          ) : (
+              <div className="no-results">
+                <div className="no-results__text">
+                  <p>Your search for "{userInput}" 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>
+            )
+        }
+      </>
     );
   }
 }
diff --git a/src/index.js b/src/index.js
index 1cef612..1ecfabf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,10 +14,8 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 // TODO
 // - fix styling issue
-// - implemented debouncing
 // - implement carousel
 // - fix modal backdrop bug
-// - add routing and 404 page
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
     <App />
diff --git a/src/static/sass/components/_search.scss b/src/static/sass/components/_search.scss
index e014f62..7d78550 100644
--- a/src/static/sass/components/_search.scss
+++ b/src/static/sass/components/_search.scss
@@ -8,4 +8,32 @@
    height: 150%;
    padding-bottom: 10rem;
    padding-left: 4rem;
+}
+
+.no-results {
+   display: flex;
+   justify-content: center;
+   align-content: center;
+   color: #c5c5c5;
+   height: 100%;
+   padding-top: 25rem;
+
+   &__text {
+      font-size: 1.6rem;
+
+      &>* {
+         padding-bottom: 1.8rem;
+      }
+
+      &>ul {
+         // color: red;
+         padding-left: 6.5rem;
+         list-style: disc;
+
+         &>* {
+            padding-bottom: 0.2rem;
+         }
+      }
+   }
+
 }
\ No newline at end of file