Tn Data Response

tn-data-response is a package for improving the way the data flow between the API calls and the UI flow.

This package was built as a helper for a project that follows the clean architecture pattern, but it is not linked to it. It can be used in any way you can add it to your project.

Helpers

Tn Data Response uses two helpers, one for data/domain/usecases layers, where we only need to know about succed or failed states. And the other helper for presentation layer, where we also need to know about a loading state (for ui feedback)

DataResponse

The first helper holds two possible values; a data value that holds the data coming from a datasource or a failure value, that holds the error coming in the flow.

For example, imagine that we have a AuthRemoteDataSource with a login method, using the DataResponse we can answer the same data-type for the file that is invoking this method.

Lets see this in code.

class AuthRemoteDataSource {
  private _api: Axios;

  constructor(api:Axios) {
    this._api = api;
  }

  function login(username: string, password: string) : DataResponse<LoginModel> {
    try {
      const response = axios.post("/login", { username, password });

      return DataResponse.success(LoginModel.fromJson(response.data));
    } catch (e) {
      return DataResponse.failure(new Failure(e.message, FailureSeverity.error))
    }
  }
}

The above example shows how DataResponse is used to indicates that we can expect a LoginModel coming in the response, but using DataResponse we can also hold a failure in the response.

Resourcer

The Resourcer helper is used for presentation layer, because it holds a loading state too. This allow us to show ui indicators for the final user.

Let use our last login method, lets forget a little bit about the clean architecture pattern and lets invoke the DataSource directly in the view.

class LoginForm() {
  const username = "test";
  const password = "123";

  const [resourcer, setResourcer] = useState<Resourcer<LoginModel>>(resourcer.initial());

  const onLoginPressed = async () => {
    setResourcer(resourcer.loading());

    const loginResponse = await AuthRemoteDataSource.login(username, password);

    setResourcer(loginResponse.toResourcer());
  }

  return (
    <div class='login-form'>
      { resourcer.fold(
        (data: LoginModel) => <AuthUser user={data} />,
        (failure: Failure) => <Exception failure={failure} />,
        (loading: boolean) => <Loading-Spinner />
      )}
    </div>
  )
}

The above code shows how in the ui we can display a component, or do actions depending on the value holded in the Resourcer.