Function FileHandlerPicker

src/components/filehandler-picker.tsx:62–116

({
  value,
  onChange,
}: {
  value?: string;
  onChange: (file: string) => void;
})

}

export default function FileHandlerPicker({
  value,
  onChange,
}: {
  value?: string;
  onChange: (file: string) => void;
}) {
  const [handler, setHandler] = useState<FileSystemHandle>();
  const { showDialog } = useCommonDialog();

  useEffect(() => {
    if (value) {
      localDb.file_handler.get(value).then((data) => {
        if (data?.handler) {
          setHandler(data.handler);
        }
      });
    }
  }, [value]);

  const onChangeFile = useCallback(() => {
    try {
      cleanupFileHandler()
        .then(openFileHandler)
        .then(onChange)
        .catch(() => {
          showDialog(unsupportFileHandlerDialogContent);
        });
    } catch {
      showDialog(unsupportFileHandlerDialogContent);
    }
  }, [onChange, showDialog]);

  if (handler) {
    return (
      <div
        onClick={onChangeFile}
        className={cn(
          buttonVariants({ variant: "outline" }),
          "w-full cursor-pointer justify-start"
        )}
      >
        <LucideFile className="mr-2 h-4 w-4" />
        {handler.name}
      </div>
    );
  }

  return (
    <Button onClick={onChangeFile} variant={"outline"}>
      <LucideFolderClosed className="mr-2 h-4 w-4" />
      Open File
    </Button>
  );
}