|
|
@ -44,7 +44,7 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
|
|
|
|
<img
|
|
|
|
<img
|
|
|
|
src={avatar.account_avatar}
|
|
|
|
src={avatar.account_avatar}
|
|
|
|
className={classNames({
|
|
|
|
className={classNames({
|
|
|
|
' w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-slate-800': true,
|
|
|
|
'w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-slate-800': true,
|
|
|
|
'ring-transparent': !isSelected,
|
|
|
|
'ring-transparent': !isSelected,
|
|
|
|
'ring-primary-600': isSelected,
|
|
|
|
'ring-primary-600': isSelected,
|
|
|
|
})}
|
|
|
|
})}
|
|
|
@ -62,7 +62,7 @@ const FeedCarousel = () => {
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const features = useFeatures();
|
|
|
|
const features = useFeatures();
|
|
|
|
|
|
|
|
|
|
|
|
const [cardRef, { width }] = useDimensions();
|
|
|
|
const [cardRef, setCardRef, { width }] = useDimensions();
|
|
|
|
|
|
|
|
|
|
|
|
const [pageSize, setPageSize] = useState<number>(0);
|
|
|
|
const [pageSize, setPageSize] = useState<number>(0);
|
|
|
|
const [currentPage, setCurrentPage] = useState<number>(1);
|
|
|
|
const [currentPage, setCurrentPage] = useState<number>(1);
|
|
|
@ -70,7 +70,8 @@ const FeedCarousel = () => {
|
|
|
|
const avatars = useAppSelector((state) => state.carousels.avatars);
|
|
|
|
const avatars = useAppSelector((state) => state.carousels.avatars);
|
|
|
|
const isLoading = useAppSelector((state) => state.carousels.isLoading);
|
|
|
|
const isLoading = useAppSelector((state) => state.carousels.isLoading);
|
|
|
|
const hasError = useAppSelector((state) => state.carousels.error);
|
|
|
|
const hasError = useAppSelector((state) => state.carousels.error);
|
|
|
|
const numberOfPages = Math.floor(avatars.length / pageSize);
|
|
|
|
const numberOfPages = Math.ceil(avatars.length / pageSize);
|
|
|
|
|
|
|
|
const widthPerAvatar = (cardRef?.scrollWidth || 0) / avatars.length;
|
|
|
|
|
|
|
|
|
|
|
|
const hasNextPage = currentPage < numberOfPages && numberOfPages > 1;
|
|
|
|
const hasNextPage = currentPage < numberOfPages && numberOfPages > 1;
|
|
|
|
const hasPrevPage = currentPage > 1 && numberOfPages > 1;
|
|
|
|
const hasPrevPage = currentPage > 1 && numberOfPages > 1;
|
|
|
@ -80,9 +81,9 @@ const FeedCarousel = () => {
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (width) {
|
|
|
|
if (width) {
|
|
|
|
setPageSize(Math.round(width / (80 + 15)));
|
|
|
|
setPageSize(Math.round(width / widthPerAvatar));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [width]);
|
|
|
|
}, [width, widthPerAvatar]);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (features.feedUserFiltering) {
|
|
|
|
if (features.feedUserFiltering) {
|
|
|
@ -109,7 +110,7 @@ const FeedCarousel = () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Card variant='rounded' size='lg' ref={cardRef} className='relative' data-testid='feed-carousel'>
|
|
|
|
<Card variant='rounded' size='lg' ref={setCardRef} className='relative' data-testid='feed-carousel'>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
{hasPrevPage && (
|
|
|
|
{hasPrevPage && (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|