Skip to main content

​
Overview

The Rescheduler component is a client-side button that triggers a server action to reschedule all messages. It provides user feedback via toast notifications and handles loading states.

​
Component Signature

export default function Rescheduler(): JSX.Element
This is a Client Component (“use client”) that uses React hooks and Next.js server actions.

​
Server Action Integration

The component uses the reschedule server action with the useActionState hook: 
import reschedule from "@/lib/actions/reschedule/reschedule";

const [rescheduleState, rescheduleAction, rescheduleIsPending] = useActionState(
  reschedule,
  { success: false }
);

​
useActionState Return Values

​
rescheduleState
RescheduleState
State object containing success/error status
​
success
boolean
required
Whether the rescheduling succeeded
​
error
string
Error message if rescheduling failed
​
rescheduleAction
() => void
Function to trigger the reschedule server action
​
rescheduleIsPending
boolean
Loading state indicator

​
Server Action: reschedule

The underlying server action that performs the API call: 
"use server"

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" 
    };
  }
}
The action uses revalidatePath("/") to refresh the page data after successful rescheduling.

​
Toast Notifications

The component uses Sonner toast notifications to provide feedback: 
import { toast } from "sonner";

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]);

​
Toast Types

​
success
toast
Displayed when messages are successfully rescheduled
  • Message: “Messages rescheduled successfully”
  • Uses rich colors
​
error
toast
Displayed when rescheduling fails
  • Message: “Messages rescheduling failed”
  • Duration: 3500ms
  • Uses rich colors

​
UI Structure

<form action={rescheduleAction}>
  <Button 
    disabled={rescheduleIsPending} 
    variant="default" 
    type="submit" 
    className="font-bold p-1 px-2"
  >
    <Calendar /> Reschede
  </Button>
</form>
Note: There’s a typo in the button text (“Reschede” instead of “Reschedule”)

​
Props

This component accepts no props. 
export default function Rescheduler()

​
Usage Example

​
In a Layout or Header

app/layout.tsx
import Rescheduler from "@/components/Rescheduler";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <Rescheduler />
          </nav>
        </header>
        {children}
      </body>
    </html>
  );
}

​
With Other Components

app/page.tsx
import Rescheduler from "@/components/Rescheduler";
import Messages from "@/components/Messages";

export default function HomePage() {
  return (
    <div>
      <div className="flex justify-end mb-4">
        <Rescheduler />
      </div>
      <Messages />
    </div>
  );
}

​
Button States

​
disabled
boolean
Button is disabled when rescheduleIsPending is true
​
variant
string
default:"default"
Uses the default button variant
​
type
string
default:"submit"
Form submit button

​
Icons

Uses Lucide React Calendar icon: 
import { Calendar } from "lucide-react";

​
Environment Variables

Required in the server action:
​
BACKEND_URL
string
required
Backend API base URL for the reschedule endpoint
​
USERNAME
string
required
Basic authentication username
​
PASSWORD
string
required
Basic authentication password

​
API Endpoint

The component calls the following backend endpoint: 
GET /messages/reschedule
Authentication: Basic Auth Response:
  • Success: HTTP 200
  • Failure: Non-200 status code

​
Error Handling

The component handles errors at multiple levels:
  1. Network Errors: Caught in try-catch block of server action
  2. API Errors: Handled by checking response.ok
  3. User Feedback: Displayed via toast notifications
if (rescheduleState.error) {
  toast.error("Messages rescheduling failed", {
    duration: 3500,
    richColors: true,
  });
}

​
Source Locations

Component: 
~/workspace/source/src/components/Rescheduler.tsx
Server Action: 
~/workspace/source/src/lib/actions/reschedule/reschedule.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us