mobx-react#useLocalObservable TypeScript Examples

The following examples show how to use mobx-react#useLocalObservable. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: useMultiSelectionTable.ts    From jmix-frontend with Apache License 2.0 5 votes vote down vote up 
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
  };
}
Example #2
Source File: useEntityEditor.ts    From jmix-frontend with Apache License 2.0 5 votes vote down vote up 
useEntityEditorStore = () => {
  return useLocalObservable(() => ({
    globalErrors: [],
  }));
}
Example #3
Source File: useEntityList.ts    From jmix-frontend with Apache License 2.0 4 votes vote down vote up 
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
  };
}