pdf-reader-web/hooks/useAutoSave.ts

import {
  useState, useRef, useEffect,
} from 'react';
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

import useStore from '../store';
import { saveFile } from '../apis';

const useAutoSave = (): [boolean, boolean] => {
  const [{ info, annotations, isInit }] = useStore();
  const [isSaved, setSaved] = useState(false);
  const [isSaving, setSaving] = useState(false);
  const subscription = useRef<any>(null);

  useEffect(() => {
    if (info.id && isInit) {
      if (subscription.current) subscription.current.unsubscribe();

      setSaved(false);
      const observable = interval(1000);

      const data = {
        transaction_id: info.id,
        append_objects: annotations,
      };

      subscription.current = observable.pipe(
        take(6),
      ).subscribe((x: number) => {
        if (x === 5) {
          setSaving(true);
          saveFile(info.token, data).then(() => {
            setSaving(false);
            setSaved(true);
          });
        }
      });
    }

    return (): void => {
      if (subscription.current) subscription.current.unsubscribe();
    };
  }, [info, annotations, isInit]);

  return [isSaved, isSaving];
};

export default useAutoSave;