Skip to main content

Admin Dashboard State Management

How state is managed in the admin dashboard.

State Management Approach​

The admin dashboard uses React useState for local component state. Each page manages its own state independently.

Common State Patterns​

Loading State​

const [loading, setLoading] = useState(true);

useEffect(() => {
  fetchData().finally(() => setLoading(false));
}, []);

Data State​

const [items, setItems] = useState<Item[]>([]);

const fetchData = async () => {
  const response = await api.get(API_ENDPOINTS.ITEMS);
  setItems(response.data.items);
};

Form State​

const [formData, setFormData] = useState({
  name: '',
  email: '',
  // ...
});

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setFormData({ ...formData, [e.target.name]: e.target.value });
};

Operation Loading States​

For update operations, separate loading states:

const [submitting, setSubmitting] = useState(false);

const handleSubmit = async () => {
  setSubmitting(true);
  try {
    await api.put(endpoint, data);
    // success handling
  } catch (error) {
    // error handling
  } finally {
    setSubmitting(false);
  }
};

Auth Context​

Location: src/context/AuthContext.tsx

Provides authentication state across the app:

  • User authentication status
  • Login/logout functions
  • User information

Data Refresh Pattern​

After successful operations, data is refreshed:

const handleUpdate = async () => {
  await api.put(endpoint, data);
  await fetchData(); // Refresh data
};

Best Practices​

  1. Initialize state properly - Set default values
  2. Handle loading states - Show loaders during operations
  3. Refresh after updates - Fetch latest data after mutations
  4. Clean up - Cancel timers/subscriptions in useEffect cleanup
  5. Optimistic updates - Consider updating UI optimistically for better UX