all-my-react-components.tsx

enum State {
  Idle,
  LoadingJwt,
  Success,
  Error,
}

type Data = { error?: string; jwt?: string };

function Comp() {
  let [state, setState] = useState<State>(State.Idle);
  let [data, setData] = useState<Data>({});

  let transition = async () => {
    switch (state) {
      case State.LoadingJwt: {
        try {
          let jwt = await getJwtFromProvider();
          setData({ ...data, jwt });
          setState(State.Success);
        } catch (error) {
          setData({ ...data, error: error.message });
          setState(State.Error);
        }
        break;
      }
      case State.Error: {
        setTimeout(() => {
          setState(State.Idle);
        }, 2000);
        break;
      }
      case State.Success: {
        await createSession(data.jwt);
        navigate("/dashboard");
      }
    }
  };

  useEffect(() => {
    transition();
  }, [state]);

  return <div>{/* ... */}</div>
}