cleanup styles

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/tabs/audience-tab.tsx

@@ -10,7 +10,7 @@ import type { CellContext, ColumnDef } from "@tanstack/react-table";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { ErrorBoundary } from "@/components/error-boundary";
 import { BrowserIcon } from "@/components/icon";
 import { DataTable } from "@/components/table/data-table";
@@ -240,10 +240,9 @@ export function WebsiteAudienceTab({
 	websiteId,
 	dateRange,
 	isRefreshing,
-	setIsRefreshing,
 	filters,
 	addFilter,
-}: FullTabProps) {
+}: Omit<FullTabProps, "setIsRefreshing">) {
 	const batchQueries = useMemo(
 		() => [
 			{
@@ -267,27 +266,8 @@ export function WebsiteAudienceTab({
 		[filters]
 	);
 
-	const {
-		results: batchResults,
-		isLoading: isBatchLoading,
-		refetch: refetchBatch,
-	} = useBatchDynamicQuery(websiteId, dateRange, batchQueries);
-
-	const handleRefresh = useCallback(async () => {
-		try {
-			await refetchBatch();
-		} catch (error) {
-			console.error("Failed to refresh audience data:", error);
-		} finally {
-			setIsRefreshing(false);
-		}
-	}, [refetchBatch, setIsRefreshing]);
-
-	useEffect(() => {
-		if (isRefreshing) {
-			handleRefresh();
-		}
-	}, [isRefreshing, handleRefresh]);
+	const { results: batchResults, isLoading: isBatchLoading } =
+		useBatchDynamicQuery(websiteId, dateRange, batchQueries);
 
 	const geographicData = useMemo(
 		() =>

apps/dashboard/app/(main)/websites/[id]/audience/page.tsx

@@ -1,12 +1,11 @@
 "use client";
 
 import type { DynamicQueryFilter } from "@databuddy/shared/types/api";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useParams } from "next/navigation";
 import { useCallback } from "react";
 import { ErrorBoundary } from "@/components/error-boundary";
 import { useDateFilters } from "@/hooks/use-date-filters";
-import { useWebsite } from "@/hooks/use-websites";
 import {
 	addDynamicFilterAtom,
 	dynamicQueryFiltersAtom,
@@ -17,12 +16,11 @@ import { WebsiteAudienceTab } from "../_components/tabs/audience-tab";
 export default function AudiencePage() {
 	const { id } = useParams();
 	const websiteId = id as string;
-	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
+	const isRefreshing = useAtomValue(isAnalyticsRefreshingAtom);
 	const [selectedFilters] = useAtom(dynamicQueryFiltersAtom);
 	const [, addFilterAction] = useAtom(addDynamicFilterAtom);
 
 	const { dateRange } = useDateFilters();
-	const { data: websiteData } = useWebsite(websiteId);
 
 	const addFilter = useCallback(
 		(filter: DynamicQueryFilter) => {
@@ -39,8 +37,6 @@ export default function AudiencePage() {
 					dateRange={dateRange}
 					filters={selectedFilters}
 					isRefreshing={isRefreshing}
-					setIsRefreshing={setIsRefreshing}
-					websiteData={websiteData}
 					websiteId={websiteId}
 				/>
 			</ErrorBoundary>

apps/dashboard/app/(main)/websites/[id]/errors/_components/errors-page-content.tsx

@@ -2,8 +2,8 @@
 
 import { GATED_FEATURES } from "@databuddy/shared/types/features";
 import { BugIcon } from "@phosphor-icons/react";
-import { useAtom } from "jotai";
-import { use, useCallback, useEffect } from "react";
+import { useAtomValue } from "jotai";
+import { use } from "react";
 import { FeatureGate } from "@/components/feature-gate";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useDateFilters } from "@/hooks/use-date-filters";
@@ -32,34 +32,17 @@ export const ErrorsPageContent = ({ params }: ErrorsPageContentProps) => {
 	const resolvedParams = use(params);
 	const websiteId = resolvedParams.id;
 
-	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
+	const isRefreshing = useAtomValue(isAnalyticsRefreshingAtom);
 	const { dateRange } = useDateFilters();
 
 	const {
 		results: errorResults,
 		isLoading,
-		refetch,
 		error,
 	} = useEnhancedErrorData(websiteId, dateRange, {
 		queryKey: ["enhancedErrorData", websiteId, dateRange],
 	});
 
-	const handleRefresh = useCallback(async () => {
-		if (isRefreshing) {
-			try {
-				await refetch();
-			} finally {
-				setIsRefreshing(false);
-			}
-		}
-	}, [isRefreshing, refetch, setIsRefreshing]);
-
-	useEffect(() => {
-		if (isRefreshing) {
-			handleRefresh();
-		}
-	}, [isRefreshing, handleRefresh]);
-
 	const getData = <T,>(id: string): T[] =>
 		(errorResults?.find((r) => r.queryId === id)?.data?.[id] as T[]) || [];
 

apps/dashboard/app/(main)/websites/[id]/funnels/page.tsx

@@ -2,10 +2,10 @@
 
 import { GATED_FEATURES } from "@databuddy/shared/types/features";
 import { FunnelIcon, TrendDownIcon } from "@phosphor-icons/react";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { FeatureGate } from "@/components/feature-gate";
 import { Card, CardContent } from "@/components/ui/card";
 import { DeleteDialog } from "@/components/ui/delete-dialog";
@@ -18,7 +18,6 @@ import {
 	useFunnelPerformance,
 	useFunnels,
 } from "@/hooks/use-funnels";
-import { useTrackingSetup } from "@/hooks/use-tracking-setup";
 import { isAnalyticsRefreshingAtom } from "@/stores/jotai/filterAtoms";
 import type { FunnelAnalyticsData } from "@/types/funnels";
 import { WebsitePageHeader } from "../_components/website-page-header";
@@ -30,7 +29,6 @@ import {
 	FunnelsList,
 } from "./_components";
 
-// Only dialogs are lazy loaded since they're conditionally rendered
 const EditFunnelDialog = dynamic(
 	() =>
 		import("./_components/edit-funnel-dialog").then((m) => ({
@@ -52,7 +50,7 @@ function FunnelsListSkeleton() {
 export default function FunnelsPage() {
 	const { id } = useParams();
 	const websiteId = id as string;
-	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
+	const isRefreshing = useAtomValue(isAnalyticsRefreshingAtom);
 	const [expandedFunnelId, setExpandedFunnelId] = useState<string | null>(null);
 	const [selectedReferrer, setSelectedReferrer] = useState("all");
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -61,26 +59,22 @@ export default function FunnelsPage() {
 	);
 	const [deletingFunnelId, setDeletingFunnelId] = useState<string | null>(null);
 
-	const { refetchTrackingSetup } = useTrackingSetup(websiteId);
 	const { formattedDateRangeState, dateRange } = useDateFilters();
 
 	const {
 		data: funnels,
 		isLoading: funnelsLoading,
 		error: funnelsError,
-		refetch: refetchFunnels,
 		createFunnel,
 		updateFunnel,
 		deleteFunnel,
 		isCreating,
 		isUpdating,
 	} = useFunnels(websiteId);
 
-	// Preload analytics for all funnels
 	const { data: performanceData, isLoading: performanceLoading } =
 		useFunnelPerformance(websiteId, dateRange, !!funnels && funnels.length > 0);
 
-	// Detailed analytics for expanded funnel
 	const {
 		data: analyticsData,
 		isLoading: analyticsLoading,
@@ -94,7 +88,6 @@ export default function FunnelsPage() {
 		data: referrerAnalyticsData,
 		isLoading: referrerAnalyticsLoading,
 		error: referrerAnalyticsError,
-		refetch: refetchReferrerAnalytics,
 	} = useFunnelAnalyticsByReferrer(
 		websiteId,
 		expandedFunnelId ?? "",
@@ -107,7 +100,6 @@ export default function FunnelsPage() {
 
 	const autocompleteQuery = useAutocompleteData(websiteId);
 
-	// Analytics map from preloaded data
 	const analyticsMap = useMemo(() => {
 		const map = new Map<string, FunnelAnalyticsData | null>();
 
@@ -119,15 +111,13 @@ export default function FunnelsPage() {
 			}
 		}
 
-		// Override with detailed data for expanded funnel
 		if (expandedFunnelId && analyticsData) {
 			map.set(expandedFunnelId, analyticsData);
 		}
 
 		return map;
 	}, [performanceData, expandedFunnelId, analyticsData]);
 
-	// Loading states
 	const loadingAnalyticsIds = useMemo(() => {
 		const set = new Set<string>();
 		if (performanceLoading && funnels) {
@@ -141,33 +131,6 @@ export default function FunnelsPage() {
 		return set;
 	}, [performanceLoading, funnels, expandedFunnelId, analyticsLoading]);
 
-	const handleRefresh = useCallback(async () => {
-		setIsRefreshing(true);
-		try {
-			const promises: Promise<unknown>[] = [
-				refetchFunnels(),
-				autocompleteQuery.refetch(),
-				refetchTrackingSetup(),
-			];
-			if (expandedFunnelId) {
-				promises.push(refetchAnalytics(), refetchReferrerAnalytics());
-			}
-			await Promise.all(promises);
-		} catch (error) {
-			console.error("Failed to refresh funnel data:", error);
-		} finally {
-			setIsRefreshing(false);
-		}
-	}, [
-		refetchFunnels,
-		refetchAnalytics,
-		refetchReferrerAnalytics,
-		autocompleteQuery.refetch,
-		refetchTrackingSetup,
-		expandedFunnelId,
-		setIsRefreshing,
-	]);
-
 	const handleCreateFunnel = async (data: CreateFunnelData) => {
 		try {
 			await createFunnel(data);
@@ -262,7 +225,6 @@ export default function FunnelsPage() {
 						setEditingFunnel(null);
 						setIsDialogOpen(true);
 					}}
-					onRefreshAction={handleRefresh}
 					subtitle={
 						funnelsLoading
 							? undefined

apps/dashboard/app/(main)/websites/[id]/goals/page.tsx

@@ -2,9 +2,9 @@
 
 import { GATED_FEATURES } from "@databuddy/shared/types/features";
 import { TargetIcon, TrendDownIcon } from "@phosphor-icons/react";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { useParams } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { FeatureGate } from "@/components/feature-gate";
 import { Card, CardContent } from "@/components/ui/card";
 import { DeleteDialog } from "@/components/ui/delete-dialog";
@@ -35,7 +35,7 @@ function GoalsListSkeleton() {
 export default function GoalsPage() {
 	const { id } = useParams();
 	const websiteId = id as string;
-	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
+	const isRefreshing = useAtomValue(isAnalyticsRefreshingAtom);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const [editingGoal, setEditingGoal] = useState<Goal | null>(null);
 	const [deletingGoalId, setDeletingGoalId] = useState<string | null>(null);
@@ -46,7 +46,6 @@ export default function GoalsPage() {
 		data: goals,
 		isLoading: goalsLoading,
 		error: goalsError,
-		refetch: refetchGoals,
 		createGoal,
 		updateGoal,
 		deleteGoal,
@@ -56,34 +55,11 @@ export default function GoalsPage() {
 
 	const goalIds = useMemo(() => goals.map((goal) => goal.id), [goals]);
 
-	const {
-		data: goalAnalytics,
-		isLoading: analyticsLoading,
-		refetch: refetchAnalytics,
-	} = useBulkGoalAnalytics(websiteId, goalIds, dateRange);
+	const { data: goalAnalytics, isLoading: analyticsLoading } =
+		useBulkGoalAnalytics(websiteId, goalIds, dateRange);
 
 	const autocompleteQuery = useAutocompleteData(websiteId);
 
-	const handleRefresh = useCallback(async () => {
-		setIsRefreshing(true);
-		try {
-			await Promise.all([refetchGoals(), autocompleteQuery.refetch()]);
-			if (goalIds.length > 0) {
-				refetchAnalytics();
-			}
-		} catch (error) {
-			console.error("Failed to refresh goal data:", error);
-		} finally {
-			setIsRefreshing(false);
-		}
-	}, [
-		refetchGoals,
-		refetchAnalytics,
-		goalIds.length,
-		autocompleteQuery.refetch,
-		setIsRefreshing,
-	]);
-
 	const handleSaveGoal = async (
 		data: Goal | Omit<CreateGoalData, "websiteId">
 	) => {
@@ -175,7 +151,6 @@ export default function GoalsPage() {
 						setEditingGoal(null);
 						setIsDialogOpen(true);
 					}}
-					onRefreshAction={handleRefresh}
 					subtitle={
 						goalsLoading
 							? undefined