React 19 Actions実践ガイド: useActionState, useOptimistic & Server Actionの回復性

// lib/schemas.ts
import { z } from 'zod';

export const profileSchema = z.object({
  username: z.string().min(3, 'Username must be at least 3 characters.').max(50, 'Username cannot exceed 50 characters.'),
  email: z.string().email('Invalid email address.'),
  bio: z.string().max(200, 'Bio cannot exceed 200 characters.').optional(),
});

export const passwordSchema = z.object({
  currentPassword: z.string().min(8, 'Current password must be at least 8 characters.'),
  newPassword: z.string().min(8, 'New password must be at least 8 characters.'),
  confirmNewPassword: z.string(),
}).refine((data) => data.newPassword === data.confirmNewPassword, {
  message: 'New passwords do not match.',
  path: ['confirmNewPassword'],
});

export type ProfileFormState = {
  message: string;
  errors?: {
    username?: string[];
    email?: string[];
    bio?: string[];
    currentPassword?: string[];
    newPassword?: string[];
    confirmNewPassword?: string[];
  };
  fieldValues?: {
    username?: string;
    email?: string;
    bio?: string;
  };
};

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { profileSchema, passwordSchema, ProfileFormState } from '@/lib/schemas';
import { z } from 'zod';

// Simulate a database
const usersDb = new Map<string, { username: string; email: string; bio?: string; passwordHash: string }>();
usersDb.set('user123', { username: 'user123', email: 'user@example.com', bio: 'Initial bio.', passwordHash: 'hashed_password_123' });

export async function updateProfile(
  prevState: ProfileFormState,
  formData: FormData
): Promise<ProfileFormState> {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay

  const rawFormData = {
    username: formData.get('username'),
    email: formData.get('email'),
    bio: formData.get('bio'),
  };

  const validatedFields = profileSchema.safeParse(rawFormData);

  if (!validatedFields.success) {
    const fieldErrors = validatedFields.error.flatten().fieldErrors;
    return {
      message: 'Validation failed.',
      errors: fieldErrors,
      fieldValues: rawFormData as any, // Return raw values for re-population
    };
  }

  const { username, email, bio } = validatedFields.data;

  // Simulate DB update
  const currentUser = usersDb.get('user123'); // In real app, get from session
  if (currentUser) {
    currentUser.username = username;
    currentUser.email = email;
    currentUser.bio = bio;
    usersDb.set('user123', currentUser);
  } else {
    return { message: 'User not found.', errors: {} };
  }

  revalidatePath('/profile'); // Invalidate cache for the profile page
  return { message: 'Profile updated successfully!', fieldValues: { username, email, bio } };
}

export async function changePassword(
  prevState: ProfileFormState,
  formData: FormData
): Promise<ProfileFormState> {
  await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate network delay

  const rawFormData = {
    currentPassword: formData.get('currentPassword'),
    newPassword: formData.get('newPassword'),
    confirmNewPassword: formData.get('confirmNewPassword'),
  };

  const validatedFields = passwordSchema.safeParse(rawFormData);

  if (!validatedFields.success) {
    const fieldErrors = validatedFields.error.flatten().fieldErrors;
    return {
      message: 'Password validation failed.',
      errors: fieldErrors,
    };
  }

  const { currentPassword, newPassword } = validatedFields.data;

  // Simulate current password check
  const currentUser = usersDb.get('user123');
  if (!currentUser || currentUser.passwordHash !== 'hashed_password_123') { // In real app, hash and compare
    return { message: 'Incorrect current password.', errors: { currentPassword: ['Incorrect password.'] } };
  }

  // Simulate password update
  currentUser.passwordHash = `hashed_${newPassword}`; // In real app, hash new password
  usersDb.set('user123', currentUser);

  revalidatePath('/profile/security');
  return { message: 'Password updated successfully!' };
}

// app/profile/page.tsx
'use client';

import { useActionState, useOptimistic, useRef, useEffect, useState } from 'react';
import { useFormStatus } from 'react-dom';
import { updateProfile, changePassword } from '@/app/actions';
import { ProfileFormState } from '@/lib/schemas';

// Initial state for useActionState
const initialProfileState: ProfileFormState = {
  message: '',
  errors: {},
  fieldValues: { username: 'user123', email: 'user@example.com', bio: 'Initial bio.' },
};

const initialPasswordState: ProfileFormState = {
  message: '',
  errors: {},
};

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" aria-disabled={pending} disabled={pending} className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50">
      {pending ? 'Saving...' : label}
    </button>
  );
}

export default function ProfileSettings() {
  const [profileState, profileAction] = useActionState(updateProfile, initialProfileState);
  const [passwordState, passwordAction] = useActionState(changePassword, initialPasswordState);

  // Optimistic state for profile updates
  const [optimisticProfile, addOptimisticProfile] = useOptimistic(
    profileState.fieldValues,
    (currentValues, newValues: Partial<typeof profileState.fieldValues>) => ({
      ...currentValues,
      ...newValues,
    })
  );

  const profileFormRef = useRef<HTMLFormElement>(null);
  const passwordFormRef = useRef<HTMLFormElement>(null);

  // Effect to reset form fields or show success messages
  useEffect(() => {
    if (profileState.message === 'Profile updated successfully!') {
      // Optionally clear form or show a toast
      console.log('Profile update success:', profileState.message);
    }
    if (passwordState.message === 'Password updated successfully!') {
      passwordFormRef.current?.reset(); // Clear password fields
      console.log('Password update success:', passwordState.message);
    }
  }, [profileState, passwordState]);

  const handleProfileSubmit = async (formData: FormData) => {
    // Optimistically update UI
    addOptimisticProfile({
      username: formData.get('username') as string,
      email: formData.get('email') as string,
      bio: formData.get('bio') as string,
    });
    await profileAction(formData);
  };

  const [currentStep, setCurrentStep] = useState(1);

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white shadow-md rounded-lg">
      <h1 className="text-2xl font-bold mb-6">Profile Settings</h1>

      {/* Step 1: Profile Details */}
      {currentStep === 1 && (
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Update Profile</h2>
          <form ref={profileFormRef} action={handleProfileSubmit} className="space-y-4">
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-gray-700">Username</label>
              <input
                type="text"
                id="username"
                name="username"
                defaultValue={optimisticProfile?.username || ''}
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
              />
              {profileState.errors?.username && (
                <p className="text-red-500 text-sm mt-1">{profileState.errors.username[0]}</p>
              )}
            </div>
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
              <input
                type="email"
                id="email"
                name="email"
                defaultValue={optimisticProfile?.email || ''}
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
              />
              {profileState.errors?.email && (
                <p className="text-red-500 text-sm mt-1">{profileState.errors.email[0]}</p>
              )}
            </div>
            <div>
              <label htmlFor="bio" className="block text-sm font-medium text-gray-700">Bio</label>
              <textarea
                id="bio"
                name="bio"
                rows={3}
                defaultValue={optimisticProfile?.bio || ''}
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
              ></textarea>
              {profileState.errors?.bio && (
                <p className="text-red-500 text-sm mt-1">{profileState.errors.bio[0]}</p>
              )}
            </div>
            {profileState.message && profileState.message !== 'Validation failed.' && (
              <p className={`text-sm ${profileState.message.includes('successfully') ? 'text-green-600' : 'text-red-600'}`}>
                {profileState.message}
              </p>
            )}
            <div className="flex justify-between items-center">
              <SubmitButton label="Save Profile" />
              <button
                type="button"
                onClick={() => setCurrentStep(2)}
                className="text-blue-600 hover:underline"
              >
                Next: Change Password &rarr;
              </button>
            </div>
          </form>
        </section>
      )}

      {/* Step 2: Change Password */}
      {currentStep === 2 && (
        <section>
          <h2 className="text-xl font-semibold mb-4">Change Password</h2>
          <form ref={passwordFormRef} action={passwordAction} className="space-y-4">
            <div>
              <label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700">Current Password</label>
              <input
                type="password"
                id="currentPassword"
                name="currentPassword"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
              />
              {passwordState.errors?.currentPassword && (
                <p className="text-red-500 text-sm mt-1">{passwordState.errors.currentPassword[0]}</p>
              )}
            </div>
            <div>
              <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700">New Password</label>
              <input
                type="password"
                id="newPassword"
                name="newPassword"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
              />
              {passwordState.errors?.newPassword && (
                <p className="text-red-500 text-sm mt-1">{passwordState.errors.newPassword[0]}</p>
              )}
            </div>
            <div>
              <label htmlFor="confirmNewPassword" className="block text-sm font-medium text-gray-700">Confirm New Password</label>
              <input
                type="password"
                id="confirmNewPassword"
                name="confirmNewPassword"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
              />
              {passwordState.errors?.confirmNewPassword && (
                <p className="text-red-500 text-sm mt-1">{passwordState.errors.confirmNewPassword[0]}</p>
              )}
            </div>
            {passwordState.message && passwordState.message !== 'Password validation failed.' && (
              <p className={`text-sm ${passwordState.message.includes('successfully') ? 'text-green-600' : 'text-red-600'}`}>
                {passwordState.message}
              </p>
            )}
            <div className="flex justify-between items-center">
              <button
                type="button"
                onClick={() => setCurrentStep(1)}
                className="text-blue-600 hover:underline"
              >
                &larr; Previous: Profile Details
              </button>
              <SubmitButton label="Change Password" />
            </div>
          </form>
        </section>
      )}
    </div>
  );
}