UserContext Hook

[timjacksonm]

The UserContext Hook currently sends an api endpoint request to /api/user/getuser when the navbar component mounts. This action produces an error in the console anytime a user is not logged in.

Solution:
Refactor the UserContext hook to only send the get api request when a user has successfully logged in.

[whoadood]

I've been thinking about UserContext as well, I was thinking it could be beneficial to define Login and Logout functions in the context, that way the state setting function isnt exposed just functions that update state in a controlled way, would love for some feedback on this. A pattern I've been using in a side project for example:

export default function UserProvider({ children }) {
  const [user, dispatch] = useReducer(userReducer, {});
  const navigate = useNavigate();

  const logout = () => {
    localStorage.removeItem("user");
    dispatch({ type: "USER_LOGOUT" });
    navigate("/");
  };

  const login = (username, password) => {
    localStorage.setItem("user", username);
    dispatch({ type: "USER_LOGIN", user: { username, password } });
  };

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

[wil-gerard]

Thanks for the feedback on UserContext! Improving its functionality has long been on my to-do list - this gives me some great ideas to work off.

@whoadood #37 These issues are linked, and I'd like to tackle them together. I'll create a new branch for this issue and work with you on integrating your auth router solution once I've solved this. I should have something pushed by the end of the day - I'll tag you when I make the PR.

[wil-gerard]

I didn't fully understand the issue when I linked #178 as a fix, so I'm reopening this. I think I have a solution here #188. I'll tag you both on the PR once it's up - I'd love feedback!