@hyper-fetch/react/src/hooks/use-app-manager/use-app-manager.hooks.ts

React hooks and utils for the hyper-fetch

import { useDidMount } from "@better-hooks/lifecycle";
import { ClientInstance } from "@hyper-fetch/core";
import { useState } from "react";

import { UseAppManagerReturnType } from "hooks/use-app-manager";

export const useAppManager = <Client extends ClientInstance>(client: Client): UseAppManagerReturnType => {
  const [online, setIsOnline] = useState(client.appManager.isOnline);
  const [focused, setIsFocused] = useState(client.appManager.isFocused);

  const mountEvents = () => {
    const unmountIsOnline = client.appManager.events.onOnline(() => setIsOnline(true));
    const unmountIsOffline = client.appManager.events.onOffline(() => setIsOnline(false));
    const unmountIsFocus = client.appManager.events.onFocus(() => setIsFocused(true));
    const unmountIsBlur = client.appManager.events.onBlur(() => setIsFocused(false));

    return () => {
      unmountIsOnline();
      unmountIsOffline();
      unmountIsFocus();
      unmountIsBlur();
    };
  };

  const setOnline = (isOnline: boolean) => {
    client.appManager.setOnline(isOnline);
  };

  const setFocused = (isFocused: boolean) => {
    client.appManager.setFocused(isFocused);
  };

  useDidMount(mountEvents);

  return { isOnline: online, isFocused: focused, setOnline, setFocused };
};