How to use the react-intl.useIntl function in react-intl

const UndoRedo = (props) => {
  const intl = useIntl()

  // Don’t allow undo/redo unless you own the street
  // TODO: We need a better function name than `getRemixOnFirstEdit`
  function isUndoAvailable () {
    return (props.undoPosition > 0) && !getRemixOnFirstEdit()
  }

  function isRedoAvailable () {
    return (props.undoPosition >= 0 && props.undoPosition < props.undoStack.length - 1) && !getRemixOnFirstEdit()
  }

  return (
    <>

const OrderFulfillmentDialog: React.FC = props => {
  const { confirmButtonState, open, lines, onClose, onSubmit } = props;

  const classes = useStyles(props);
  const intl = useIntl();

  return (
    <dialog open="{open}">
      <form>
              lines.map(
                product =&gt; product.quantity - product.quantityFulfilled
              ),
            []
          ),
          trackingNumber: ""
        }}
        onSubmit={onSubmit}
      &gt;</form></dialog>

const AppRejectionReasonModal = ({ show, onClose, collectiveId, hostCollectiveSlug }) => {
  const [rejectionReason, setRejectionReason] = useState('');
  const [rejectCollective, { loading, error }] = useMutation(rejectCollectiveQuery);
  const intl = useIntl();

  return (
    
      
        
      
      
        {error && (
          
            {error.message}
          
        )}

const SearchBar: React.FC = props => {
  const {
    allTabLabel,
    currentTab,
    initialSearch,
    onSearchChange,
    searchPlaceholder,
    tabs,
    onAll,
    onTabChange,
    onTabDelete,
    onTabSave
  } = props;
  const intl = useIntl();

  const isCustom = currentTab === tabs.length + 1;

  return (
    <>
      
        
        {tabs.map((tab, tabIndex) => (
           onTabChange(tabIndex + 1)}
            label={tab}
            key={tabIndex}
          />
        ))}
        {isCustom && (

const PageInfo: React.FC = props => {
  const { data, disabled, errors, page, onChange } = props;
  const classes = useStyles(props);

  const intl = useIntl();

  return (

function ChapterDetail({ onSubmit }) {
  const params = useParams();
  const { formatMessage: f } = useIntl();
  const { loading, error, data } = useQuery(FETCH_CHAPTER, {
    variables: { chapterId: parseInt(params.chapterId, 0) }
  });

  if (loading)
    return <div>{f({ id: 'loading', defaultMessage: 'Loading...' })}</div>;
  if (error) return <p id="error_edit_chapter">Error :(</p>;
  return (
    <div>
      
      </div>

export const WebhooksDetails: React.FC = ({
  id,
  params
}) => {
  const navigate = useNavigator();
  const notify = useNotifier();
  const intl = useIntl();
  const {
    search: searchServiceAccount,
    result: searchServiceAccountOpt
  } = useServiceAccountSearch({
    variables: DEFAULT_INITIAL_SEARCH_DATA
  });

  const [openModal, closeModal] = createDialogActionHandlers<
    WebhookUrlDialog,
    WebhookUrlQueryParams
  >(navigate, params => webhookUrl(id, params), params);

  const onWebhookDelete = (data: WebhookDelete) => {
    if (data.webhookDelete.errors.length === 0) {
      notify({
        text: intl.formatMessage(commonMessages.savedChanges)

function CreatePersonModal({ isOpen, toggleModal }) {
  const [personName, setPersonName] = useState('');
  const [personNameKanji, setPersonNameKanji] = useState('');
  const [description, setDescription] = useState('');
  const [twitter, setTwitter] = useState('');
  const [thumbnail] = useState(null);
  const { formatMessage: f } = useIntl();
  const toggle = () => toggleModal(!isOpen);
  const [createPerson] = useMutation(CREATE_PERSON);
  const onCompleted = () => {
    toggle();
    setPersonName('');
    setPersonNameKanji('');
    setDescription('');
    setTwitter('');
  };
  const isIncomplete = !personName;

  return (
    
      
        {f({ id: 'create_person', defaultMessage: 'Create Person' })}

const PluginAuthorization: React.FC = props => {
  const { fields, onClear, onEdit } = props;

  const classes = useStyles(props);
  const intl = useIntl();

  const secretFields = fields.filter(field =>
    isSecretField(fields, field.name)
  );

  return (
    
      
      
        {secretFields.map((field, fieldIndex) => (

function useMutation({
    onCompleted,
    onError
  }: UseMutationCbs): UseMutation {
    const notify = useNotifier();
    const intl = useIntl();
    const [mutateFn, result] = useBaseMutation(mutation, {
      onCompleted,
      onError: (err: ApolloError) => {
        if (
          maybe(
            () =>
              err.graphQLErrors[0].extensions.exception.code ===
              "ReadOnlyException"
          )
        ) {
          notify({
            text: intl.formatMessage(commonMessages.readOnly)
          });
        } else {
          notify({
            text: intl.formatMessage(commonMessages.somethingWentWrong)