Merge branch 'carousel-cutoff' into 'develop'

Carousel cutoff

See merge request soapbox-pub/soapbox-fe!1649

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

@@ -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 {

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -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>

app/soapbox/hooks/__tests__/useDimensions.test.ts

@@ -21,10 +21,10 @@ describe('useDimensions()', () => {
 
     act(() => {
       const div = document.createElement('div');
-      (result.current[0] as any)(div);
+      (result.current[1] as any)(div);
     });
 
-    expect(result.current[1]).toMatchObject({
+    expect(result.current[2]).toMatchObject({
       width: 0,
       height: 0,
     });
@@ -35,7 +35,7 @@ describe('useDimensions()', () => {
 
     act(() => {
       const div = document.createElement('div');
-      (result.current[0] as any)(div);
+      (result.current[1] as any)(div);
     });
 
     act(() => {
@@ -49,7 +49,7 @@ describe('useDimensions()', () => {
       ]);
     });
 
-    expect(result.current[1]).toMatchObject({
+    expect(result.current[2]).toMatchObject({
       width: 200,
       height: 200,
     });
@@ -70,7 +70,7 @@ describe('useDimensions()', () => {
 
     act(() => {
       const div = document.createElement('div');
-      (result.current[0] as any)(div);
+      (result.current[1] as any)(div);
     });
 
     expect(disconnect).toHaveBeenCalledTimes(0);

app/soapbox/hooks/useDimensions.ts

@@ -1,7 +1,7 @@
-import { Ref, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 type UseDimensionsRect = { width: number, height: number };
-type UseDimensionsResult = [Ref<HTMLDivElement>, any]
+type UseDimensionsResult = [Element | null, any, any]
 
 const defaultState: UseDimensionsRect = {
   width: 0,
@@ -9,7 +9,7 @@ const defaultState: UseDimensionsRect = {
 };
 
 const useDimensions = (): UseDimensionsResult => {
-  const [element, ref] = useState<Element | null>(null);
+  const [element, setRef] = useState<Element | null>(null);
   const [rect, setRect] = useState<UseDimensionsRect>(defaultState);
 
   const observer = useMemo(
@@ -32,7 +32,7 @@ const useDimensions = (): UseDimensionsResult => {
     };
   }, [element]);
 
-  return [ref, rect];
+  return [element, setRef, rect];
 };
 
 export { useDimensions };