مدیریت حرفه‌ای وضعیت فرم در React با `useFormState`

            // actions.server.js (or a similar server-side file)
'use server';

import { z } from 'zod'; // A popular validation library

// Define a schema for validation
const registrationSchema = z.object({
  username: z.string().min(3, 'Username must be at least 3 characters long.'),
  email: z.string().email('Invalid email address.'),
  password: z.string().min(6, 'Password must be at least 6 characters long.')
});

// Define the structure of the state returned by the action
export type FormState = {
  data?: Record<string, string>;
  errors?: {
    username?: string;
    email?: string;
    password?: string;
  };
  message?: string | null;
};

export async function registerUser(prevState: FormState, formData: FormData) {
  const validatedFields = registrationSchema.safeParse({
    username: formData.get('username'),
    email: formData.get('email'),
    password: formData.get('password')
  });

  if (!validatedFields.success) {
    return {
      ...validatedFields.error.flatten().fieldErrors,
      message: 'Registration failed due to validation errors.'
    };
  }

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

  // Simulate saving user to a database (replace with actual DB logic)
  try {
    console.log('Registering user:', { username, email });
    // await createUserInDatabase({ username, email, password });
    return {
      data: { username: '', email: '', password: '' }, // Clear form on success
      errors: undefined,
      message: 'User registered successfully!'
    };
  } catch (error) {
    console.error('Error registering user:', error);
    return {
      data: { username, email, password }, // Keep form data on error
      errors: undefined,
      message: 'An unexpected error occurred during registration.'
    };
  }
}

            

              
                Copy
              
            
          

            
// RegistrationForm.jsx
'use client';

import { useEffect, useRef } from 'react';
import { useFormState } from 'react-dom';
import { registerUser, type FormState } from './actions.server';

const initialState: FormState = {
  data: { username: '', email: '', password: '' },
  errors: {},
  message: null
};

export default function RegistrationForm() {
  const [state, formAction] = useFormState(registerUser, initialState);
  const formRef = useRef<HTMLFormElement>(null);

  // Reset form on successful submission or when state changes significantly
  useEffect(() => {
    if (state.message === 'User registered successfully!') {
      formRef.current?.reset();
    }
  }, [state.message]);

  return (
    <form action={formAction} ref={formRef} className="registration-form">
      <h2>User Registration</h2>
      <div className="form-group">
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          defaultValue={state.data?.username || ''}
          aria-describedby="username-error"
        />
        {state.errors?.username && (
          <div id="username-error" className="error-message">
            {state.errors.username}
          </div>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          defaultValue={state.data?.email || ''}
          aria-describedby="email-error"
        />
        {state.errors?.email && (
          <div id="email-error" className="error-message">
            {state.errors.email}
          </div>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          defaultValue={state.data?.password || ''}
          aria-describedby="password-error"
        />
        {state.errors?.password && (
          <div id="password-error" className="error-message">
            {state.errors.password}
          </div>
        )}
      </div>

      <button type="submit">Register</button>

      {state.message && (
        <div className="submission-message">
          <strong>{state.message}</strong>
        </div>
      )}
    </form>
  );
}

            

              
                Copy
              
            
          

            
.registration-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: sans-serif;
}

.registration-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.error-message {
  color: #e53e3e; /* Red color for errors */
  font-size: 0.875rem;
  margin-top: 5px;
}

.submission-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #d4edda; /* Green background for success */
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  text-align: center;
}

.registration-form button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.registration-form button:hover {
  background-color: #0056b3;
}

            

              
                Copy
              
            
          

            // In actions.server.js for file upload
export async function uploadDocument(prevState: FormState, formData: FormData) {
  const file = formData.get('document') as File | null;

  if (!file) {
    return { message: 'Please select a document to upload.' };
  }

  // Process the file (e.g., save to cloud storage)
  console.log('Uploading file:', file.name, file.type, file.size);
  // await saveFileToStorage(file);

  return { message: 'Document uploaded successfully!' };
}

// In your React component
// ...
// const [state, formAction] = useFormState(uploadDocument, initialState);
// ...
// <form action={formAction}>
//   <input type="file" name="document" />
//   <button type="submit">Upload</button>
// </form>
// ...

            

              
                Copy
              
            
          

            
// In your form component
function handleAction(actionType: string) {
  // You might need to update a state or ref that the form action can read
  // Or, more directly, use form.submit() with a pre-filled hidden input
}

// ... within the form ...
// <input type="hidden" name="actionToRun" value="register" />
// <button type="submit">Register</button>
// <button type="submit" formAction="/api/user/update">Update Profile</button> // Example of a different action

            

              
                Copy
              
            
          

            
// RegistrationForm.jsx with React Hook Form
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { registerUser, type FormState } from './actions.server';
import { z } from 'zod';

const registrationSchema = z.object({
  username: z.string().min(3, 'Username must be at least 3 characters long.'),
  email: z.string().email('Invalid email address.'),
  password: z.string().min(6, 'Password must be at least 6 characters long.')
});

type FormData = z.infer<typeof registrationSchema>;

const initialState: FormState = {
  data: { username: '', email: '', password: '' },
  errors: {},
  message: null
};

export default function RegistrationForm() {
  const [state, formAction] = useFormState(registerUser, initialState);
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(registrationSchema),
    defaultValues: state.data || { username: '', email: '', password: '' } // Initialize with state data
  });

  // Handle submission with React Hook Form's handleSubmit
  const onSubmit = handleSubmit((data) => {
    // Construct FormData and dispatch the action
    const formData = new FormData();
    formData.append('username', data.username);
    formData.append('email', data.email);
    formData.append('password', data.password);
    // The formAction will be attached to the form element itself
  });

  // Note: The actual submission needs to be tied to the form action.
  // A common pattern is to use a single form and let the formAction handle it.
  // If using RHF's handleSubmit, you'd typically prevent default and call your server action manually
  // OR, use the form's action attribute and RHF will manage the input values.

  // For simplicity with useFormState, it's often cleaner to let the form's 'action' prop manage.
  // React Hook Form's internal submission can be bypassed if the form 'action' is used.

  return (
    <form action={formAction} className="registration-form">
      <h2>User Registration</h2>
      <div className="form-group">
        <label htmlFor="username">Username:</label>
        <input
          {...register('username')}
          id="username"
          name="username"
          aria-describedby="username-error"
          // Use RHF's error, but also consider server errors
        />
        {(errors.username || state.errors?.username) && (
          <div id="username-error" className="error-message">
            {errors.username?.message || state.errors?.username}
          </div>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input
          {...register('email')}
          id="email"
          name="email"
          aria-describedby="email-error"
        />
        {(errors.email || state.errors?.email) && (
          <div id="email-error" className="error-message">
            {errors.email?.message || state.errors?.email}
          </div>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="password">Password:</label>
        <input
          {...register('password')}
          type="password"
          id="password"
          name="password"
          aria-describedby="password-error"
        />
        {(errors.password || state.errors?.password) && (
          <div id="password-error" className="error-message">
            {errors.password?.message || state.errors?.password}
          </div>
        )}
      </div>

      <button type="submit">Register</button>

      {state.message && (
        <div className="submission-message">
          <strong>{state.message}</strong>
        </div>
      )}
    </form>
  );
}

            

              
                Copy
              
            
          

            // actions.server.js (simplified localization)
import i18n from './i18n'; // Assume i18n setup

// ... inside registerUser ...
if (!validatedFields.success) {
  const errors = validatedFields.error.flatten().fieldErrors;
  return {
    username: errors.username ? i18n.t('validation:username_min', { count: 3 }) : undefined,
    email: errors.email ? i18n.t('validation:email_invalid') : undefined,
    password: errors.password ? i18n.t('validation:password_min', { count: 6 }) : undefined,
    message: i18n.t('validation:registration_failed')
  };
}

            

              
                Copy