Login issue (App throws error) about mern-chat-app

[geekychandan]

Reload the page after logout worked for me..below bold codes are added in function
/add this code in in sideDrawer.js of logoutHandler

const logoutHandler = () => {
localStorage.removeItem("userInfo");
history.push("/");
window.location.reload();
};

/and add
const userInfo1 = JSON.parse(localStorage.getItem("userInfo"));
setUser(userInfo1);
in logIng page of submitHandler
code ;-
const submitHandler = async () => {
setLoading(true);
if (!email || !password) {
toast({
title: "Please Fill all the Feilds",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
setLoading(false);
return;
}
try {
const config = {
headers: {
"Content-type": "application/json",
},
};

  const { data } = await axios.post(
    "/api/user/login",
    { email, password },
    config
  );
  toast({
    title: "Login Successful",
    status: "success",
    duration: 5000,
    isClosable: true,
    position: "bottom",
  });
  localStorage.setItem("userInfo", JSON.stringify(data));
 **const userInfo1 = JSON.parse(localStorage.getItem("userInfo"));**
     **setUser(userInfo1);**
   history.push("/chats");
  setLoading(false);     
} catch (error) {
  
  toast({
    title: "Error Occured!",
    description: error.response.data.message,
    status: "error",
    duration: 5000,
    isClosable: true,
    position: "bottom",
  });
  setLoading(false);
}

};

[Abhiraj-cuchd]

Thank you ! This solution worked for me

[HritikDiyundi]

Would you happen to know how to define setUser, because it gives an error?

[Chitakov]

Reload the page after logout worked for me..below bold codes are added in function /add this code in in sideDrawer.js of logoutHandler

const logoutHandler = () => { localStorage.removeItem("userInfo"); history.push("/"); window.location.reload(); };

/and add const userInfo1 = JSON.parse(localStorage.getItem("userInfo")); setUser(userInfo1); in logIng page of submitHandler code ;- const submitHandler = async () => { setLoading(true); if (!email || !password) { toast({ title: "Please Fill all the Feilds", status: "warning", duration: 5000, isClosable: true, position: "bottom", }); setLoading(false); return; } try { const config = { headers: { "Content-type": "application/json", }, };

  const { data } = await axios.post(
    "/api/user/login",
    { email, password },
    config
  );
  toast({
    title: "Login Successful",
    status: "success",
    duration: 5000,
    isClosable: true,
    position: "bottom",
  });
  localStorage.setItem("userInfo", JSON.stringify(data));
 **const userInfo1 = JSON.parse(localStorage.getItem("userInfo"));**
     **setUser(userInfo1);**
   history.push("/chats");
  setLoading(false);     
} catch (error) {
  
  toast({
    title: "Error Occured!",
    description: error.response.data.message,
    status: "error",
    duration: 5000,
    isClosable: true,
    position: "bottom",
  });
  setLoading(false);
}

};

Reload the page after logout worked for me..below bold codes are added in function /add this code in in sideDrawer.js of logoutHandler

const logoutHandler = () => { localStorage.removeItem("userInfo"); history.push("/"); window.location.reload(); };

/and add const userInfo1 = JSON.parse(localStorage.getItem("userInfo")); setUser(userInfo1); in logIng page of submitHandler code ;- const submitHandler = async () => { setLoading(true); if (!email || !password) { toast({ title: "Please Fill all the Feilds", status: "warning", duration: 5000, isClosable: true, position: "bottom", }); setLoading(false); return; } try { const config = { headers: { "Content-type": "application/json", }, };

  const { data } = await axios.post(
    "/api/user/login",
    { email, password },
    config
  );
  toast({
    title: "Login Successful",
    status: "success",
    duration: 5000,
    isClosable: true,
    position: "bottom",
  });
  localStorage.setItem("userInfo", JSON.stringify(data));
 **const userInfo1 = JSON.parse(localStorage.getItem("userInfo"));**
     **setUser(userInfo1);**
   history.push("/chats");
  setLoading(false);     
} catch (error) {
  
  toast({
    title: "Error Occured!",
    description: error.response.data.message,
    status: "error",
    duration: 5000,
    isClosable: true,
    position: "bottom",
  });
  setLoading(false);
}

};

Thank you, bro! The best!!!