refactored Navbar component

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",

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",

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 = () => {

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 () => {