failsafeUpdateWithSnack.tsx

import * as React from 'react';
import {Button, Typography} from '@material-ui/core';
import {FormTransportErrors, FormTransportResponse} from 'lib/FormTransport';
import {AppContext} from './AppContext';
import {Model} from './models/Model';
import {Snack, SnackStore} from './SnackStore';
import {failsafeUpdate} from './failsafeUpdate';

export async function failsafeUpdateWithSnack<T extends Model<any, any>> (
  instance: T,
  changes: Partial<T>,
  send: (updatedInstance: T) => Promise<FormTransportResponse<T, keyof T>>,
  snacks: SnackStore
) {
  return failsafeUpdate(instance, changes, send, createSnackErrorReporter(snacks));
}

export function createSnackErrorReporter<T extends string> (snacks: SnackStore) {
  return (error: FormTransportErrors<T>) => reportErrorToSnacks(error, snacks);
}

export function reportErrorToSnacks<T extends string> (error: FormTransportErrors<T>, snacks: SnackStore) {
  snacks.add({
    message: () => <Typography>{error.message}</Typography>,
    action: (snack: Snack) => (
      <AppContext.Consumer>
        {({context: {state: {i18n}}}) => (
          <Button onClick={() => snack.close()}>
            {i18n.format('common.close')}
          </Button>
        )}
      </AppContext.Consumer>
    )
  });
}