@animech-public/chonky/src/util/file-browser-handle.ts

A File Browser component for React

import React, { useImperativeHandle } from 'react';
import { useDispatch, useStore } from 'react-redux';

import { reduxActions } from '../redux/reducers';
import { selectSelectionMap } from '../redux/selectors';
import { thunkRequestFileAction } from '../redux/thunks/dispatchers.thunks';
import { FileAction } from '../types/action.types';
import { FileBrowserHandle } from '../types/file-browser.types';
import { ChonkyDispatch, RootState } from '../types/redux.types';

export const useFileBrowserHandle = (ref: React.Ref<FileBrowserHandle>) => {
  const store = useStore<RootState>();
  const dispatch: ChonkyDispatch = useDispatch();

  useImperativeHandle(
    ref,
    () => ({
      getFileSelection(): Set<string> {
        const selectionMap = selectSelectionMap(store.getState());
        const selectionSet = new Set(Object.keys(selectionMap));
        return selectionSet;
      },
      setFileSelection(selection, reset = true): void {
        const fileIds = Array.from(selection);
        dispatch(reduxActions.selectFiles({ fileIds, reset }));
      },
      async requestFileAction<Action extends FileAction>(
        action: Action,
        payload: Action['__payloadType'],
      ): Promise<void> {
        return Promise.resolve(dispatch(thunkRequestFileAction(action, payload)));
      },
    }),
    [store, dispatch],
  );
};