edit referrals page, add referrals fetch functions

src/app/ui/referral-page/commission-levels.tsx

@@ -1,4 +1,38 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query';
+import { fetchReferralsLevels } from '@/app/actions/referralsActions';
+import { useEffect } from 'react';
+
 export default function CommissionLevels() {
+	const {
+		data: referralsLevels,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['referralsLevels'],
+		queryFn: () => {
+			return fetchReferralsLevels();
+		},
+		select: (data) => {
+			if (data?.message_body) {
+				return data?.message_body
+			} else {
+				return []
+			}
+		}
+	});
+
+	useEffect(() => {
+		console.log('referralsLevels');
+		console.log(referralsLevels);
+	}, [referralsLevels])
+
+	if (!referralsLevels?.length) {
+		return null;
+	}
+
 	return (
 		<div className="block-wrapper">
 			<h3 className="section-title">