mobx-react#useLocalObservable TypeScript Examples

export function useMultiSelectionTable<
  TEntity = unknown,
  TData extends Record<string, any> = Record<string, any>,
  TQueryVars extends ListQueryVars = ListQueryVars,
  TMutationVars extends HasId = HasId
>(
  options: MultiSelectionTableHookOptions<TEntity, TData, TQueryVars, TMutationVars>
): MultiSelectionTableHookResult<TEntity, TData, TQueryVars, TMutationVars> {
  const entityListData = useEntityList(options);
  const client = useApolloClient();
  const multiSelectionTableStore = useLocalObservable(() => new MultiSelectionTableStore());
  const intl = useIntl();

  type EntityListHookResultType = EntityListHookResult<TEntity, TData, TQueryVars, TMutationVars>;

  const handleSelectionChange: EntityListHookResultType['handleSelectionChange'] = useCallback(
    selectedEntityIds => multiSelectionTableStore.setSelectedEntityIds(selectedEntityIds),
    [multiSelectionTableStore]
  );

  const deleteSelectedEntities = useCallback(async () => {
    if (multiSelectionTableStore.selectedEntityIds != null) {
      const entitiesDeleteMutate = createDeleteMutationForSomeEntities(options.entityName, multiSelectionTableStore.selectedEntityIds);
      try {
        await client.mutate({mutation: entitiesDeleteMutate});
        message.success(intl.formatMessage({id: 'multiSelectionTable.delete.success'}));
        await entityListData.executeListQuery();
      } catch (error) {
        message.error(intl.formatMessage({id: 'multiSelectionTable.delete.error'}));
      }
    }
  }, [multiSelectionTableStore.selectedEntityIds, options.entityName, client, intl, entityListData]);

  const handleDeleteBtnClick = useCallback(() => {
    if (
      multiSelectionTableStore.selectedEntityIds != null
      && multiSelectionTableStore.selectedEntityIds.length > 0
    ) {
      modals.open({
        content: intl.formatMessage({id: 'multiSelectionTable.delete.areYouSure'}),
        okText: intl.formatMessage({id: "common.ok"}),
        cancelText: intl.formatMessage({id: "common.cancel"}),
        onOk: deleteSelectedEntities,
      });
    }
  }, [deleteSelectedEntities, intl, multiSelectionTableStore.selectedEntityIds]);
  
  return {
    ...entityListData,
    multiSelectionTableStore,
    handleSelectionChange,
    handleDeleteBtnClick
  };
}

useEntityEditorStore = () => {
  return useLocalObservable(() => ({
    globalErrors: [],
  }));
}

export function useEntityList<
  TEntity = unknown,
  TData extends Record<string, any> = Record<string, any>,
  TQueryVars = any,
  TMutationVars extends HasId = HasId
>(
  options: EntityListHookOptions<TEntity, TData, TQueryVars, TMutationVars>
): EntityListHookResult<TEntity, TData, TQueryVars, TMutationVars> {
  const {
    entityName,
    listQuery,
    listQueryOptions,
    deleteMutation = createDeleteMutation(entityName),
    deleteMutationOptions,
    routingPath,
    paginationConfig = defaultPaginationConfig,
    entityList,
    onEntityListChange,
    lazyLoading,
    onOpenScreenError,
    onEntityDelete,
    onPagination
  } = options;

  const queryName = `${dollarsToUnderscores(entityName)}List`;
  const screens = useScreens();
  const intl = useIntl();

  const [pagingDataFromUrl] = useState(() => {
    return {
      page: Number(currentRoute.searchParams.page) || paginationConfig.current,
      pageSize: Number(currentRoute.searchParams.pageSize) || paginationConfig.pageSize,
    }
  });

  const entityListState: EntityListState<TEntity> = useLocalObservable(() => ({
    entityList,
    selectedEntityId: undefined,
    filter: undefined,
    sortOrder: undefined,
    pagination: {
      ...paginationConfig,
      current: pagingDataFromUrl.page,
      pageSize: pagingDataFromUrl.pageSize,
    }
  }));

  // Used e.g. when entity browser represents the content of a One-to-Many Composition field
  const handleEntityListChange = (newEntityList: Array<EntityInstance<TEntity>>) => {
    entityListState.entityList = newEntityList; // Update local state (what is shown in the entity browser)
    if (onEntityListChange != null) { // Update external state (e.g. parent entity value)
      onEntityListChange(newEntityList);
    }
  };

  const {
    items,
    count,
    relationOptions,
    executeListQuery,
    listQueryResult
  } = useEntityListData<TEntity, TData, TQueryVars>({
    entityList: entityListState.entityList,
    listQuery,
    listQueryOptions,
    filter: entityListState.filter,
    sortOrder: entityListState.sortOrder,
    pagination: entityListState.pagination,
    entityName,
    lazyLoading
  });

  const [executeDeleteMutation, deleteMutationResult] = useMutation<TData, TMutationVars>(deleteMutation, deleteMutationOptions);

  const handleCreateBtnClick = useCreateBtnCallback(
    screens, 
    entityName, 
    entityListState.entityList, 
    handleEntityListChange, 
    onOpenScreenError
  );
  const handleCloneBtnClick = useCreateBtnCallback(
    screens, 
    entityName, 
    entityListState.entityList, 
    handleEntityListChange, 
    onOpenScreenError,
    entityListState.selectedEntityId
  );
  const handleEditBtnClick = useEditBtnCallback(
    screens, 
    entityName, 
    routingPath, 
    entityListState.selectedEntityId, 
    entityListState.entityList, 
    handleEntityListChange, 
    onOpenScreenError
  );
  const handleDeleteBtnClick = useDeleteBtnCallback(
    intl, 
    executeDeleteMutation, 
    queryName, 
    entityListState.selectedEntityId, 
    items, 
    entityListState.entityList, 
    handleEntityListChange, 
    onEntityDelete
  );

  const handlePaginationChange = usePaginationChangeCallback(entityListState, routingPath, screens.currentScreen, onPagination);
  const handleSelectionChange = useSelectionChangeCallback(entityListState);
  const handleFilterChange = useFilterChangeCallback(entityListState);
  const handleSortOrderChange = useSortOrderChangeCallback(entityListState);

  const goToParentScreen = useParentScreen(routingPath);

  // If we have deleted the last item on page, and it's not the first page, we want to change pagination
  if (items?.length === 0
    && entityListState?.pagination?.current != null
    && entityListState?.pagination?.current > 1
  ) {
    handlePaginationChange(entityListState?.pagination?.current - 1, entityListState?.pagination?.pageSize);
  }

  return {
    items,
    count,
    relationOptions,
    executeListQuery,
    listQueryResult,
    executeDeleteMutation,
    deleteMutationResult,
    intl,
    handleCreateBtnClick,
    handleEditBtnClick,
    handlePaginationChange,
    handleDeleteBtnClick,
    handleSelectionChange,
    handleFilterChange,
    handleSortOrderChange,
    handleCloneBtnClick,
    entityListState,
    goToParentScreen
  };
}