Spike: rtk-query??

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

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { replaceHomeTimeline } from 'soapbox/actions/timelines';
 import { useAppDispatch, useAppSelector, useDimensions, useFeatures } from 'soapbox/hooks';
-import useCarouselAvatars from 'soapbox/queries/carousels';
+import { useGetCarouselAvatarsQuery } from 'soapbox/queries/rtk-client';
 
 import { Card, HStack, Icon, Stack, Text } from '../../components/ui';
 import PlaceholderAvatar from '../placeholder/components/placeholder_avatar';
@@ -61,15 +61,15 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
 const FeedCarousel = () => {
   const features = useFeatures();
 
-  const { data: avatars, isFetching, isError } = useCarouselAvatars();
+  const { data: avatars, isFetching, isError } = useGetCarouselAvatarsQuery(null);
 
   const [cardRef, setCardRef, { width }] = useDimensions();
 
   const [pageSize, setPageSize] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const numberOfPages = Math.ceil(avatars.length / pageSize);
-  const widthPerAvatar = (cardRef?.scrollWidth || 0) / avatars.length;
+  const numberOfPages = avatars ? Math.ceil(avatars.length / pageSize) : 0;
+  const widthPerAvatar = avatars ? (cardRef?.scrollWidth || 0) / avatars.length : 0;
 
   const hasNextPage = currentPage < numberOfPages && numberOfPages > 1;
   const hasPrevPage = currentPage > 1 && numberOfPages > 1;
@@ -97,7 +97,7 @@ const FeedCarousel = () => {
     );
   }
 
-  if (avatars.length === 0) {
+  if (avatars?.length === 0) {
     return null;
   }
 
@@ -132,7 +132,7 @@ const FeedCarousel = () => {
               </div>
             ))
           ) : (
-            avatars.map((avatar) => (
+            avatars?.map((avatar) => (
               <CarouselItem
                 key={avatar.account_id}
                 avatar={avatar}

app/soapbox/queries/rtk-client.ts

@@ -0,0 +1,47 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+import * as BuildConfig from 'soapbox/build_config';
+import { STORAGE_KEY } from 'soapbox/reducers/auth';
+import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth';
+
+import type { RootState } from 'soapbox/store';
+
+const cachedAuth = JSON.parse(localStorage.getItem(STORAGE_KEY) as string);
+const baseURL = parseBaseURL(cachedAuth.users[cachedAuth.me].url);
+
+const getToken = (state: RootState, authType: string) => {
+  return authType === 'app' ? getAppToken(state) : getAccessToken(state);
+};
+
+type CarouselAccount = {
+  account_id: string
+  account_avatar: string
+  username: string
+}
+
+// Define a service using a base URL and expected endpoints
+export const api = createApi({
+  reducerPath: 'soapboxApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: isURL(BuildConfig.BACKEND_URL) ? BuildConfig.BACKEND_URL : baseURL,
+    prepareHeaders: (headers, { getState }): Headers => {
+      const state = getState() as RootState;
+      const accessToken: string = getToken(state, 'user');
+
+      if (accessToken) {
+        headers.set('Authorization', `Bearer ${accessToken}`);
+      }
+
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getCarouselAvatars: builder.query<CarouselAccount[], null>({
+      query: () => '/api/v1/truth/carousels/avatars',
+    }),
+  }),
+});
+
+// Export hooks for usage in functional components, which are
+// auto-generated based on the defined endpoints
+export const { useGetCarouselAvatarsQuery } = api;

app/soapbox/reducers/index.ts

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux-immutable';
 
 import { AUTH_LOGGED_OUT } from 'soapbox/actions/auth';
 import * as BuildConfig from 'soapbox/build_config';
+import { api } from 'soapbox/queries/rtk-client';
 
 import account_notes from './account_notes';
 import accounts from './accounts';
@@ -124,6 +125,7 @@ const reducers = {
   rules,
   history,
   announcements,
+  [api.reducerPath]: api.reducer,
 };
 
 // Build a default state from all reducers: it has the key and `undefined`