phanpy/src/components/background-service.jsx

import { memo } from 'preact/compat';
import { useEffect, useRef, useState } from 'preact/hooks';
import { useDebouncedCallback } from 'use-debounce';

import { api } from '../utils/api';
import states, { saveStatus } from '../utils/states';
import useInterval from '../utils/useInterval';
import usePageVisibility from '../utils/usePageVisibility';

export default memo(function BackgroundService({ isLoggedIn }) {
  // Notifications service
  // - WebSocket to receive notifications when page is visible
  const [visible, setVisible] = useState(true);
  usePageVisibility(setVisible);
  const subRef = useRef();
  const debouncedStartNotifications = useDebouncedCallback(() => {
    const { masto, streaming, instance } = api();
    (async () => {
      // 1. Get the latest notification
      if (states.notificationsLast) {
        const notificationsIterator = masto.v1.notifications.list({
          limit: 1,
          since_id: states.notificationsLast.id,
        });
        const { value: notifications } = await notificationsIterator.next();
        if (notifications?.length) {
          let lastReadId;
          try {
            const markers = await masto.v1.markers.fetch({
              timeline: 'notifications',
            });
            lastReadId = markers?.notifications?.lastReadId;
          } catch (e) {}
          if (lastReadId) {
            states.notificationsShowNew = notifications[0].id !== lastReadId;
          } else {
            states.notificationsShowNew = true;
          }
        }
      }

      // 2. Start streaming
      if (streaming) {
        let sub = (subRef.current = streaming.user.notification.subscribe());
        console.log('🎏 Streaming notification', sub);
        for await (const entry of sub) {
          if (!sub) break;
          console.log('🔔🔔 Notification entry', entry);
          if (entry.event === 'notification') {
            console.log('🔔🔔 Notification', entry);
            saveStatus(entry.payload, instance, {
              skipThreading: true,
            });
          }
          states.notificationsShowNew = true;
        }
      }
    })();
  }, 3000);
  useEffect(() => {
    // let sub;
    if (isLoggedIn && visible) {
      debouncedStartNotifications();
    }
    return () => {
      // sub?.unsubscribe?.();
      // sub = null;
      debouncedStartNotifications?.cancel?.();
      subRef.current?.unsubscribe?.();
      subRef.current = null;
    };
  }, [visible, isLoggedIn]);

  // Check for updates service
  const lastCheckDate = useRef();
  const checkForUpdates = () => {
    lastCheckDate.current = Date.now();
    console.log('✨ Check app update');
    fetch('./version.json')
      .then((r) => r.json())
      .then((info) => {
        if (info) states.appVersion = info;
      })
      .catch((e) => {
        console.error(e);
      });
  };
  useInterval(checkForUpdates, visible && 1000 * 60 * 30); // 30 minutes
  usePageVisibility((visible) => {
    if (visible) {
      if (!lastCheckDate.current) {
        checkForUpdates();
      } else {
        const diff = Date.now() - lastCheckDate.current;
        if (diff > 1000 * 60 * 60) {
          // 1 hour
          checkForUpdates();
        }
      }
    }
  });

  return null;
});