bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
commit 04a4e82df3
4 changed files with 17 additions and 16 deletions
Show stats 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'; import FeedCarousel from '../feed-carousel';
jest.mock('../../../hooks/useDimensions', () => ({ jest.mock('../../../hooks/useDimensions', () => ({
useDimensions: () => [null, { width: 200 }], useDimensions: () => [{ scrollWidth: 190 }, null, { width: 100 }],
})); }));
(window as any).ResizeObserver = class ResizeObserver { (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 <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>

10
app/soapbox/hooks/__tests__/useDimensions.test.ts
View file

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

8
app/soapbox/hooks/useDimensions.ts
View file

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