Revert "Merge branch 'carousel-v2' into 'develop'"

This reverts merge request !1978

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

@@ -61,15 +61,11 @@ describe('<FeedCarousel />', () => {
         __stub((mock) => {
           mock.onGet('/api/v1/truth/carousels/avatars')
             .reply(200, [
-              { account_id: '1', acct: 'a', account_avatar: 'https://example.com/some.jpg', seen: false },
-              { account_id: '2', acct: 'b', account_avatar: 'https://example.com/some.jpg', seen: false },
-              { account_id: '3', acct: 'c', account_avatar: 'https://example.com/some.jpg', seen: false },
-              { account_id: '4', acct: 'd', account_avatar: 'https://example.com/some.jpg', seen: false },
+              { account_id: '1', acct: 'a', account_avatar: 'https://example.com/some.jpg' },
+              { account_id: '2', acct: 'b', account_avatar: 'https://example.com/some.jpg' },
+              { account_id: '3', acct: 'c', account_avatar: 'https://example.com/some.jpg' },
+              { account_id: '4', acct: 'd', account_avatar: 'https://example.com/some.jpg' },
             ]);
-
-          mock.onGet('/api/v1/accounts/1/statuses').reply(200, [], {
-            link: '<https://example.com/api/v1/accounts/1/statuses?since_id=1>; rel=\'prev\'',
-          });
         });
       });
 
@@ -78,29 +74,6 @@ describe('<FeedCarousel />', () => {
 
         await waitFor(() => {
           expect(screen.queryAllByTestId('feed-carousel')).toHaveLength(1);
-          expect(screen.queryAllByTestId('carousel-item')).toHaveLength(4);
-        });
-      });
-
-      it('should handle the "seen" state', async() => {
-        render(<FeedCarousel />, undefined, store);
-
-        // Unseen
-        await waitFor(() => {
-          expect(screen.queryAllByTestId('carousel-item')).toHaveLength(4);
-        });
-        expect(screen.getAllByTestId('carousel-item-avatar')[0]).toHaveClass('ring-accent-500');
-
-        // Selected
-        await userEvent.click(screen.getAllByTestId('carousel-item-avatar')[0]);
-        await waitFor(() => {
-          expect(screen.getAllByTestId('carousel-item-avatar')[0]).toHaveClass('ring-primary-600');
-        });
-
-        // Marked as seen, not selected
-        await userEvent.click(screen.getAllByTestId('carousel-item-avatar')[0]);
-        await waitFor(() => {
-          expect(screen.getAllByTestId('carousel-item-avatar')[0]).toHaveClass('ring-transparent');
         });
       });
     });

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

@@ -4,17 +4,15 @@ import { FormattedMessage } from 'react-intl';
 
 import { replaceHomeTimeline } from 'soapbox/actions/timelines';
 import { useAppDispatch, useAppSelector, useDimensions } from 'soapbox/hooks';
-import { Avatar, useCarouselAvatars, useMarkAsSeen } from 'soapbox/queries/carousels';
+import useCarouselAvatars from 'soapbox/queries/carousels';
 
 import { Card, HStack, Icon, Stack, Text } from '../../components/ui';
 import PlaceholderAvatar from '../placeholder/components/placeholder-avatar';
 
-const CarouselItem = ({ avatar, seen, onViewed }: { avatar: Avatar, seen: boolean, onViewed: (account_id: string) => void }) => {
+const CarouselItem = ({ avatar }: { avatar: any }) => {
   const dispatch = useAppDispatch();
 
-  const markAsSeen = useMarkAsSeen();
-
-  const selectedAccountId = useAppSelector(state => state.timelines.getIn(['home', 'feedAccountId']) as string);
+  const selectedAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId);
   const isSelected = avatar.account_id === selectedAccountId;
 
   const [isFetching, setLoading] = useState<boolean>(false);
@@ -29,25 +27,17 @@ const CarouselItem = ({ avatar, seen, onViewed }: { avatar: Avatar, seen: boolea
     if (isSelected) {
       dispatch(replaceHomeTimeline(null, { maxId: null }, () => setLoading(false)));
     } else {
-      onViewed(avatar.account_id);
-      markAsSeen.mutate(avatar.account_id);
       dispatch(replaceHomeTimeline(avatar.account_id, { maxId: null }, () => setLoading(false)));
     }
   };
 
   return (
-    <div
-      aria-disabled={isFetching}
-      onClick={handleClick}
-      className='cursor-pointer'
-      role='filter-feed-by-user'
-      data-testid='carousel-item'
-    >
+    <div aria-disabled={isFetching} onClick={handleClick} className='cursor-pointer' role='filter-feed-by-user'>
       <Stack className='w-16 h-auto' space={3}>
         <div className='block mx-auto relative w-14 h-14 rounded-full'>
           {isSelected && (
             <div className='absolute inset-0 bg-primary-600 bg-opacity-50 rounded-full flex items-center justify-center'>
-              <Icon src={require('@tabler/icons/check.svg')} className='text-white h-6 w-6' />
+              <Icon src={require('@tabler/icons/x.svg')} className='text-white h-6 w-6' />
             </div>
           )}
 
@@ -55,12 +45,10 @@ const CarouselItem = ({ avatar, seen, onViewed }: { avatar: Avatar, seen: boolea
             src={avatar.account_avatar}
             className={classNames({
               'w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-primary-900': true,
-              'ring-transparent': !isSelected && seen,
+              'ring-transparent': !isSelected,
               'ring-primary-600': isSelected,
-              'ring-accent-500': !seen && !isSelected,
             })}
             alt={avatar.acct}
-            data-testid='carousel-item-avatar'
           />
         </div>
 
@@ -75,7 +63,6 @@ const FeedCarousel = () => {
 
   const [cardRef, setCardRef, { width }] = useDimensions();
 
-  const [seenAccountIds, setSeenAccountIds] = useState<string[]>([]);
   const [pageSize, setPageSize] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
@@ -88,20 +75,6 @@ const FeedCarousel = () => {
   const handleNextPage = () => setCurrentPage((prevPage) => prevPage + 1);
   const handlePrevPage = () => setCurrentPage((prevPage) => prevPage - 1);
 
-  const markAsSeen = (account_id: string) => {
-    setSeenAccountIds((prev) => [...prev, account_id]);
-  };
-
-  useEffect(() => {
-    if (avatars.length > 0) {
-      setSeenAccountIds(
-        avatars
-          .filter((avatar) => avatar.seen)
-          .map((avatar) => avatar.account_id),
-      );
-    }
-  }, [avatars]);
-
   useEffect(() => {
     if (width) {
       setPageSize(Math.round(width / widthPerAvatar));
@@ -157,8 +130,6 @@ const FeedCarousel = () => {
               <CarouselItem
                 key={avatar.account_id}
                 avatar={avatar}
-                seen={seenAccountIds?.includes(avatar.account_id)}
-                onViewed={markAsSeen}
               />
             ))
           )}

app/soapbox/queries/__tests__/carousels.test.ts

@@ -1,7 +1,7 @@
 import { __stub } from 'soapbox/api';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
 
-import { useCarouselAvatars } from '../carousels';
+import useCarouselAvatars from '../carousels';
 
 describe('useCarouselAvatars', () => {
   describe('with a successful query', () => {

app/soapbox/queries/__tests__/suggestions.test.ts

@@ -3,7 +3,7 @@ import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
 
 import { useOnboardingSuggestions } from '../suggestions';
 
-describe('useOnboardingSuggestions', () => {
+describe('useCarouselAvatars', () => {
   describe('with a successful query', () => {
     beforeEach(() => {
       __stub((mock) => {

app/soapbox/queries/carousels.ts

@@ -1,19 +1,14 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { useApi } from 'soapbox/hooks';
 
-export type Avatar = {
+type Avatar = {
   account_id: string
   account_avatar: string
-  acct: string
-  seen: boolean
+  username: string
 }
 
-const CarouselKeys = {
-  avatars: ['carouselAvatars'] as const,
-};
-
-function useCarouselAvatars() {
+export default function useCarouselAvatars() {
   const api = useApi();
 
   const getCarouselAvatars = async() => {
@@ -21,9 +16,8 @@ function useCarouselAvatars() {
     return data;
   };
 
-  const result = useQuery<Avatar[]>(CarouselKeys.avatars, getCarouselAvatars, {
+  const result = useQuery<Avatar[]>(['carouselAvatars'], getCarouselAvatars, {
     placeholderData: [],
-    keepPreviousData: true,
   });
 
   const avatars = result.data;
@@ -33,13 +27,3 @@ function useCarouselAvatars() {
     data: avatars || [],
   };
 }
-
-function useMarkAsSeen() {
-  const api = useApi();
-
-  return useMutation((account_id: string) => api.post('/api/v1/truth/carousels/avatars/seen', {
-    account_id,
-  }));
-}
-
-export { useCarouselAvatars, useMarkAsSeen };