Adding a User | Effect Atom | Effective Software

When you click the Add User link on the home page, you’re taken to a page with an “Add New User” form. Fill it out and submit—nothing happens. That’s because the onSubmit handler in components/add-user-form.tsx is empty. Let’s wire it up.

Adding the addUser Method

In services/user-service.ts, add the addUser method:

1
import { Effect, Layer, ServiceMap } from "effect";
2
import {
3
  FetchHttpClient,
4
  HttpClient,
5
  HttpClientRequest,
6
  HttpClientResponse,
7
} from "effect/unstable/http";
8

9
import { apiBaseUrlConfig } from "@/lib/config";
10
import { USERS_PER_PAGE } from "@/lib/constants";
11
import { mapHttpError } from "@/lib/http-error";
12
import { ParseError, type HttpError } from "@/errors";
13
import {
14
  UserSchema,
15
  UsersSchema,
16
  type AddUserFormValues,
17
  type User,
18
  type UsersResponse,
19
} from "@/schema/user-schema";
20

21
export class UserService extends ServiceMap.Service<UserService>()(
22
  "app/UserService",
23
  {
24
    make: Effect.gen(function* () {
25
      const client = (yield* HttpClient.HttpClient).pipe(
26
        HttpClient.filterStatusOk,
27
      );
28

29
      const apiBaseUrl = yield* apiBaseUrlConfig;
30

61 collapsed lines
31
      // ============ Get Users ============
32
      function getUsers(): Effect.Effect<UsersResponse, HttpError> {
33
        const request = HttpClientRequest.get(`${apiBaseUrl}/users`).pipe(
34
          HttpClientRequest.setUrlParams({
35
            _limit: USERS_PER_PAGE.toString(),
36
          }),
37
        );
38

39
        return client.execute(request).pipe(
40
          Effect.delay("1 second"),
41
          Effect.flatMap((response) =>
42
            Effect.all({
43
              users: HttpClientResponse.schemaBodyJson(UsersSchema)(response),
44
              usersCount: Effect.succeed(
45
                Number(response.headers["x-total-count"]),
46
              ),
47
            }),
48
          ),
49
          Effect.catchTag("HttpClientError", (error) =>
50
            Effect.fail(mapHttpError(error)),
51
          ),
52
          Effect.catchTag("SchemaError", (error) =>
53
            Effect.fail(
54
              new ParseError({
55
                message: "Received an unexpected response from the server.",
56
                cause: error,
57
              }),
58
            ),
59
          ),
60
        );
61
      }
62

63
      // ============ Get User ============
64
      function getUser(id: string): Effect.Effect<User, HttpError> {
65
        return client.get(`${apiBaseUrl}/users/${id}`).pipe(
66
          Effect.delay("1 second"),
67
          Effect.flatMap(HttpClientResponse.schemaBodyJson(UserSchema)),
68
          Effect.catchTag("HttpClientError", (error) =>
69
            Effect.fail(mapHttpError(error)),
70
          ),
71
          Effect.catchTag("SchemaError", (error) =>
72
            Effect.fail(
73
              new ParseError({
74
                message: "Received an unexpected response from the server.",
75
                cause: error,
76
              }),
77
            ),
78
          ),
79
        );
80
      }
81

82
      // ============ Delete User ============
83
      function deleteUser(userId: string): Effect.Effect<void, HttpError> {
84
        return client.del(`${apiBaseUrl}/users/${userId}`).pipe(
85
          Effect.delay("1 second"),
86
          Effect.asVoid,
87
          Effect.catchTag("HttpClientError", (error) =>
88
            Effect.fail(mapHttpError(error)),
89
          ),
90
        );
91
      }
92

93
      // ============ Add User ============
94
      function addUser(
95
        user: AddUserFormValues,
96
      ): Effect.Effect<User, HttpError> {
97
        return HttpClientRequest.post(`${apiBaseUrl}/users`).pipe(
98
          HttpClientRequest.bodyJson(user),
99
          Effect.delay("1 second"),
100
          Effect.flatMap(client.execute),
101
          Effect.flatMap(HttpClientResponse.schemaBodyJson(UserSchema)),
102
          Effect.catchTag("HttpClientError", (error) =>
103
            Effect.fail(mapHttpError(error)),
104
          ),
105
          Effect.catchTag("SchemaError", (error) =>
106
            Effect.fail(
107
              new ParseError({
108
                message: "Received an unexpected response from the server.",
109
                cause: error,
110
              }),
111
            ),
112
          ),
113
        );
114
      }
115

116
      return { getUsers, getUser, deleteUser, addUser };
117
    }),
118
  },
119
) {
120
  static layer = Layer.effect(this, this.make).pipe(
121
    Layer.provide(FetchHttpClient.layer),
122
  );
123
}

Adding the Add User Atom

In atoms/user.ts, add the the addUserAtom:

1
import { Duration, Effect } from "effect";
2
import { Atom } from "effect/unstable/reactivity";
3

4
import { atomRuntime } from "@/atom-runtime";
5
import { type AddUserFormValues } from "@/schema/user-schema";
6
import { UserService } from "@/services/user-service";
7

8
// ============ Users Atom ============
9
export const usersAtom = atomRuntime
10
  .atom(
11
    Effect.gen(function* () {
12
      const userService = yield* UserService;
13
      return yield* userService.getUsers();
14
    }),
15
  )
16
  .pipe(Atom.setIdleTTL(Duration.hours(1)));
17

18
// ============ User Atom ============
19
export const userAtom = Atom.family((id: string) =>
20
  atomRuntime
21
    .atom(
22
      Effect.gen(function* () {
23
        const userService = yield* UserService;
24
        return yield* userService.getUser(id);
25
      }),
26
    )
27
    .pipe(Atom.setIdleTTL(Duration.hours(1))),
28
);
29

30
// ============ Delete User Atom ============
31
export const deleteUserAtom = atomRuntime.fn(
32
  Effect.fnUntraced(function* (userId: string, get) {
33
    const userService = yield* UserService;
34
    yield* userService.deleteUser(userId);
35
  }),
36
);
37

38
// ============ Add User Atom ============
39
export const addUserAtom = atomRuntime.fn<AddUserFormValues>()(
40
  Effect.fnUntraced(function* (user) {
41
    const userService = yield* UserService;
42
    return yield* userService.addUser(user);
43
  }),
44
);

This follows the same pattern as deleteUserAtom. Notice the syntax is slightly different. atomRuntime.fn<AddUserFormValues>()() explicitly specifies the input type as a generic parameter. With deleteUserAtom, TypeScript could infer the input type from the userId: string annotation. Here we pass the type explicitly so that user inside the function is correctly typed as AddUserFormValues.

Updating the onSubmit Handler

Update components/add-user-form.tsx as shown below:

1
"use client";
2

3
import { startTransition, useId, useState } from "react";
4
import { useRouter } from "next/navigation";
5
import { useAtomSet } from "@effect/atom-react";
6
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
7
import { Cause, Exit, Option } from "effect";
8
import { useForm } from "react-hook-form";
9
import { useProgress } from "react-transition-progress";
10
import { toast } from "sonner";
11

12
import {
13
  FormErrorMessage,
14
  FormFieldErrorMessage,
15
} from "@/components/form-messages";
16
import { Icons } from "@/components/icons";
17
import { Button } from "@/components/ui/button";
18
import { Card, CardContent } from "@/components/ui/card";
19
import { Input } from "@/components/ui/input";
20
import { Label } from "@/components/ui/label";
21

22
import { addUserAtom } from "@/atoms/user";
23
import {
24
  AddUserFormStandardSchema,
25
  type AddUserFormValues,
26
} from "@/schema/user-schema";
27

28
export function AddUserForm() {
29
  const id = useId();
30
  const router = useRouter();
31
  const startProgress = useProgress();
32

33
  const [globalError, setGlobalError] = useState<string | null>(null);
34

35
  const addUser = useAtomSet(addUserAtom, { mode: "promiseExit" });
36

37
  const {
38
    register,
39
    handleSubmit,
40
    formState: { errors, isSubmitting },
41
  } = useForm<AddUserFormValues>({
42
    resolver: standardSchemaResolver(AddUserFormStandardSchema),
43
    defaultValues: {
44
      firstName: "",
45
      lastName: "",
46
      email: "",
47
      company: { name: "", title: "" },
48
      address: { address: "", city: "", state: "" },
49
    },
50
  });
51

52
  const onSubmit = async (data: AddUserFormValues) => {
53
    setGlobalError(null);
54

55
    const exit = await addUser(data);
56

57
    if (Exit.isSuccess(exit)) {
58
      const user = exit.value;
59
      toast.success("User Added Successfully", {
60
        description: `${user.firstName} ${user.lastName} was added successfully.`,
61
      });
62
      startTransition(() => {
63
        startProgress();
64
        router.push("/");
65
      });
66
    } else {
67
      const failureOption = Cause.findErrorOption(exit.cause);
68
      const errorMessage = Option.isSome(failureOption)
69
        ? failureOption.value.message
70
        : "An unexpected error occurred";
71
      setGlobalError(errorMessage);
72
    }
73
  };
74

75
  return (
146 collapsed lines
76
    <Card>
77
      <CardContent className="mt-4">
78
        <FormErrorMessage message={globalError} />
79

80
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
81
          {/* First Name */}
82
          <div className="space-y-2">
83
            <Label htmlFor={`${id}-firstName`}>First Name</Label>
84
            <Input
85
              id={`${id}-firstName`}
86
              {...register("firstName")}
87
              aria-invalid={!!errors.firstName}
88
              aria-describedby={
89
                errors.firstName ? `${id}-firstName-error` : undefined
90
              }
91
            />
92
            <FormFieldErrorMessage
93
              id={`${id}-firstName-error`}
94
              message={errors.firstName?.message}
95
            />
96
          </div>
97

98
          {/* Last Name */}
99
          <div className="space-y-2">
100
            <Label htmlFor={`${id}-lastName`}>Last Name</Label>
101
            <Input
102
              id={`${id}-lastName`}
103
              {...register("lastName")}
104
              aria-invalid={!!errors.lastName}
105
              aria-describedby={
106
                errors.lastName ? `${id}-lastName-error` : undefined
107
              }
108
            />
109
            <FormFieldErrorMessage
110
              id={`${id}-lastName-error`}
111
              message={errors.lastName?.message}
112
            />
113
          </div>
114

115
          {/* Email */}
116
          <div className="space-y-2">
117
            <Label htmlFor={`${id}-email`}>Email</Label>
118
            <Input
119
              id={`${id}-email`}
120
              type="email"
121
              {...register("email")}
122
              aria-invalid={!!errors.email}
123
              aria-describedby={errors.email ? `${id}-email-error` : undefined}
124
            />
125
            <FormFieldErrorMessage
126
              id={`${id}-email-error`}
127
              message={errors.email?.message}
128
            />
129
          </div>
130

131
          <div className="grid grid-cols-2 gap-4">
132
            {/* Company Name */}
133
            <div className="space-y-2">
134
              <Label htmlFor={`${id}-companyName`}>Company Name</Label>
135
              <Input
136
                id={`${id}-companyName`}
137
                {...register("company.name")}
138
                aria-invalid={!!errors.company?.name}
139
                aria-describedby={
140
                  errors.company?.name ? `${id}-companyName-error` : undefined
141
                }
142
              />
143
              <FormFieldErrorMessage
144
                id={`${id}-companyName-error`}
145
                message={errors.company?.name?.message}
146
              />
147
            </div>
148

149
            {/* Job Title */}
150
            <div className="space-y-2">
151
              <Label htmlFor={`${id}-jobTitle`}>Job Title</Label>
152
              <Input
153
                id={`${id}-jobTitle`}
154
                {...register("company.title")}
155
                aria-invalid={!!errors.company?.title}
156
                aria-describedby={
157
                  errors.company?.title ? `${id}-jobTitle-error` : undefined
158
                }
159
              />
160
              <FormFieldErrorMessage
161
                id={`${id}-jobTitle-error`}
162
                message={errors.company?.title?.message}
163
              />
164
            </div>
165
          </div>
166

167
          {/* Address Info */}
168
          <div className="space-y-4 pt-2">
169
            <div className="space-y-2">
170
              <Label htmlFor={`${id}-address`}>Street Address</Label>
171
              <Input
172
                id={`${id}-address`}
173
                {...register("address.address")}
174
                aria-invalid={!!errors.address?.address}
175
              />
176
              <FormFieldErrorMessage
177
                id={`${id}-address-error`}
178
                message={errors.address?.address?.message}
179
              />
180
            </div>
181

182
            <div className="grid grid-cols-2 gap-4">
183
              <div className="space-y-2">
184
                <Label htmlFor={`${id}-city`}>City</Label>
185
                <Input
186
                  id={`${id}-city`}
187
                  {...register("address.city")}
188
                  aria-invalid={!!errors.address?.city}
189
                />
190
                <FormFieldErrorMessage
191
                  id={`${id}-city-error`}
192
                  message={errors.address?.city?.message}
193
                />
194
              </div>
195

196
              <div className="space-y-2">
197
                <Label htmlFor={`${id}-state`}>State</Label>
198
                <Input
199
                  id={`${id}-state`}
200
                  {...register("address.state")}
201
                  aria-invalid={!!errors.address?.state}
202
                />
203
                <FormFieldErrorMessage
204
                  id={`${id}-state-error`}
205
                  message={errors.address?.state?.message}
206
                />
207
              </div>
208
            </div>
209
          </div>
210

211
          <div className="flex justify-end pt-4">
212
            <Button type="submit" disabled={isSubmitting}>
213
              {isSubmitting && (
214
                <Icons.spinner className="size-4 animate-spin" />
215
              )}
216
              Add User
217
            </Button>
218
          </div>
219
        </form>
220
      </CardContent>
221
    </Card>
222
  );
223
}

This follows the same pattern as the delete handler:

Clear previous errors: Reset any error state before attempting the operation.
Execute the mutation: await addUser(data) submits the form data and returns an Exit.
Handle success: Extract the created user from exit.value, show a success toast, then redirect to the home page.
Handle failure: Extract the error message and display it on top of the form.

Testing Add User

Fill out the Add User form with valid data and submit. You should see a success toast, and you’ll be redirected to the home page.

But just like with deletion, the new user doesn’t appear in the list. Refresh the page manually, and you’ll see the newly added user. We have the same problem: the user grid’s cache is stale, and it doesn’t know that the data has changed. We’ll fix this next.

Adding the addUser Method

Adding the Add User Atom

Updating the onSubmit Handler

Testing Add User

Stay in the loop