mobile-darmasaba/components/home/carouselHome.tsx

import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import { apiGetBanner, apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/bannerSlice";
import { setEntityUser } from "@/lib/userSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useEffect } from "react";
import { Dimensions, Image, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import { useDispatch, useSelector } from "react-redux";
import Text from "../Text";

export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
   const { decryptToken, token } = useAuthSession()
   const { colors } = useTheme();
   const ref = React.useRef<ICarouselInstance>(null);
   const width = Dimensions.get("window").width;
   const progress = useSharedValue<number>(0);
   const dispatch = useDispatch()
   const entities = useSelector((state: any) => state.banner)
   const entityUser = useSelector((state: any) => state.user)

   async function handleBannerView() {
      const hasil = await decryptToken(String(token?.current))
      apiGetBanner({ user: hasil }).then((data) => {
         if (data.data.length > 0) {
            dispatch(setEntities(data.data))
         } else {
            dispatch(setEntities([]))
         }
      })
   }

   async function handleUser() {
      const hasil = await decryptToken(String(token?.current))
      const response = await apiGetProfile({ id: hasil })
      dispatch(setEntityUser({ role: response.data.idUserRole, admin: false, isApprover: response.data.isApprover ?? false }))
   }

   useEffect(() => {
      if (refreshing)
         handleBannerView()
   }, [refreshing]);

   useEffect(() => {
      handleBannerView()
   }, [dispatch]);

   useEffect(() => {
      handleUser()
   }, []);

   return (
      <View style={[Styles.mv15]}>
         {
            entities.length > 0 ?
               <Carousel
                  ref={ref}
                  width={width}
                  height={width / 2.5}
                  data={entities}
                  loop={true}
                  autoPlay={true}
                  autoPlayInterval={5000}
                  onProgressChange={progress}
                  renderItem={({ index }) => (
                     <Image
                        source={{ uri: `${ConstEnv.url_storage}/files/${entities[index].image}` }}
                        style={[Styles.caraoselContent, { backgroundColor: colors.primary }]}
                     />
                  )}
               />
               :
               <View style={[Styles.caraoselContent, { height: width / 2.5, backgroundColor: colors.primary }]}>
                  <Text style={[Styles.textDefault, Styles.cWhite, { textAlign: 'center' }]}>BANNER</Text>
               </View>
         }

      </View>
   )
}