Телеграмм чат группы react

Ребята, всем привет.
Подскажите пожалуйста.
Я уже реализовал таблицу и сортировку Event( ячейки с именем пользователей) по дате. Теперь нужно реализовать, чтобы event сортировались по местам(A-1, A2 ...) Как это можно сделать, подскажите пожалуйста.
Ссылка: https://codesandbox.io/s/mutable-mountain-cv574

CodeSandbox

gracious-surf-uldip - CodeSandbox

gracious-surf-uldip by dimafrombatumi using lodash, moment, react, react-dom, react-scripts

источник

21:03пожаловаться #14

๖

๖ۣYakub๖ۣۜ in React — русскоговорящее сообщество

😂😂😂

источник

21:05пожаловаться #15

export default - зло... in React — русскоговорящее сообщество

Так

источник

21:21пожаловаться #16

export default - зло... in React — русскоговорящее сообщество

Прекращаем

источник

21:21пожаловаться #17

Daniyar in React — русскоговорящее сообщество

Всем привет.

Сделал компонент с горизонтальным скроллом. Не могу правильно навесить классы с тенями.
На данный момент устанавливаю классы так:

        if (el.scrollLeftMax <= el.scrollLeft) {
          setScrollingPosition('end');
          console.log('end');
        }
        if (el.scrollLeft <= 10) {
          setScrollingPosition('start');
          // console.log('start');
        }
        if (scrollingPosition !== 'center') {
          setScrollingPosition('center');
        }

Проблема в том что, когда я нахожусь либо в самом конце либо в самом начале, классы переключаются с center на end и наоборот / с center на start и соответственно наоборот. Происходит это из-за последнего if, но если его убрать, то тень всегда будет с одной стороны: либо в начале либо в конце.

Полный код:

const Scrollable = ({ children, _class }) => {
  const [scrollingPosition, setScrollingPosition] = useState('end');
  const ref = useRef();
  const classes = cn('search__wrapper', {
    'search__wrapper--shadow-start': scrollingPosition !== 'start',
    'search__wrapper--shadow-end': scrollingPosition !== 'end',
  })

  useEffect(() => {
    const el = ref.current;
    if (el) {
      const handleWheel = (e) => {
        e.preventDefault();
        el.scrollTo({
          left: el.scrollLeft + e.deltaY * 3,
          behavior: 'smooth',
        });

        if (el.scrollLeftMax <= el.scrollLeft) {
          setScrollingPosition('end');
        }

        if (el.scrollLeft <= 10) {
          setScrollingPosition('start');
        }

        if (scrollingPosition !== 'center') {
          setScrollingPosition('center');
        }
      };

      el.addEventListener('wheel', handleWheel);

      return () => el.removeEventListener('wheel', handleWheel);
    }
  })

  return (
    <div className={classes}>
      <ul className={_class} ref={ref}>
        {children}
      </ul>
    </div>
  );
};

источник

21:22пожаловаться #18

Maxim Koylo in React — русскоговорящее сообщество

все пацаны)

источник

21:27пожаловаться #19

Soltukiev Malik in React — русскоговорящее сообщество

ты не видел просто мои шедевры

источник

21:30пожаловаться #20