Untitled
unknown
plain_text
a year ago
3.5 kB
5
Indexable
'use client'; import TabItem from '@/components/Global/TabItem'; import TabPanel from '@/components/Global/TabPanel'; import { sportMonkUrl } from '@/lib/axios/getAxios'; import useGetUserProfile from '@/lib/hooks/useGetUserProfile'; import { useSession } from 'next-auth/react'; import { useEffect, useState } from 'react'; import FavoriteLeagues from './FavoriteLeagues'; import FavoritesMatches from './FavoritesMatches'; import FavoritesTeams from './FavoritesTeams'; export default function FavoritesHome() { const { data: session } = useSession(); const { userProfile, refetchProfile } = useGetUserProfile(session); const [currentTab, setCurrentTab] = useState(0); const [favoriteLoading, setFavoriteLoading] = useState(true); const [favoriteMatchesData, setFavoriteMatchesData] = useState([]); const { leagues = [], matches = [], teams = [], } = userProfile?.favorites || {}; const fixtureIds = matches.map((item) => item.id).join(','); useEffect(() => { const fetchData = async () => { try { if (fixtureIds.length > 0) { const response = await sportMonkUrl.get( `/fixtures/multi/${fixtureIds}?include=league.country;round.stage;participants;state;scores;periods` ); if (response.status === 200) { setFavoriteLoading(false); setFavoriteMatchesData(response.data?.data); } else { throw new Error('Failed to fetch favorite matches data'); } } else { setFavoriteLoading(false); setFavoriteMatchesData([]); } } catch (error) { setFavoriteLoading(false); console.error(error); } }; if (session) { fetchData(); } else { setFavoriteLoading(false); } }, [session, userProfile]); const tabs = ['Matches', 'Teams', 'Leagues']; const tabContents = [ <FavoritesMatches key={'favorites_tab_001'} matches={favoriteMatchesData} session={session} favoriteLoading={favoriteLoading} />, <FavoritesTeams key={'favorites_tab_002'} teams={teams} session={session} favoriteLoading={favoriteLoading} refetchProfile={refetchProfile} />, <FavoriteLeagues key={'favorites_tab_003'} leagues={leagues} session={session} favoriteLoading={favoriteLoading} refetchProfile={refetchProfile} />, ]; const handleTabChange = (tab) => { setCurrentTab(tab); }; return ( <> <div className="flex flex-col items-center"> <div className="w-full relative"> <div className=" flex gap-4 items-center h-full mx-4 absolute -top-[2.7rem] left-5"> {tabs.map((tab, index) => ( <TabItem key={index} tab={tab} onClick={() => handleTabChange(index)} active={currentTab === index} isWhite={false} /> ))} </div> </div> </div> <div className="h-auto w-full"> <div className=""> {tabContents.map((content, index) => ( <TabPanel key={index} content={content} index={index} currentTab={currentTab} /> ))} </div> </div> </> ); }
Editor is loading...
Leave a Comment