Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

How to apply filter in react js

Step 1: design the ui of filter

const LogFilter = ({ handleFilterChange, applyFilter }) => {

  return (
    <div className="row">
 <div className="col-md-4">
          <div >
      <label className="labelbox" ><h6>Start Date:</h6></label>

      <input  className="datebox" type="date" name="startDate" onChange={handleFilterChange} />

      </div>
        </div>

        <div className="col-md-4">
          <div >
      <label className="labelbox"><h6>End Date:</h6></label>
      <input  className="datebox"type="date" name="endDate" onChange={handleFilterChange} />
      </div>
        </div>
        <div className="col-md-4">
          <div>
      <button onClick={applyFilter}><h6>Apply Filter</h6></button>
      </div>
        </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Add css

.datebox{
  padding: 12px;
    margin: 6px 0;
    border-radius: 9px;
}
.labelbox
{
  padding: 12px;
    margin: 6px 0;
    border-radius: 9px;
    height:60px;
}
Enter fullscreen mode Exit fullscreen mode

Image description

use state

 const [filters, setfilters] = useState(null)
Enter fullscreen mode Exit fullscreen mode

Step2: click button apply filter

  const applyFilter = () => {
    console.log("startDate coming")
    console.log(startDate)
    if (startDate === '' || endDate === '') 
    {
      console.log("startDateendDate coming")
    }
    else
    {
      getAllReviewreport({ startDate, endDate }).then((data) => {
        console.log("startDate coming")
        console.log(data)  
        setfilters(data.questions) 
      });       
    }
  }
Enter fullscreen mode Exit fullscreen mode

Step3
In appcontext

const getAllReviewreport = async (values) => {
    dispatch({ type: GET_ALL_REVIEWREPORT_BEGIN })
    try {
      if (!values) {
        const response = await authFetch.get("/reviewreport")
        console.log("all getAllReviewreport comimg")
        dispatch({
          type: GET_ALL_REVIEWREPORT_SUCCESS,    
          payload: {
            reviews: response.data.reviews,
            questions: response.data.questions,          
          },             
        })
        return response.data
      } else {        
        const { filters } = values
        console.log("all filters comimg")        
        console.log(values.endDate)
        const url = `/reviewreport?startDate=${values.startDate}&toDate=${values.endDate}`
        console.log(url)
        const response = await authFetch.get(url)   
        dispatch({
          type: GET_ALL_REVIEWREPORT_SUCCESS,    
          payload: {
            reviews: response.data.reviews,
            questions: response.data.questions,          
          },           
        })
        return response.data
      }      
    } catch (error) {
      //  console.log(error)
      toast.error("Error fetching worklogs")
    }
  }
Enter fullscreen mode Exit fullscreen mode

Image description

Step4

const displayQuestion = async (req, res) => {  
  const { startDate,toDate } = req.query
  console.log("start date")
  console.log(startDate)
  if (Object.keys(req.query).length !== 0) {
    console.log("start date aata")
    console.log(req.query)
    console.log(req.query.startDate)
    const startdate=req.query.startDate
    const startDateTime = moment(startdate).startOf('day').toDate();
    console.log(startDateTime)
    const endadte=req.query.toDate
const endDateTime = moment(endadte).endOf('day').toDate();
const questionsList = await QuestionModel.find({
  createdAt: {
    $gte: startDateTime,
    $lte: endDateTime,
  },
}).select("question questionid -_id");
const reviews = await FeedbackModel.find({})
  const length = await FeedbackModel.countDocuments()
  console.log(questionsList)
  res.status(200).json({ reviews, questions: questionsList })
  } 
  else {
  const reviews = await FeedbackModel.find({})
  const length = await FeedbackModel.countDocuments()
  const questionsList = await QuestionModel.find({}).select("question questionid -_id") 
  console.log("req displayQuestion coming")
  console.log(questionsList)
  console.log(reviews)
  res.status(200).json({ reviews, questions: questionsList })
}
}
Enter fullscreen mode Exit fullscreen mode

Image description

in Client side

return (   
    <Wrapper>
       <LogFilter handleFilterChange={handleFilterChange}
        applyFilter={applyFilter} />
      <div className="row">
        <div className="col-md-4">
          <div className="box">
            <h5>Question</h5>
            {filters
  ? filters?.map((item) => (
      <tr key={item.id}>
        <td onClick={() => getFeedback(item.questionid)} className={activeCell === item.questionid ? 'active' : 'cv'}>
          {item.question}
        </td>
      </tr>
    ))
  : questions?.map((item) => (
      <tr key={item.id}>
        <td onClick={() => getFeedback(item.questionid)} className={activeCell === item.questionid ? 'active' : 'cv'}>
          {item.question}
        </td>
      </tr>
    ))}
Enter fullscreen mode Exit fullscreen mode

Image description

=========================================================

How to get data filter datewise data

step1 showing two parts of component

Image description

Image description

step 2:filter component

Image description

step3: call the function while loading the page getallreviewdatewise

Image description

step 4 calling route in appcontext

 const getAllReviewdatewise = async (startDate, endDate) => {
    dispatch({ type: GET_ALL_REVIEWREPORT_BEGIN })
    try {
      console.log("getAllReviewreport")     
        console.log(startDate)
        console.log(endDate)     

        const url = `/reviewreport?startDate=${startDate}&toDate=${endDate}`;     
        console.log(url)
        const response = await authFetch.get(url)
        console.log("all response getAllReviewreport comimg")
        console.log(response)
        dispatch({
          type: GET_ALL_REVIEWREPORT_SUCCESS,
          payload: {          
            questions: response.data.questions,
          },
        })
        return response.data      
    } catch (error) {
      //  console.log(error)
      toast.error("Error fetching worklogs")
    }
  }
Enter fullscreen mode Exit fullscreen mode

step 5 router in server side

router
  .route("/")
  .post(addQuestion)
  .get(displayQuestion)  



router
  .route("/sub")
  .get(getMyReviewReport)
Enter fullscreen mode Exit fullscreen mode

step 6 controller in server side

const displayQuestion = async (req, res) => {  
      console.log("displayQuestion date")
      const { startDate,toDate } = req.query
      console.log("start date")
      console.log(startDate)
        console.log("start date aata")
        console.log(req.query)
        console.log(req.query.startDate)
        const startdate=req.query.startDate
        const startDateTime = moment(startdate).startOf('day').toDate();
        console.log(startDateTime)
        const endadte=req.query.toDate
        console.log(endadte)
    const endDateTime = moment(endadte).endOf('day').toDate();
    console.log(endDateTime)
    const questionsList = await FeedbackModel.find({
      createdAt: {
        $gte: startDateTime,
        $lte: endDateTime,
      },
    });

    console.log("data questionsList")
      console.log(questionsList)
      res.status(200).json({  questions: questionsList }) 
}
Enter fullscreen mode Exit fullscreen mode

After applying filter get data

Image description

step3 handleFilterChange and applyFilter inside review component

const LogFilter = ({ handleFilterChange, applyFilter }) => {
Enter fullscreen mode Exit fullscreen mode 
  const handleFilterChange = (event) => {
    console.log("startDates is  coming")
     const { name, value } = event.target;
     console.log(event.target.value)
    if (name === 'startDate') {
      setStartDate(value);
    } else if (name === 'endDate') {
      setEndDate(value);
    }
  };
Enter fullscreen mode Exit fullscreen mode 
  const applyFilter = () => {
    console.log("startDate are coming")
    console.log(startDate)
    if (startDate === '' || endDate === '') 
    {
      console.log("startDateendDate coming")
    }
    else
    {
      getAllReviewreport({ startDate, endDate }).then((data) {
        console.log("startDate coming")
        console.log(data)  
        setfilters(data.questions) 
      });       
    }
  }
Enter fullscreen mode Exit fullscreen mode

step 4 calling route in appcontext

  const getAllReviewreport = async (values) => {
    dispatch({ type: GET_ALL_REVIEWREPORT_BEGIN })
    try {      
        //console.log(values)
        const { filters } = values
        console.log("all filters comimg")
        console.log(values.startDate)
        console.log(values.endDate)
        const url = `/reviewreport?startDate=${values.startDate}&toDate=${values.endDate}`
        console.log(url)
        const response = await authFetch.get(url)
        console.log("all response comimg")
        dispatch({
          type: GET_ALL_REVIEWREPORT_SUCCESS,
          payload: {            
            questions: response.data.questions,
          },
        })
        return response.data      
    } catch (error) {
      //  console.log(error)
      toast.error("Error fetching worklogs")
    }
  }
Enter fullscreen mode Exit fullscreen mode

step 5 router in server side

router
  .route("/")
  .post(addQuestion)
  .get(displayQuestion)  



router
  .route("/sub")
  .get(getMyReviewReport)
Enter fullscreen mode Exit fullscreen mode

step 6 controller in server side

const displayQuestion = async (req, res) => {  
      console.log("displayQuestion date")
      const { startDate,toDate } = req.query
      console.log("start date")
      console.log(startDate)
        console.log("start date aata")
        console.log(req.query)
        console.log(req.query.startDate)
        const startdate=req.query.startDate
        const startDateTime = moment(startdate).startOf('day').toDate();
        console.log(startDateTime)
        const endadte=req.query.toDate
        console.log(endadte)
    const endDateTime = moment(endadte).endOf('day').toDate();
    console.log(endDateTime)
    const questionsList = await FeedbackModel.find({
      createdAt: {
        $gte: startDateTime,
        $lte: endDateTime,
      },
    });
    console.log("data questionsList")
      console.log(questionsList)
      res.status(200).json({  questions: questionsList }) 
}
Enter fullscreen mode Exit fullscreen mode

===========================================================

Apply filter Using Frontend

step 1: design search text field

  <FormRow
              type="text"
              name="searchquery"
              value={filterValue}
              handleChange={(e) => setFilterValue(e.target.value)}
              placeholder="Search by task name and key id"
            />
          </div>
Enter fullscreen mode Exit fullscreen mode

step2 use setter methods

const [filterValue, setFilterValue] = useState('');
Enter fullscreen mode Exit fullscreen mode

step 3: all data after apply filter

     {mappedTasks
                        .filter(item => filterTasks(item, selectedProject.title, filterValue))
                        .map((item, index) => {
                              if (item.status === category) {
                                return (
                                  <Draggable
                                    key={item._id}
                                    draggableId={item._id}
                                    index={index}
                                  >
                                    {(provided, snapshot) => {
                                      return (
                                        <div
                                          ref={provided.innerRef}
                                          {...provided.dragga
Enter fullscreen mode Exit fullscreen mode

step4:
apply filter function

 const filterTasks = (item, selectedProjectTitle, filterValue) => {
    const normalizedFilterValue = filterValue.toLowerCase();
    const projectInitials = getInitials(selectedProjectTitle).toLowerCase();

    // Check if the item's title, the combination of selectedProject.title and item.key,
    // or the project initials contains the filter value
    return (
      item.title.toLowerCase().includes(normalizedFilterValue) ||
      `${selectedProjectTitle}-${item.key}`.toLowerCase().includes(normalizedFilterValue) ||
      projectInitials.includes(normalizedFilterValue)
    );
  };
Enter fullscreen mode Exit fullscreen mode

output

Image description

Top comments (0)