From d77db5757b6605492a617e07e3b7a1094c0437cf Mon Sep 17 00:00:00 2001
From: andres alcocer <andresalcocer7@yahoo.com>
Date: Fri, 8 Oct 2021 11:41:30 -0400
Subject: [PATCH] refactored Navbar component

---
 package-lock.json        |  1 -
 package.json             |  1 -
 src/components/Navbar.js | 17 +----------------
 src/pages/Search.js      | 25 ++++++++++++++++++++++---
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ae4827e..98b06dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "license": "ISC",
       "dependencies": {
         "axios": "^0.22.0",
-        "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
diff --git a/package.json b/package.json
index f73dfed..46e507d 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^0.22.0",
-    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index e528360..3482315 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,13 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
-import _ from 'lodash'
 import { withRouter } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
 
 import { useScroll } from '../hooks/useScroll'
-import { useDebounce } from '../hooks/useDebounce'
-import * as movieActions from '../store/actions'
-// import axios from '../axios-movies'
 import SearchLogo from '../static/images/search-icon.svg'
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'
 import BellLogo from '../static/images/bell-logo.svg'
@@ -16,27 +11,17 @@ import DropdownContent from '../components/DropdownContent'
 
 const Navbar = ({ history }) => {
   const [userInput, setUserInput] = useState('')
-  const searchResults = useSelector((state) => state.searchMovie)
   const [scrollDimensions] = useScroll()
   const { scrollY } = scrollDimensions
 
-  const dispatch = useDispatch()
-  const debouncedUserInput = useDebounce(userInput, 500)
-
   const onChange = async (event) => {
     setUserInput(event.target.value)
   }
 
-  // useEffect(() => {
-  //   if (debouncedUserInput) {
-  //     history.push(`/search?=${userInput}`)
-  //   }
-  // }, [debouncedUserInput])
-
   useEffect(() => {
     userInput.length <= 0
       ? history.push('/')
-      : history.push(`/search?=${userInput}`)
+      : history.push(`/search?q=${userInput}`)
   }, [userInput])
 
   const onLogoClick = () => {
diff --git a/src/pages/Search.js b/src/pages/Search.js
index e90c62c..1449354 100644
--- a/src/pages/Search.js
+++ b/src/pages/Search.js
@@ -1,12 +1,26 @@
 import React, { useState, useEffect } from 'react'
-import { Redirect } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
 
+import { useDebounce } from '../hooks/useDebounce'
 import Modal from '../components/UI/Modal'
 import MovieDetails from '../components/Movie/MovieDetails'
 import Movie from '../components/Movie/Movie'
 import axios from '../axios-movies'
 
-const Search = ({ location: { searchResults, userInput }, history }) => {
+// A custom hook that builds on useLocation to parse
+// the query string for you.
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search)
+}
+
+const Search = ({ history }) => {
+  let query = useQuery()
+  const debouncedSearchTerm = useDebounce(query.get('q'), 500)
+  const [isToggleModal, setIsToggleModal] = useState(false)
+  const searchResults = useSelector((state) => state.searchMovie)
+  const dispatch = useDispatch()
+
   // constructor(props) {
   //   super(props)
   //   this.state = {
@@ -16,8 +30,13 @@ const Search = ({ location: { searchResults, userInput }, history }) => {
   //     movieOverview: {},
   //   }
   // }
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      console.log('maing api call....')
+    }
+  }, [debouncedSearchTerm])
 
-  const [isToggleModal, setIsToggleModal] = useState(false)
+  console.log('location', query.get('q'))
 
   // componentDidMount = async () => {