Function Packages

packages/devtools-ui/src/components/packages.tsx:14–194

()

import { UpdateIcon } from "./icons/update";

export const Packages = () => {
  const ref = React.useRef<FireworksHandlers>(null);
  const [packages, setPackages] = React.useState<PackageType[]>([]);
  const [visible, setVisible] = React.useState(false);
  const [outdatedPackages, setOutdatedPackages] = React.useState<string[]>([]);

  React.useEffect(() => {
    getInstalledPackages().then((data) => {
      setPackages(data);
    });
  }, []);

  const fireworks = React.useCallback(() => {
    if (ref.current) {
      ref.current.start();
      setTimeout(() => {
        ref.current?.waitStop();
      }, 3000);
    }
  }, []);

  const [installingAll, setInstallingAll] = React.useState(false);
  const [installInProgress, setInstallInProgress] = React.useState(false);

  const onInstall = React.useCallback(async (packagesToInstall: string[]) => {
    setInstallInProgress(true);
    const state = await installPackages(packagesToInstall);

    if (state) {
      fireworks();
      getInstalledPackages({ force: true }).then((data) => {
        setPackages(data);
      });
      setOutdatedPackages((p) =>
        p.filter((item) => !packagesToInstall.includes(item)),
      );
    }

    setInstallInProgress(false);

    return state;
  }, []);

  const onOutdated = React.useCallback((packages: string[]) => {
    setOutdatedPackages((p) => [...p, ...packages]);
  }, []);

  const onUpdateAll = React.useCallback(async () => {
    if (installingAll) {
      return;
    }
    setInstallingAll(true);
    await onInstall(outdatedPackages);
    setInstallingAll(false);
  }, [outdatedPackages, installingAll, onInstall]);

  return (
    <>