From 35b18e343fc738ef136172c8f7b967add78a0c14 Mon Sep 17 00:00:00 2001
From: motechFR <mo@anyahq.co>
Date: Thu, 5 Dec 2024 15:41:13 +0100
Subject: [PATCH] Cleanup starterpack UI

---
 .../src/getScoutFarcasterBuilderSocialGraph.ts      |  6 +++---
 .../src/components/common/Carousel/Carousel.tsx     | 13 +++++++++----
 .../StarterPackCarousel/StarterPackCarousel.tsx     | 10 +++++++++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/farcaster/src/getScoutFarcasterBuilderSocialGraph.ts b/packages/farcaster/src/getScoutFarcasterBuilderSocialGraph.ts
index 2908e6146b..5fdfb1561a 100644
--- a/packages/farcaster/src/getScoutFarcasterBuilderSocialGraph.ts
+++ b/packages/farcaster/src/getScoutFarcasterBuilderSocialGraph.ts
@@ -87,7 +87,7 @@ async function getBuildersFollowingUser({
 
     const typedData = data as SocialFollowersResponse;
 
-    if (typedData.SocialFollowers?.Follower) {
+    if (typedData?.SocialFollowers?.Follower) {
       records.push(...typedData.SocialFollowers.Follower);
 
       if (
@@ -146,7 +146,7 @@ async function getBuildersFollowedByUser({
   const records: SocialFollowingResponse['SocialFollowings']['Following'] = [];
 
   async function fetchData(cursor?: string, refetchCount = 0) {
-    const { data, hasNextPage } = await fetchQueryWithPagination(query, {
+    const { data, hasNextPage, error } = await fetchQueryWithPagination(query, {
       fid: fid.toString(),
       selectedFids: uniqueBuilderFids.map(String),
       cursor
@@ -154,7 +154,7 @@ async function getBuildersFollowedByUser({
 
     const typedData = data as SocialFollowingResponse;
 
-    if (typedData.SocialFollowings?.Following) {
+    if (typedData?.SocialFollowings?.Following) {
       records.push(...typedData.SocialFollowings.Following);
 
       if (
diff --git a/packages/scoutgame-ui/src/components/common/Carousel/Carousel.tsx b/packages/scoutgame-ui/src/components/common/Carousel/Carousel.tsx
index 2a123ad7a2..220e8d8763 100644
--- a/packages/scoutgame-ui/src/components/common/Carousel/Carousel.tsx
+++ b/packages/scoutgame-ui/src/components/common/Carousel/Carousel.tsx
@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { Autoplay, Navigation } from 'swiper/modules';
 import type { SwiperProps } from 'swiper/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import type { NavigationOptions } from 'swiper/types';
 
 import { useMdScreen } from '../../../hooks/useMediaScreens';
 import { LoadingCards } from '../Loading/LoadingCards';
@@ -32,6 +33,10 @@ export function Carousel({ children, renderBullet, boxProps, ...swiperProps }: C
     setIsClientSide(true);
   }, []);
 
+  const prevButtonId =
+    ((swiperProps.navigation as NavigationOptions)?.prevEl as string | undefined) ?? '.swiper-button-prev';
+  const nextButtonId = (swiperProps.navigation as NavigationOptions)?.nextEl ?? '.swiper-button-next';
+
   if (!isClientSide) {
     return <LoadingCards />;
   }
@@ -62,8 +67,8 @@ export function Carousel({ children, renderBullet, boxProps, ...swiperProps }: C
         autoHeight={true}
         modules={[Navigation, Autoplay]}
         navigation={{
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
+          nextEl: nextButtonId,
+          prevEl: prevButtonId
         }}
         pagination={
           renderBullet
@@ -82,8 +87,8 @@ export function Carousel({ children, renderBullet, boxProps, ...swiperProps }: C
       </Swiper>
       {isDesktop && swiperProps.slidesPerView && children.length > swiperProps.slidesPerView && (
         <>
-          <NextArrow className='swiper-button-next' />
-          <PrevArrow className='swiper-button-prev' />
+          <NextArrow className={(nextButtonId as string).replace('.', '')} />
+          <PrevArrow className={(prevButtonId as string).replace('.', '')} />
         </>
       )}
     </Box>
diff --git a/packages/scoutgame-ui/src/components/scout/StarterPackCarousel/StarterPackCarousel.tsx b/packages/scoutgame-ui/src/components/scout/StarterPackCarousel/StarterPackCarousel.tsx
index 3c302e3984..ea7e825548 100644
--- a/packages/scoutgame-ui/src/components/scout/StarterPackCarousel/StarterPackCarousel.tsx
+++ b/packages/scoutgame-ui/src/components/scout/StarterPackCarousel/StarterPackCarousel.tsx
@@ -19,7 +19,15 @@ export function StarterPackCarousel({
   return (
     <Stack gap={2}>
       <StarterPackInfo remainingStarterCards={remainingStarterCards} />
-      <Carousel slidesPerView={1} autoplay={false} boxProps={{ width: { xs: '100%', md: '80%' }, margin: '0 auto' }}>
+      <Carousel
+        slidesPerView={1}
+        autoplay={false}
+        boxProps={{ width: { xs: '100%', md: '80%' }, margin: '0 auto' }}
+        navigation={{
+          nextEl: '.swiper-starter-pack-button-next',
+          prevEl: '.swiper-starter-pack-button-prev'
+        }}
+      >
         {builders.map((builder) => (
           <Stack
             key={builder.id}