matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'carousel-cutoff' into 'develop'

Browse Source 
Carousel cutoff

See merge request soapbox-pub/soapbox-fe!1649
This commit is contained in:
Justin
2022-07-19 13:12:13 +00:00
parent 87e39f52e6 0de3da4302
commit 04a4e82df3
4 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx
View File

@@ -7,7 +7,7 @@ import { render, screen, waitFor } from '../../../jest/test-helpers';
import FeedCarousel from '../feed-carousel';
jest.mock('../../../hooks/useDimensions', () => ({
useDimensions: () => [null, { width: 200 }],
useDimensions: () => [{ scrollWidth: 190 }, null, { width: 100 }],
}));
(window as any).ResizeObserver = class ResizeObserver {

13
app/soapbox/features/feed-filtering/feed-carousel.tsx
View File

@@ -44,7 +44,7 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
<img
src={avatar.account_avatar}
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-primary-600': isSelected,
})}
@@ -62,7 +62,7 @@ const FeedCarousel = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const [cardRef, { width }] = useDimensions();
const [cardRef, setCardRef, { width }] = useDimensions();
const [pageSize, setPageSize] = useState<number>(0);
const [currentPage, setCurrentPage] = useState<number>(1);
@@ -70,7 +70,8 @@ const FeedCarousel = () => {
const avatars = useAppSelector((state) => state.carousels.avatars);
const isLoading = useAppSelector((state) => state.carousels.isLoading);
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 hasPrevPage = currentPage > 1 && numberOfPages > 1;
@@ -80,9 +81,9 @@ const FeedCarousel = () => {
useEffect(() => {
if (width) {
setPageSize(Math.round(width / (80 + 15)));
setPageSize(Math.round(width / widthPerAvatar));
}
}, [width]);
}, [width, widthPerAvatar]);
useEffect(() => {
if (features.feedUserFiltering) {
@@ -109,7 +110,7 @@ const FeedCarousel = () => {
}
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>
{hasPrevPage && (
<div>