fair-rose•2y ago

Filtering with useList and state operation

Hi guys, I currently have a List with useList to get data from a table with supabase Now I have a button and a state value to change the filter when click the button. Here is a useList code

  
const { data, isLoading } = useList<IPlan, HttpError>({
    resource: "plans",
    filters: [
      {
        field: "status",
        operator: "eq",
        value: statusFilter,
      },
    ],
  });

  
const { data, isLoading } = useList<IPlan, HttpError>({
    resource: "plans",
    filters: [
      {
        field: "status",
        operator: "eq",
        value: statusFilter,
      },
    ],
  });

I want when first load, the List will show all the data from DB table (ignore the filter, the filter will trigger when statusFilter change), how can I do that?

11 Replies

kapa.ai•2y ago

Hi @Tan Dep Trai So 1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve this, you can use the useState hook to manage your statusFilter state. Initially, you can set the statusFilter to null or undefined so that it doesn't affect the data fetched by useList. When you want to apply the filter, you can update the statusFilter state. The useList hook will automatically trigger a new request when the filters property changes dynamically. Here is a basic example based on the code you provided and the information from the useList documentation (https://refine.dev/docs/data/hooks/use-list#filtering):

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  

const YourComponent: React.FC = () => {  
  const [statusFilter, setStatusFilter] = useState(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: statusFilter ? [  
      {  
        field: "status",  
        operator: "eq",  
        value: statusFilter,  
      },  
    ] : [],  
  });

  // Rest of your component
};

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  

const YourComponent: React.FC = () => {  
  const [statusFilter, setStatusFilter] = useState(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: statusFilter ? [  
      {  
        field: "status",  
        operator: "eq",  
        value: statusFilter,  
      },  
    ] : [],  
  });

  // Rest of your component
};

In this example, when statusFilter is null, the filters array will be empty and useList will fetch all data. When statusFilter has a value, the filter will be applied. Remember to call setStatusFilter with the desired status value when you want to apply the filter. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•2y ago

@kapa.ai Now I have a <RangePicker> is a range date picker from antd, I have 2 value is fromDate and toDate. I have a field in DB name dueDate. How can I filter the dueDate is between fromDate and toDate?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To filter the dueDate that falls between fromDate and toDate, you can use the useList hook with the gte (greater than or equal) and lte (less than or equal) operators. Here is an example based on the code you provided and the information from the useList documentation (https://refine.dev/docs/data/hooks/use-list#filtering):

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
import { DatePicker } from "@refinedev/antd";

const { RangePicker } = DatePicker;

const YourComponent: React.FC = () => {  
  const [dateRange, setDateRange] = useState(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: dateRange ? [  
      {  
        field: "dueDate",  
        operator: "gte",  
        value: dateRange[0],  
      },
      {  
        field: "dueDate",  
        operator: "lte",  
        value: dateRange[1],  
      },  
    ] : [],  
  });

  const handleDateChange = (dates) => {
    setDateRange(dates);
  };

  return (
    <div>
      <RangePicker onChange={handleDateChange} />
      {/* Rest of your component */}
    </div>
  );
};

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
import { DatePicker } from "@refinedev/antd";

const { RangePicker } = DatePicker;

const YourComponent: React.FC = () => {  
  const [dateRange, setDateRange] = useState(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: dateRange ? [  
      {  
        field: "dueDate",  
        operator: "gte",  
        value: dateRange[0],  
      },
      {  
        field: "dueDate",  
        operator: "lte",  
        value: dateRange[1],  
      },  
    ] : [],  
  });

  const handleDateChange = (dates) => {
    setDateRange(dates);
  };

  return (
    <div>
      <RangePicker onChange={handleDateChange} />
      {/* Rest of your component */}
    </div>
  );
};

In this example, when dateRange is null, the filters array will be empty and useList will fetch all data. When dateRange has values, the filters will be applied. The RangePicker component from Ant Design returns an array of two date strings (or moment objects) representing the start and end of the range. We use these values to set the fromDate and toDate filters. Remember to call setDateRange with the desired date range when you want to apply the filter. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•2y ago

@kapa.ai can I combine both status filter and date filter?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can combine both the status filter and the date filter. You just need to add both filters to the filters array in the useList hook. Here's how you can do it:

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
import { DatePicker } from "@refinedev/antd";

const { RangePicker } = DatePicker;

const YourComponent: React.FC = () => {  
  const [statusFilter, setStatusFilter] = useState(null);
  const [dateRange, setDateRange] = useState(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: [
      ...(statusFilter ? [{
        field: "status",
        operator: "eq",
        value: statusFilter,
      }] : []),
      ...(dateRange ? [
        {
          field: "dueDate",
          operator: "gte",
          value: dateRange[0],
        },
        {
          field: "dueDate",
          operator: "lte",
          value: dateRange[1],
        },
      ] : []),
    ],
  });

  const handleDateChange = (dates) => {
    setDateRange(dates);
  };

  return (
    <div>
      <RangePicker onChange={handleDateChange} />
      {/* Rest of your component */}
    </div>
  );
};

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
import { DatePicker } from "@refinedev/antd";

const { RangePicker } = DatePicker;

const YourComponent: React.FC = () => {  
  const [statusFilter, setStatusFilter] = useState(null);
  const [dateRange, setDateRange] = useState(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: [
      ...(statusFilter ? [{
        field: "status",
        operator: "eq",
        value: statusFilter,
      }] : []),
      ...(dateRange ? [
        {
          field: "dueDate",
          operator: "gte",
          value: dateRange[0],
        },
        {
          field: "dueDate",
          operator: "lte",
          value: dateRange[1],
        },
      ] : []),
    ],
  });

  const handleDateChange = (dates) => {
    setDateRange(dates);
  };

  return (
    <div>
      <RangePicker onChange={handleDateChange} />
      {/* Rest of your component */}
    </div>
  );
};

In this example, both the status filter and the date range filter are applied if they have values. If statusFilter or dateRange is null, the corresponding filter will not be applied. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•2y ago

@kapa.ai can you change your code to typeScript?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's the TypeScript version of the code:

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
import { DatePicker } from "@refinedev/antd";

const { RangePicker } = DatePicker;

interface IPlan {
  // Define your plan interface here
}

const YourComponent: React.FC = () => {  
  const [statusFilter, setStatusFilter] = useState<string | null>(null);
  const [dateRange, setDateRange] = useState<[string, string] | null>(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: [
      ...(statusFilter ? [{
        field: "status",
        operator: "eq",
        value: statusFilter,
      }] : []),
      ...(dateRange ? [
        {
          field: "dueDate",
          operator: "gte",
          value: dateRange[0],
        },
        {
          field: "dueDate",
          operator: "lte",
          value: dateRange[1],
        },
      ] : []),
    ],
  });

  const handleDateChange = (dates: [string, string]) => {
    setDateRange(dates);
  };

  return (
    <div>
      <RangePicker onChange={handleDateChange} />
      {/* Rest of your component */}
    </div>
  );
};

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
import { DatePicker } from "@refinedev/antd";

const { RangePicker } = DatePicker;

interface IPlan {
  // Define your plan interface here
}

const YourComponent: React.FC = () => {  
  const [statusFilter, setStatusFilter] = useState<string | null>(null);
  const [dateRange, setDateRange] = useState<[string, string] | null>(null);

  const { data, isLoading } = useList<IPlan, HttpError>({  
    resource: "plans",  
    filters: [
      ...(statusFilter ? [{
        field: "status",
        operator: "eq",
        value: statusFilter,
      }] : []),
      ...(dateRange ? [
        {
          field: "dueDate",
          operator: "gte",
          value: dateRange[0],
        },
        {
          field: "dueDate",
          operator: "lte",
          value: dateRange[1],
        },
      ] : []),
    ],
  });

  const handleDateChange = (dates: [string, string]) => {
    setDateRange(dates);
  };

  return (
    <div>
      <RangePicker onChange={handleDateChange} />
      {/* Rest of your component */}
    </div>
  );
};

In this TypeScript version, I've added types to the useState hooks and the handleDateChange function. You'll need to replace IPlan with the actual interface of your plan data. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below

Filtering with useList and state operation

Did you find this page helpful?