Using Result.match

Currently, we’re rendering the raw structure of the Result object to visualize its internal state. Now that we understand the three states a Result can be in, let’s replace the JSON dump with a proper UI.

What does a proper UI for async state look like?

We need to account for three states:

• Initial: Data fetching is in progress. We show a spinner.
• Failure: Data fetching failed. We show the error name and message.
• Success: Data fetching succeeded. We render the users.

Replace the existing code inside components/user-grid.tsx with the following:

1
"use client";
2

3
import { Result, useAtomValue } from "@effect-atom/atom-react";
4
import { Cause } from "effect";
5

6
import { FailureCard } from "@/components/failure-card";
7
import { UserEmptyCard } from "@/components/user-empty-card";
8
import { UserGridSpinner } from "@/components/user-grid-spinner";
9
import { UserSuccessCard } from "@/components/user-success-card";
10

11
import { usersAtom } from "@/atoms/user";
12
import { ConfigError, GetUsersError } from "@/errors";
13
import { UsersResponse } from "@/schema/user-schema";
14
import { getErrorInfo } from "@/lib/utils";
15

16
const selectUsers = (
17
  result: Result.Result<UsersResponse, ConfigError | GetUsersError>,
18
) => Result.map(result, (data) => data.users);
19

20
export function UserGrid() {
21
  const usersResult = useAtomValue(usersAtom, selectUsers);
22

23
  return Result.match(usersResult, {
24
    onInitial: () => <UserGridSpinner />,
25

26
    onFailure: (failure) => {
27
      const error = Cause.squash(failure.cause);
28
      const { title, message } = getErrorInfo(error);
29
      return <FailureCard title={title} message={message} />;
30
    },
31

32
    onSuccess: (success) => {
33
      const users = success.value;
34

35
      if (users.length === 0) {
36
        return <UserEmptyCard reason="empty-users-list" />;
37
      }
38

39
      return (
40
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10">
41
          {users.map((user) => (
42
            <UserSuccessCard key={user.id} user={user} />
43
          ))}
44
        </div>
45
      );
46
    },
47
  });
48
}

Let’s understand what’s going on here.

The UserGrid component needs the users array. But usersAtom contains both the users array and the users count. So, we pass a transform function named selectUsers as the second argument to useAtomValue. selectUsers takes in the full Result and uses Result.map to extract just the users array. This way, usersResult contains only the users.

Result.match takes a Result and an object with three handlers, one for each state:

• onInitial renders a spinner while data is being fetched.

• onSuccess receives the success value (the users array) and renders the user cards, or an empty state if the array is empty.

• onFailure deserves a closer look. The failure result contains a cause property, but this isn’t the error directly. It’s an Effect Cause, which is a wrapper that can represent complex error scenarios like multiple failures or interruptions. Cause.squash extracts the underlying error from this wrapper. Once we have the error, we pass it to getErrorInfo, which reads the error’s name and message to produce a user-friendly title and description for the FailureCard.

Now, visit the home page. You should see 12 user cards rendered. To see the FailureCard in action, go to user-service.ts and change the endpoint from /users to /usersx (which doesn’t exist). Visit the home page again. You should see the failure card rendered with the error title and message. Remember to revert the endpoint back to /users before continuing.