Merge pull request #11 from bennyo27/development

Can now remove search results and styled log in/out button
bennyo27 · Jan 2, 2019 · caaf58f · caaf58f
2 parents 22aaabd + 8c764ca
commit caaf58f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 12 deletions.
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -58,3 +58,20 @@
 .navbar li {
   align-self: center;
 }
+
+.log-button {
+  text-decoration: none;
+  background-color: #fcf1d7;
+  color: #db8030;
+  padding: 5px 10px 7px;
+  border-radius: 20px;
+  margin-top: 10px;
+  margin-right: 10px;
+  cursor: pointer;
+  transition: 0.4s;
+}
+
+.log-button:hover {
+  background-color: #d36135;
+  color: #fcf1d7;
+}
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -41,7 +41,6 @@ class App extends Component {
     const data = { username, email, email_verified };
     axios.post("https://filmsy-app.herokuapp.com/users", data).then(() => {
       axios.get(`https://filmsy-app.herokuapp.com/users/${email}`).then(res => {
-        console.log(res.data);
         localStorage.setItem("username", res.data.username);
         localStorage.setItem("email", res.data.email);
         localStorage.setItem("email_verified", res.data.email_verified);
@@ -73,16 +72,18 @@ class App extends Component {
             </li>
             <li>
               {!localStorage.getItem("accessToken") && (
-                <button
+                <div
+                  className="log-button"
                   onClick={() => {
                     lock.show();
                   }}
                 >
                   Login
-                </button>
+                </div>
               )}
               {localStorage.getItem("accessToken") && (
-                <button
+                <div
+                  className="log-button"
                   onClick={() => {
                     localStorage.removeItem("accessToken");
                     localStorage.removeItem("username");
@@ -92,7 +93,7 @@ class App extends Component {
                   }}
                 >
                   Logout
-                </button>
+                </div>
               )}
             </li>
           </ul>

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
@@ -34,10 +34,10 @@
   color: #282b28;
 }
 
-.search .close-btn {
+.search-btn {
   position: absolute;
-  top: 1.5px;
-  right: 3px;
+  top: 0.8px;
+  right: 0.5px;
   cursor: pointer;
   color: #fc913a;
   background: #fff;
@@ -51,6 +51,10 @@
   font-weight: bold;
 }
 
+#search-btn:hover {
+  color: gray;
+}
+
 .featured {
   background-color: #d36135;
 }
@@ -59,10 +63,10 @@
   color: white;
 }
 
-.results {
+#results {
   max-width: 500px;
   width: 100%;
-  display: inline-block;
+  display: none;
   margin-top: 428px;
 }
 

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -20,6 +20,28 @@ class Home extends Component {
   handleSubmit = e => {
     e.preventDefault();
     this.props.searchMovies(this.state.searchText);
+    let box = document.getElementById("results");
+    box.style.display = "inline-block";
+  };
+
+  componentWillMount() {
+    document.addEventListener("mousedown", this.handleClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClick, false);
+  }
+
+  handleClick = e => {
+    if (this.node.contains(e.target)) {
+      return;
+    }
+
+    let box = document.getElementById("results");
+    console.log(e.target, box);
+    if (e.target != box && box.style.display == "inline-block") {
+      box.style.display = "none";
+    }
   };
 
   render() {
@@ -35,13 +57,13 @@ class Home extends Component {
             <button
               type="button"
               value="search"
-              className="close-btn"
+              className="search-btn"
               onClick={this.handleSubmit}
             >
               Search
             </button>
           </form>
-          <div className="results">
+          <div id="results" ref={node => (this.node = node)}>
             {this.props.searchResults.map(result => {
               if (result !== undefined) {
                 return (