utils to hooks - @azizi

[rooberrydev]

I haven't done much custom hook writing but as far as I know the main difference between a regular function and a custom hook is that a custom hook lets you call other hooks inside it.

also to use a custom hook you have to call it at the top level in a component, so you would need to return something from the custom hook.

This would actually be handy for the logout function, converting it to a hook allows us to call the useHistory() directly, and return a function that uses history.push().

import { auth } from '../connection.js';
import { useHistory } from 'react-router-dom';
const useLogout = () => {
  const history = useHistory();
  return () => {
    auth()
      .signOut()
      .then(() => {
        history.push('/');
      })
      .catch((error) => {
        console.error(error);
      });
  };
};

export default useLogout;

to use this, you would have to call useLogout inside Sidebar

const Sidebar = () => {
const logout = useLogout();
....
....
return <button onClick={logout} />
}

This is an alternative to what i suggested in #16