useRefreshButton

Returns a refresh data function, and the current loading status of the data object found in the DataObjectContext

Usage

This is the implementation of the RefreshButton component in the appframe-mui package.

import { forwardRef } from "react";

import { Button, ButtonProps } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { useRefreshButton } from "@olenbetong/appframe-react";

import Refresh from "./icons/Refresh.js";

export const RefreshButton = forwardRef<HTMLButtonElement, ButtonProps>(
  function RefreshButton(props, ref) {
    let { loading, refresh } = useRefreshButton();

    return (
      <Button
        loading={loading}
        onClick={refresh}
        loadingPosition="start"
        startIcon={<Refresh />}
        {...props}
        ref={ref}
      >
        {props.children ? props.children : getLocalizedString("Refresh")}
      </Button>
    );
  }
);

API

export declare type useRefreshButtonReturnValue = {
  /**
   * A boolean indicating if the data object is currently loading data.
   */
  loading: boolean;
  /**
   * Refreshes the data object found in the data provider context.
   */
  refresh: () => Promise<void>;
};

/**
 * Simple hook that returns everything needed to make a button refresh the data object
 * in the data provider context, and show a loading indicator.
 */
export declare function useRefreshButton(): useRefreshButtonReturnValue;