InProgressComplaints Component

Overview

The InProgressComplaints component is a React-based interface for displaying and managing complaints that are currently in the "In Progress" status within an educational institution's complaint management system. It is designed for administrative users to monitor and manage complaints that have been assigned but not yet resolved.

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 in-progress complaints with integration to the ComplaintList component for displaying the actual complaint items.

Dependencies

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

• 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

Props

/**
 * @param {Object} props Component props
 * @param {boolean} props.isLoading - Initial loading state
 * @param {function} props.refetch - Function to refetch all complaint data
 * @param {string} props.role - User role
 */

The component accepts several props to control its behavior: - isLoading: Initial loading state passed from the parent component - refetch: Function to refetch all complaint data (used to update counts in the tab bar) - role: User role for permission-based rendering in child components

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 in-progress complaints:

const {
  data: responseData,
  isLoading,
  refetch
} = useQuery({
  queryKey: ["inProgressComplaints", 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: "In Progress",
        page, 
        limit 
      }),
      credentials: "include",
    });

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

This setup: - Fetches complaints with "In Progress" 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 */}

      {/* First page and previous page buttons */}
       handlePageChange(1)}
      >
        «

       handlePageChange(pagination.currentPage - 1)}
      >
        <


      {/* Current page indicator */}

        Page {pagination.currentPage} of {pagination.totalPages}


      {/* Next page and last page buttons */}
       handlePageChange(pagination.currentPage + 1)}
      >
        >

       handlePageChange(pagination.totalPages)}
      >
        »



)}

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

Usage

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