edit referrals page, add referrals fetch functions

src/app/ui/referral-page/referral-link-section.tsx

@@ -1,18 +1,71 @@
+'use client'
+
+import { fetchReferralUserStats } from '@/app/actions/referralsActions';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+
 export default function ReferralLinkSection() {
+	const {
+		data: referralUserStats,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['referralUserStats'],
+		queryFn: () => {
+			return fetchReferralUserStats();
+		},
+		select: (data) => {
+			return data;
+		}
+	});
+
+	const t = useTranslations('Global')
+	const [referralUrl, setReferralUrl] = useState<string>('');
+	const refLink = useRef<HTMLElement>(null);
+
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			setReferralUrl(`${window.location.origin}/register?ref=${referralUserStats?.referralLink}`);
+		}
+	}, [referralUserStats]);
+
+	const copyHandler = () => {
+		if (refLink.current?.textContent) {
+			navigator.clipboard.writeText(refLink.current?.textContent);
+			toast.success(`${t('copied')}: ${refLink.current?.textContent}`)
+		}
+	};
+
+	if (!referralUserStats?.referralLink) {
+		return null;
+	}
+
 	return (
 		<div className="referral-link-section">
-			<h3>🔗 Ваша реферальная ссылка</h3>
+			<h3>Ваша реферальная ссылка</h3>
 			<p>Поделитесь этой ссылкой с друзьями и получайте комиссию с каждой их покупки</p>
 			<div className="referral-link-input">
-				<span id="referral-link" >
-					https://dashboard.no-copy.ru/register.php?ref=REFA0406AC8
+				<span
+					id="referral-link"
+					ref={refLink}
+				>
+					{referralUrl}
 				</span >
-				<button className="copy-btn">📋 Копировать</button>
+				<button
+					className="copy-btn"
+					onClick={copyHandler}
+				>
+					Копировать
+				</button>
 			</div>
 			<p className="referral-link-footer">
-				Код: <strong>REFA0406AC8</strong> •
-				Кликов: <strong>21</strong> •
-				Комиссия: <strong>15%</strong>
+				Код: <strong>{referralUserStats?.referralLink}</strong> •
+				Приглашений: <strong>
+					{referralUserStats?.totalInvitee}
+				</strong>
 			</p>
 		</div>
 	)