RemoteData in TypeScript

RemoteData.ts

import { Status } from './Status';

export const NotAsked: NotAsked = {
  status: Status.NotAsked
};

export interface NotAsked {
  status: Status.NotAsked;
}

export const Loading: Loading = {
  status: Status.Loading
};

export interface Loading {
  status: Status.Loading;
}

export interface Success<Data> {
  status: Status.Success;
  data: Data;
}

export const ErrorFetching: ErrorFetching = {
  status: Status.ErrorFetching
};

export interface ErrorFetching {
  status: Status.ErrorFetching;
  error?: Error;
}

// Yes, this is valid TypeScript :)
export type RemoteData<Data> =
  | NotAsked
  | Loading
  | Success<Data>
  | ErrorFetching;

RemoteDataWrapper.tsx

import { FunctionalComponent, h, ComponentChildren, VNode } from 'preact';
import { RemoteData, Success } from 'models/RemoteData';
import { Card } from 'components/common/Card';
import { Status } from 'models/Status';
import { Spinner } from 'components/common/Spinner';
import { Subtitle } from 'components/common/Subtitle';
import { Title } from 'components/common/Title';

export interface Props {
  remoteData: RemoteData<unknown>;
  children: ComponentChildren;
  // For side-effects
  onSuccess?: (data: Success<unknown>) => void;
  renderError?: (error?: Error) => VNode | null;
  tinySpinner?: boolean;
}

export const RemoteDataWrapper: FunctionalComponent<Props> = ({
  remoteData,
  children,
  onSuccess,
  renderError,
  tinySpinner
}: Props) => {
  switch (remoteData.status) {
    case Status.NotAsked:
      /*
       * This remote data was not asked yet
       * Most probably this state is not visible if the fetch happens
       * in componentDidMount
       * Most probably we don't even want to display this, so let's hide it
       * The message may be useful for debugging purposes, though
       */
      return <span class="visually-hidden">The data has not been fetched yet</span>;

    case Status.Loading:
      /*
       * This remote data is loading but not available yet
       * let's render a spinner instead
       */
      return <Spinner tiny={tinySpinner} />;

    case Status.ErrorFetching:
      /*
       * Something went wrong when fetching this remote data
       * Display the error message to the user
       * Might not look nice in every place this might be visible
       */

      if (renderError) {
        return renderError(remoteData.error);
      } else {
        return (
          <Card>
            <Title>Auch! Something went wrong!<Title>
            {remoteData.error && (
              <Subtitle>{remoteData.error.message}</Subtitle>
            )}
            <span>Please try again later.<span>
          </Card>
        );
      }

    case Status.Success:
      /*
       * Remote data is now available, so let's render the children
       * Additionally, call the onSuccess function if defined, because
       * in some cases we want to do some side-effects, such as updating
       * the document title when the data is available
       */
      if (onSuccess) {
        // Commit horrible side-effects
        onSuccess(remoteData);
      }
      // We use children as the successful state
      // could have used a render props as well
      return <div>{children}</div>;

    default:
      // Should never happen, but in case this happens, just return null
      return null;
  }
};

Status.ts

export enum Status {
  NotAsked = 'NotAsked',
  Loading = 'Loading',
  Success = 'Success',
  ErrorFetching = 'ErrorFetching'
}