Skip to main content

​
Overview

The Reschedule feature provides a one-click solution to reschedule all pending messages in the system. This is useful when you need to reset delivery schedules or adjust timing for all messages at once.

​
Key Features

Bulk Operation

Reschedule all messages with a single click

Real-time Feedback

Toast notifications for success or failure

Simple UI

Minimal interface with a single button

Loading States

Button disables during processing

​
UI Component

The Rescheduler component is a simple form with a submit button: 
"use client";
import { Button } from "@/components/ui/button";
import reschedule from "@/lib/actions/reschedule/reschedule";
import { Calendar } from "lucide-react";
import { useActionState, useEffect } from "react";
import { toast } from "sonner";

export default function Rescheduler() {
  const [rescheduleState, rescheduleAction, rescheduleIsPending] = 
    useActionState(reschedule, { success: false });
    
  useEffect(() => {
    if (rescheduleState.success) {
      toast.success("Messages rescheduled successfully", {
        richColors: true
      });
    } else if (rescheduleState.error) {
      toast.error("Messages rescheduling failed", {
        duration: 3500,
        richColors: true,
      });
    }
  }, [rescheduleState]);
  
  return (
    <form action={rescheduleAction}>
      <Button 
        disabled={rescheduleIsPending} 
        variant="default" 
        type="submit" 
        className="font-bold p-1 px-2"
      >
        <Calendar /> Reschede
      </Button>
    </form>
  )
}
The button displays a Calendar icon and is disabled while the reschedule operation is in progress.

​
How It Works

1

User Clicks the Reschedule Button

The button is located in the header or main navigation area of the application. When clicked, it triggers the form submission.
<Button disabled={rescheduleIsPending} type="submit">
  <Calendar /> Reschede
</Button>
2

Server Action is Invoked

The rescheduleAction calls the server-side reschedule function, which communicates with the backend API.
3

Backend Processing

The backend endpoint /messages/reschedule processes all pending messages and updates their schedules.
4

User Feedback

Based on the response, a toast notification appears:
  • Success: “Messages rescheduled successfully”
  • Error: “Messages rescheduling failed”

​
Server Action

The reschedule functionality is implemented as a Next.js Server Action: 
"use server"

import { revalidatePath } from "next/cache";

interface RescheduleState {
  success: boolean;
  error?: string;
}

export default async function reschedule(): Promise<RescheduleState> {
  try {
    const response = await fetch(
      `${process.env.BACKEND_URL}/messages/reschedule`, 
      {
        method: "GET",
        headers: {
          Authorization: `Basic ${Buffer.from(
            `${process.env.USERNAME}:${process.env.PASSWORD}`
          ).toString("base64")}`,
        },
      }
    );
    
    if (!response.ok) {
      return { success: false };
    }
    
    revalidatePath("/");
    return { success: true };
  } catch (e) {
    return { 
      success: false, 
      error: e instanceof Error ? e.message : "Unknown error" 
    };
  }
}

​
Key Implementation Details

​
State Management

The component uses React’s useActionState hook for managing form state: 
const [rescheduleState, rescheduleAction, rescheduleIsPending] = 
  useActionState(reschedule, { success: false });
  • rescheduleState: Contains the response from the server action
  • rescheduleAction: The function to call when submitting the form
  • rescheduleIsPending: Boolean indicating if the action is in progress

​
Loading State

The button is disabled during processing to prevent duplicate submissions: 
<Button disabled={rescheduleIsPending} type="submit">
  <Calendar /> Reschede
</Button>

​
Toast Notifications

Notifications are displayed using the Sonner toast library: 
useEffect(() => {
  if (rescheduleState.success) {
    toast.success("Messages rescheduled successfully", {
      richColors: true
    });
  } else if (rescheduleState.error) {
    toast.error("Messages rescheduling failed", {
      duration: 3500,
      richColors: true,
    });
  }
}, [rescheduleState]);
The richColors option provides visually enhanced success/error states.

​
Backend API Endpoint

The frontend communicates with the following backend endpoint:
EndpointMethodPurpose
/messages/rescheduleGETReschedule all pending messages

​
Authentication

All requests require Basic Authentication: 
headers: {
  Authorization: `Basic ${Buffer.from(
    `${process.env.USERNAME}:${process.env.PASSWORD}`
  ).toString("base64")}`,
}
Ensure BACKEND_URL, USERNAME, and PASSWORD environment variables are properly configured.

​
Error Handling

The reschedule action handles errors gracefully:
  1. Network Errors: Caught in the try-catch block
  2. HTTP Errors: Checked via response.ok
  3. Unknown Errors: Returned with a generic error message
try {
  const response = await fetch(/* ... */);
  
  if (!response.ok) {
    return { success: false };
  }
  
  return { success: true };
} catch (e) {
  return { 
    success: false, 
    error: e instanceof Error ? e.message : "Unknown error" 
  };
}

​
Cache Revalidation

After successful rescheduling, the home page cache is revalidated: 
revalidatePath("/");
This ensures that the updated message schedules are immediately visible without requiring a manual page refresh.

​
Usage Example

1

Navigate to the Application

Open the main dashboard where messages are displayed.
2

Click the Reschedule Button

Find and click the button with the Calendar icon labeled “Reschede”.
3

Wait for Confirmation

The button will be disabled briefly while processing. A toast notification will appear confirming success or reporting an error.
4

Verify Updated Schedules

The message list will automatically refresh to show the updated schedules.

​
Best Practices

Use Sparingly

Rescheduling affects all messages. Use this feature carefully.

Check Before Rescheduling

Review the message list before performing a bulk reschedule.

Monitor Notifications

Always wait for the toast notification to confirm operation success.

Verify Results

Check individual messages after rescheduling to ensure expected behavior.

​
Troubleshooting

​
Reschedule Fails

If the reschedule operation fails:
  1. Check Backend Connectivity: Ensure BACKEND_URL is correct and the backend is running
  2. Verify Credentials: Confirm USERNAME and PASSWORD environment variables are set
  3. Check Browser Console: Look for network errors or detailed error messages
  4. Review Backend Logs: Check the backend API logs for error details

​
No Feedback After Clicking

If nothing happens after clicking the button:
  1. Check Network Tab: Open browser DevTools and inspect the network request
  2. Verify Button State: Ensure the button isn’t already disabled
  3. Check Console Errors: Look for JavaScript errors in the console
  4. Refresh the Page: Try refreshing and clicking again

Build docs developers (and LLMs) love

Get started for freeTalk to us