Skip to content

ResolvedComplaints Component

The ResolvedComplaints component is a React-based interface for displaying and managing complaints with a "Resolved" status within an educational institution's complaint management system. It is designed for administrative users to review complaints that have been successfully addressed and completed.

Component Structure

The component is built using React with hooks for state management and React Query for data fetching. It implements a paginated and searchable list of resolved complaints with integration to the ComplaintList component for displaying the actual complaint items.

import React, { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import ComplaintList from "../common/ComplaintList";

The component relies on: - React and its hooks for component structure and state management - React Query for data fetching and state synchronization - ComplaintList component for rendering the complaint items in a consistent format

State Management

const [searchQuery, setSearchQuery] = useState("");
const [selectedComplaint, setSelectedComplaint] = useState(null);

// Pagination state
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [pagination, setPagination] = useState(null);

The component maintains several state variables: - searchQuery: Controls the search functionality - selectedComplaint: Tracks the currently selected complaint for detailed view - page and limit: Control the pagination of complaints - pagination: Stores pagination metadata from the API response

Data Fetching

The component uses React Query to fetch resolved complaints:

const {
  data: responseData,
  isLoading,
  refetch
} = useQuery({
  queryKey: ["resolvedComplaints", page, limit],
  queryFn: async () => {
    const response = await fetch("http://localhost:8000/api/complaints/admin/status", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
      },
      body: JSON.stringify({ 
        status: "Resolved",
        page, 
        limit 
      }),
      credentials: "include",
    });

    const result = await response.json();
    if (!response.ok) {
      throw new Error(result.message || "Failed to fetch resolved complaints");
    }
    return result;
  },
});

This setup: - Fetches complaints with "Resolved" status from the API - Includes pagination parameters in the request - Uses the access token from localStorage for authentication - Updates the query when pagination parameters change - Provides loading state and refetch functionality

Derived State

The component derives two important pieces of state:

  1. Complaints array from the response data: 

    const complaints = responseData?.data || [];

  2. Filtered complaints based on search query: 

    const filteredComplaints = searchQuery.trim() 
  ? complaints.filter(complaint => {
      const query = searchQuery.toLowerCase().trim();
      const titleMatch = complaint.title?.toLowerCase().includes(query);
      const categoryMatch = complaint.category?.toLowerCase().includes(query);
      const subCategoryMatch = complaint.subCategory?.toLowerCase().includes(query);
      const assigneeMatch = complaint.assignedName?.toLowerCase().includes(query);

      return titleMatch || categoryMatch || subCategoryMatch || assigneeMatch;
    })
  : complaints;

This filtering logic: - Only applies when a search query is present - Searches across multiple fields (title, category, subcategory, assignee) - Uses case-insensitive matching - Returns all complaints when no search query is present

Side Effects

The component uses useEffect to update the pagination state when the response data changes:

useEffect(() => {
  if (responseData?.pagination) {
    setPagination(responseData.pagination);
  }
}, [responseData]);

This ensures that the pagination controls reflect the current state of the data.

Event Handlers

// Handle page change
const handlePageChange = (newPage) => {
  setPage(newPage);
};

// Handle page size change
const handleLimitChange = (newLimit) => {
  setLimit(newLimit);
  setPage(1); // Reset to first page when changing limit
};

These functions manage pagination: - handlePageChange: Updates the current page - handleLimitChange: Updates the number of items per page and resets to the first page

UI Structure

The component's UI is organized into two main sections:

  1. Complaint List: Renders the ComplaintList component with appropriate props
  2. Pagination Controls: Displays pagination information and navigation buttons

Complaint List Integration

 {
    refetch();  // Refetch the current tab data
    refetchAll(); // Also refetch all data to update counts in the tab bar
  }}
  role={role}
/>

The ComplaintList component receives: - The filtered complaints array - Loading state - Search query state and setter - Selected complaint state and setter - A refetch function that updates both the current tab and the parent component - The user role for permission-based rendering

Pagination Controls

The pagination controls are conditionally rendered when pagination data is available:

{pagination && (

    {/* Items per page selector */}

      Items per page:
       handleLimitChange(Number(e.target.value))}
      >
        5
        10
        25
        50


        Showing {((pagination.currentPage - 1) * pagination.pageSize) + 1} - {Math.min(pagination.currentPage * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}



    {/* Page navigation buttons */}

      {/* Navigation buttons */}


)}

The pagination controls include: - Items per page selector (5, 10, 25, 50) - Current range and total items display - Navigation buttons (first, previous, next, last) - Current page and total pages indicator - Responsive layout that stacks on small screens

Integration with ComplaintDetails

When a user selects a complaint from the list, the ComplaintList component renders the ComplaintDetails component, which provides:

  • Detailed view of the complaint information
  • Status visualization with appropriate colors and icons (green for Resolved status)
  • Image gallery for attached images
  • Contact information and resolution details

Differences from Other Status Views

Unlike the PendingComplaints and InProgressComplaints components, the ResolvedComplaints component:

  1. Displays complaints that have been successfully addressed
  2. Does not provide action buttons for assigning staff or marking as resolved
  3. Serves primarily as a historical record and reference for completed work
  4. May be used for quality assurance and performance monitoring

Usage

This component should be included in the administrative section of the complaint management system, specifically in the tab for viewing resolved complaints. It is designed to work within a tabbed interface where administrators can switch between different complaint statuses (Pending, In Progress, Resolved).

The component integrates with the broader complaint system by: 1. Fetching and displaying complaints with "Resolved" status 2. Providing search functionality across multiple fields 3. Implementing pagination for efficient data handling 4. Allowing administrators to view detailed information about resolved complaints 5. Refreshing both its own data and parent component data when changes occur