How to send filter & sort parameters from react.js to SpringBoot

Question

I'm using React.js for frontend and Spring Boot for backend. I'm trying to implement sorting and filtering but I'm not sure if this is the best approach. My first uncertainty is how to construct an URL for REST API call which includes sort and filter options. And then if I'm handling it well on backend (but I haven't gone deep into that yet because I'm trying to figure out the pare I mentioned above).

I'm sharing my code

import axios from "axios";
import React, { useEffect, useState } from "react";
import Sidebar from "./Sidebar";
import { CiFilter } from "react-icons/ci";
import { IoIosArrowDropdown } from "react-icons/io";

const Requests = () => {
  const [requests, setRequests] = useState([]);
  const [url, setUrl] = useState(`http://localhost:8080/requests`);
  const [requestDetails, setRequestDetails] = useState(null);
  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false); 
  const [isStatusDropdownOpen, setIsStatusDropdownOpen] = useState(false);
  const [isTimeRangeDropdownOpen, setIsTimeRangeDropdownOpen] = useState(false);

  /* varijable za razlicite filtere */
/*   const [sort, setSort] = useState("");
  const [order, setOrder] = useState(""); */
  const [status, setStatus] = useState("");
  const [sortField, setSortField] = useState("");
  const [sortDirection, setSortDirection] = useState("asc");

  const timeRangeList = [
    "Today",
    "Last 7 days",
    "Last month",
    "Last year",
    "All",
  ];

  const getRquests = async () => {
    const fetchedRequests = await axios.get(url + `?status=${status}&sortField=${sortField}&sortDirection=${sortDirection}`);
    setRequests(fetchedRequests.data);
  };
 
  useEffect(() => {
    getRquests();
  }, [url, status, sortDirection, sortField]);

  const toggleRequestModal = () => {
    setIsRequestModalOpen(!isRequestModalOpen);
  };

  const showRequestDetails = (request) => {
    toggleRequestModal();
    setRequestDetails(request);
  };
  
  const onClickApprove = async () => {
    try {
      const updatedRequest = { ...requestDetails, status: "APPROVED" };
      await axios.put(`${url}/${requestDetails.id}`, updatedRequest);
      setRequests(prevRequests =>
        prevRequests.map(req =>
          req.id === requestDetails.id ? { ...req, status: "APPROVED" } : req
        )
      );
      toggleRequestModal();
    } catch (error) {
        console.error("Error approving request:", error);
    }
  };

  const onClickDecline = async () => {
    try {
      const updatedRequest = { ...requestDetails, status: "DECLINED" };
      await axios.put(`${url}/${requestDetails.id}`, updatedRequest);
      setRequests(prevRequests =>
        prevRequests.map(req =>
          req.id === requestDetails.id ? { ...req, status: "DECLINED" } : req
        )
      );
      toggleRequestModal();
    } catch (error) {
        console.error("Error declining request:", error);
    }
  };

  // nac jednostavnije rjesenje ?
  const filterByTime = () => {
    setSortField("timeCreated");
    {sortDirection === "DESC" ? setSortDirection("ASC") : setSortDirection("DESC")};
  }; 

  const showStatusDropdown = () => {
    setIsStatusDropdownOpen(!isStatusDropdownOpen);
  };

  const handleSetStatus = (s) => {
    setStatus(s);
    showStatusDropdown();
  };

  const showTimeRangeDropdown = () => {
    setIsTimeRangeDropdownOpen(!isTimeRangeDropdownOpen);
  };

/*   const handleSetTimeRange = () => {
    setTimeRange();
  }
 */
  return(
    <>
      
      

        

          

          

          {isTimeRangeDropdownOpen && (
            
              {timeRangeList.map((tr) => {
                return(
                  
                     setTimeRange(tr)} className="px-3 py-1 hover:bg-[#002a39] cursor-pointer" >
                      {tr}
                    
                  
                );
              })}
            
          )}

          {isStatusDropdownOpen && (
            
              
                 handleSetStatus('PENDING')} >
                  PENDING
                
                 handleSetStatus('APPROVED')}>
                  APPROVED
                
                 handleSetStatus('DECLINED')}>
                  DECLINED
                
                 handleSetStatus('')}>
                  ALL
                
              
            
          )}
        


        
            {requests.map((request) => {
              return(
                
              );
            })}
          
          
            
              
                Requested by
              
              
                
              
              
                Status 
              
            
          
          
                  
                    {request.requester.email}
                  
                  
                    {request.timeCreated.slice(0, 10)} {request.timeCreated.slice(11, 19)}
                  
                  
                    {request.status}
                  
                  
                    
                  
                  
                    
                  
                
        

        
          {isRequestModalOpen && requestDetails && (
            
              
                
                  
                    Request details
                  
                  
                
                
                  
                    {requestDetails.message}
                  
                
                
                
              
            
          )}
        

      


{/*       

        
            {requests.map((req, index) => {
             
              return(
                
              );
              
            })}
          
          
            
              
                Requested By
              

              
                Request Time              
              

              
                Status
              
            
          
          
                  
                    {req.requester.email}
                  

                  
                    {req.timeCreated.slice(0, 10)} {req.timeCreated.slice(11, 19)}
                  

                  
                    {req.status}
                  
                  
                  
                    
                  

                  
                    
                  
                
        

          
          {isRequestModalOpen && requestDetails && (
            
              
                
                  
                    Request details
                  
                  
                
                
                  message
                
                
                  
                    {requestDetails.message}
                  
                
                
                
              
            
          )}
          
       */}
    
  );
}
export default Requests;

As you can see when user clicks on the filter icon the filterByTime function is called and there I'm changing state of variables which are included in url for (what I think it is a good way) to construct an url dynamically. As I write this I also remembered that I will have to implement sorting by multiple columns in that case is the url going to be really large is that a bad practice?

And this is the backend code:
Controller

@GetMapping
public ResponseEntity> fetchAllRequests(
        @RequestParam(name = "status", defaultValue = "") String status,
        @RequestParam(name = "sortField", defaultValue = "id") String sortField,
        @RequestParam(name = "sortDirection", defaultValue = "ASC") String sortDirection
) {
    return new ResponseEntity<>(requestService.getAllRequests(status, sortField, sortDirection), HttpStatus.OK);
}

Service

public interface RequestService {
    Request createRequest(Request request);
    List getAllRequests(String status, String sortField, String sortDirection);
    UserRequestDto getRequestById(Long id);
    List userGetAllRequestsByUserId(Long id);
    List adminGetAllRequestsByUserId(Long id);
    Request updateRequest(Long id, Request request);
}

ServiceImpl

public List getAllRequests(String status, String sortField, String sortDirection) {
    // filtriram po status za opciju na FE-u kada korisnik odabere filter
    Status enumStatus;
    List requests = new ArrayList<>();

    if(!status.isEmpty()) {
        enumStatus = Status.valueOf(status);
        if(sortDirection.equals("ASC")){
            requests = requestRepository.findByStatusOrderByTimeCreatedAsc(enumStatus);
        } else {
            requests = requestRepository.findByStatusOrderByTimeCreatedDesc(enumStatus);
        }

        List requestsDto = requests.stream()
                .map(request -> modelMapper.map(request, AdminRequestDto.class))
                .toList();
        return requestsDto;

    } else {
        if(sortDirection.equals("ASC")) {

            requests = requestRepository.findAll(Sort.by(sortField).ascending());
        } else {
            requests = requestRepository.findAll(Sort.by(sortField).descending());
        }

        List requestsDto = requests.stream()
                .map(request -> modelMapper.map(request, AdminRequestDto.class))
                .toList();

        return requestsDto;
    }
}

How to send filter & sort parameters from react.js to SpringBoot

Answers (0)

Related Questions

How to send filter &amp; sort parameters from react.js to SpringBoot

Answers (0)

Related Questions

How to send filter & sort parameters from react.js to SpringBoot