src/features/ControlPanel/EntitiesManagementPanel.tsx - master - kirgol/fronend-assignment

src/features/ControlPanel/EntitiesManagementPanel.tsx
141 строка4 KB
Kirill
Fix ts error for build
12 сен 2024, 21:02
12 сен 2024, 21:0256372ad
import React, { useState } from 'react';
import { FiFilter } from 'react-icons/fi';
import { FaSort } from 'react-icons/fa';
import { useSearchParamsManager } from '../../shared/hooks/useSearchParamsManager';
import { Button, HStack, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
import { ChevronDownIcon } from '@chakra-ui/icons';
import { SearchForm } from '../Search/Search';
import { ITEMS_PER_PAGE_OPTIONS } from './config';

interface PageSelectorProps {
  adverts: Advertisment[];
  onOpen: () => void;
}

export const EntitiesManagementPanel = ({ adverts, onOpen }: PageSelectorProps) => {
  const { pageParams, limitParams, queryParams, setPage, setLimit, setSort, setOrder } =
    useSearchParamsManager({
      page: '1',
      limit: '10',
    });
  const [selectedFilter] = useState<string | null>(null);
  const page = parseInt(pageParams);
  const limit = parseInt(limitParams);

  const handleChange = (value: number) => {
    setLimit(value.toString());
  };

  const handlePrevious = () => {
    if (page > 1) {
      setPage((page - 1).toString());
    }
  };

  const handleNext = () => {
    setPage((page + 1).toString());
  };

  const handleFilterSelect = (filter: string) => {
    setSort(filter);
  };

  const handleOrserSelect = (order: string) => {
    setOrder(order);
  };

  return (
    <>
      <HStack spacing={['1em', '2em', '5em']}>
        <Button
          variant="solid"
          bgColor="#4ca7f8"
          color="white"
          _hover={{ bgColor: '#0099f7' }}
          onClick={handlePrevious}
          isDisabled={page === 1}
          fontSize={{ base: 'sm', lg: 'md' }}
          maxW={{ base: 'sm', lg: 'md' }}
        >
          Предыдущая
        </Button>
        <Button
          variant="solid"
          bgColor="#4ca7f8"
          color="white"
          _hover={{ bgColor: '#0099f7' }}
          onClick={handleNext}
          isDisabled={adverts.length < limit}
          fontSize={{ base: 'sm', lg: 'md' }}
          maxW={{ base: 'sm', lg: 'md' }}
        >
          Следующая
        </Button>
        <SearchForm />
        <Button
          variant="solid"
          bgColor="#4ca7f8"
          color="white"
          _hover={{ bgColor: '#0099f7' }}
          fontSize={{ base: 'sm', lg: 'md' }}
          maxW={{ base: 'sm', lg: 'md' }}
          onClick={onOpen}
        >
          Создать
        </Button>
      </HStack>
      <Menu>
        <MenuButton mt={5} as={Button} bgColor="#4ca7f8" rightIcon={<ChevronDownIcon />}>
          Items on page: {limit}
        </MenuButton>
        <MenuList>
          {ITEMS_PER_PAGE_OPTIONS.map((option) => (
            <MenuItem key={option} onClick={() => handleChange(option)}>
              {option}
            </MenuItem>
          ))}
        </MenuList>
        <Menu>
          <MenuButton as={Button} bgColor="#4ca7f8" rightIcon={<ChevronDownIcon />} mt={5} ml={5}>
            <FiFilter style={{ marginRight: '8px' }} />
          </MenuButton>
          <MenuList>
            {['price', 'views', 'likes'].map((filter) => (
              <MenuItem
                key={filter}
                onClick={() => handleFilterSelect(filter)}
                bg={filter === selectedFilter ? 'blue.100' : 'white'}
              >
                {filter === 'price' && 'Цена'}
                {filter === 'views' && 'Просмотры'}
                {filter === 'likes' && 'Лайки'}
              </MenuItem>
            ))}
          </MenuList>
        </Menu>
        <Menu>
          <MenuButton as={Button} bgColor="#4ca7f8" rightIcon={<ChevronDownIcon />} mt={5} ml={5}>
            <FaSort style={{ marginRight: '8px' }} />
          </MenuButton>
          <MenuList>
            {['desc', 'asc'].map((order) => (
              <MenuItem
                key={order}
                onClick={() => handleOrserSelect(order)}
                bg={order === selectedFilter ? 'blue.100' : 'white'}
              >
                {order === 'desc' && 'По убыванию'}
                {order === 'asc' && 'По возрастанию'}
              </MenuItem>
            ))}
          </MenuList>
        </Menu>
        {queryParams && (
          <Text mt={5} color={'gray.500'} noOfLines={2}>
            Найдено: {adverts.length}
          </Text>
        )}
      </Menu>
    </>
  );
};