Breaking News: Grepper is joining You.com. Read the official announcement!

GET PROPERTIES WITH PAGINATION AND SORTING

Doyin Atobaru answered on December 31, 2024 Popularity 1/10 Helpfulness 1/10

answer GET PROPERTIES WITH PAGINATION AND SORTING

related Flask is trying to import ContextVar from werkzeug.local, but this import is also failing.

GET PROPERTIES WITH PAGINATION AND SORTING

Comment

export type SortOption = {
  field: 'price' | 'createdAt';
  direction: 'asc' | 'desc';
};

const ListingPage = () => {
  const [properties, setProperties] = useState<PropertiesState>({
    data: [],
    metadata: { totalDataCount: 0 },
  });
  const [loading, setLoading] = useState<boolean>(false);

  const searchParams = useSearchParams();

  const sort = searchParams.get('sort') || 'createdAt-desc';
  const [sortField, sortDirection] = sort.split('-') as [
    SortOption['field'],
    SortOption['direction']
  ];

  const currentPage = Number(searchParams.get('page')) || 1;


  const sort = searchParams.get('sort') || 'createdAt-desc';
  const paginationInfo = usePagination({
    totalItems: totalListings,
    itemsPerPage,
    currentPage,
  });

  const pageNumbers = usePageNumbers(paginationInfo);

  const createQueryString = useCallback(
    (params: Record<string, string>) => {
      const newSearchParams = new URLSearchParams(searchParams.toString());
      Object.entries(params).forEach(([key, value]) => {
        newSearchParams.set(key, value);
      });
      return newSearchParams.toString();
    },
    [searchParams]
  );

const handlePageChange = useCallback(
    async (page: number) => {
      router.push(`?${createQueryString({ page: page.toString() })}`);
      await scrollToListings();
    },
    [router, createQueryString, scrollToListings]
  );

  const handleSortChange = useCallback(
    (option: SortOption) => {
      const sortString = `${option.field}-${option.direction}`;
      router.push(`?${createQueryString({ sort: sortString, page: '1' })}`);
    },
    [router, createQueryString]
  );

  useEffect(() => {
    const fetchProperties = async () => {
      setLoading(true);
      try {
        const fetchedListings = await fetchAllListings(currentPage, 12, sortField, sortDirection);
        console.log('fetchedListings', fetchedListings);
        setProperties({ data: fetchedListings.data, metadata: fetchedListings.metadata });
      } catch (error) {
        console.error('Error fetching properties:', error);
        toast({
          variant: 'destructive',
          title: 'Error fetching properties',
          description: 'An error occurred while posting new property',
        });
      } finally {
        setLoading(false);
      }
    };

    fetchProperties();
  }, [currentPage]);

  // Sort properties based on URL params
  const sortedProperties = [...properties.data].sort((a, b) => {
    const multiplier = sortDirection === 'asc' ? 1 : -1;
    return multiplier * (a[sortField] > b[sortField] ? 1 : -1);
  });
  const totalListings = properties.metadata.totalDataCount;

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: get pagination properties sorting whatever

Link to this answer
Share Copy Link

Contributed on Jan 02 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

Flask is trying to import ContextVar from werkzeug.local, but this import is also failing.

Comment

pip install flask==2.0.0 werkzeug==2.0.0

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: this whatever flask import

Link to this answer
Share Copy Link

Contributed on Dec 31 2024

Lazy Lark

0 Answers Avg Quality 2/10

GET PROPERTIES WITH PAGINATION AND SORTING

Contents

More Related Answers

GET PROPERTIES WITH PAGINATION AND SORTING

Closely Related Answers

Flask is trying to import ContextVar from werkzeug.local, but this import is also failing.

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.