When retrieving my access_token's payload, I am including a significant amount of profile information such as user details and bio data
{
"token_type": "access",
"exp": ***,
"iat": ***,
"jti": "*****",
"user_id": 1,
"username": "emmanuelS21",
"first_name": "",
"last_name": "",
"country": "",
"city": "",
"bio": "",
"photo": "\"profile/2022/03/27/emmanuelpic.png\""
}
This data is then utilized to populate a user's profile page. I am currently in the process of creating a feature that allows users to update their profile details by submitting a form with new information. However, I keep encountering an error message:
Uncaught TypeError: updateProfile is not a function
The function updateProfile should handle the logic for updating profile information. Below are snippets of the relevant code:
Profile.js:
import { updateProfile } from "../login_components/LoginActions.js";
const Profile = () => {
let { user,logOutUser,updateProfile } = useContext(AuthContext)
const[profileUser, setProfileUser] = useState({user})
//handle form submission
const handleSubmit = e => {
console.log('handle submit',profileUser)
const updatedProfile = {
username: profileUser.username,
email: profileUser.email,
first_name: profileUser.first_name,
last_name: profileUser.last_name,
city: profileUser.city,
country: profileUser.country
}
e.preventDefault();
updateProfile(updatedProfile);
}
My LoginTypes.js:
export const SET_TOKEN = "SET_TOKEN";
export const SET_CURRENT_USER = "SET_CURRENT_USER";
export const UNSET_CURRENT_USER = "UNSET_CURRENT_USER";
export const UPDATE_PROFILE = "UPDATE_PROFILE";
LoginActions.js:
export const updateProfile = (userData) => dispatch => {
axios
.post("http://127.0.0.1:8000/update_profile/", userData)
.then(response => {
console.log('response is:', response.data)
dispatch({
type: UPDATE_PROFILE,
payload: userData
});
})
}
UPDATE made changes based on the top answer, added my updateProfile function to my AuthContext file
const updateProfile = (userData) => dispatch => {
console.log('Update Profile is being triggered')
axios
.put('http://127.0.0.1:8000/update_profile/', userData)
.then(res => {
console.log(res)
})
}
let logOutUser = () => {
setAuthTokens(null)
setUser(null)
localStorage.removeItem('authTokens')
history.push('/')
}
and avoided overwriting this function in Profile.js:
let { user,logOutUser,updateProfile } = useContext(AuthContext)
const[profileUser, setProfileUser] = useState({user})
const handleSubmit = e => {
console.log('handle submit',profileUser)
const updatedProfileInfo = {
username: profileUser.username,
email: profileUser.email,
first_name: profileUser.first_name,
last_name: profileUser.last_name,
city: profileUser.city,
country: profileUser.country
}
console.log(updatedProfileInfo)
e.preventDefault();
updateProfile(updatedProfileInfo);
however, the error persists despite these adjustments