googleAuthenticate Function called from Layout.js

[bphariharan1301]

hey guys,
I'm having an issue here.
I'm actually getting the state and code in the console but, the googleAuthenticate function is not getting called from Layout.js.
I'm also getting this warning under hocs/Layout.js

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change whe
n any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside u
seEffect

Can anyone help me out please?

I'm attaching layout.js, login.js and sign.js

hocs/Layout.js

import React, { useEffect } from "react";
import Navbar from '../components/Navbar';
import { connect } from 'react-redux'
import { useLocation } from "react-router-dom";
import { checkAuthenticated, load_user, googleAuthenticate } from '../actions/auth'
import queryString from 'query-string';

const Layout = (props) => {

let location = useLocation()

useEffect(() => {
const values = queryString.parse(location.search)
const state = values.state ? values.state : null
const code = values.code ? values.code : null

console.log('STATE IS: '+ state)
console.log('CODE IS: '+code)


if (state && code) {
  props.googleAuthenticate(state, code)
} else {
    props.checkAuthenticated();
    props.load_user();
}

}, [location]);

return (

{props.children}

)
}
export default connect(null, { checkAuthenticated, load_user, googleAuthenticate })(Layout);

containers/Login.js -> continueWithGoogle

const continueWithGoogle = async () => {
try {
const res = await axios.get("http://localhost:8000/auth/o/google-oauth2/?redirect_uri=http://localhost:8000");
console.log('INSIDE continueWithGoogle of LOGIN ')
console.log('RES from django: ', res)

        window.location.replace(res.data.authorization_url)

    } catch (error) {
        console.log(error)
    }
}

containers/SignUp.js -> continueWithGoogle

const continueWithGoogle = async () => {
try {
const res = await axios.get("http://localhost:8000/auth/o/google-oauth2/?redirect_uri=http://localhost:8000");
console.log('INSIDE continueWithGoogle of SIGNUP ')
console.log('RES from django: ', res)
window.location.replace(res.data.authorization_url)
} catch (error) {

}

}

actions/auth.js -> googleAuthenticate
export const googleAuthenticate = (state, code) => async dispatch => {
if (state && code && !localStorage.getItem('access')) {
console.log('INSIDE actions/auth.js googleAuthenticate ')
const config = {
headers: {
'Content-Type':'application/x-www.form-urlencoded'
}
}
const details = {
'state': state,
'code': code,
}

const formBody = Object.keys(details).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(details[key])).join('&')

console.log('formBody of actions/auth.js googleAuthenticate', formBody)

try {
  const res = await axios.post(`http://localhost:8000/auth/o/google-oauth2/?${formBody}`, config)
  
  console.log('Django res: ', res)

  dispatch({
    type: GOOGLE_AUTH_SUCESS,
    payload: res.data
  })

  dispatch(load_user())
} catch (err) {
  dispatch({
    type: GOOGLE_AUTH_FAIL,
  })
}

}

}