Skip to content

use rpc and dataloader for analytics api #1171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Brendonovich merged 2 commits into from
Oct 10, 2025
Merged

use rpc and dataloader for analytics api #1171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b069620
use rpc and dataloader for analytics api
Brendonovich Oct 10, 2025
f196ff1
format
Brendonovich Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions apps/web/actions/video/upload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,13 @@ import { getCurrentUser } from "@cap/database/auth/session";
import { nanoId } from "@cap/database/helpers";
import { s3Buckets, videos, videoUploads } from "@cap/database/schema";
import { buildEnv, NODE_ENV, serverEnv } from "@cap/env";
import { userIsPro } from "@cap/utils";
import { dub, userIsPro } from "@cap/utils";
import { S3Buckets } from "@cap/web-backend";
import { type Folder, type Organisation, Video } from "@cap/web-domain";
import { eq } from "drizzle-orm";
import { Effect, Option } from "effect";
import { revalidatePath } from "next/cache";
import { runPromise } from "@/lib/server";
import { dub } from "@/utils/dub";

async function getVideoUploadPresignedUrl({
fileKey,
Expand Down
2 changes: 1 addition & 1 deletion apps/web/actions/videos/get-analytics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use server";

import { dub } from "@/utils/dub";
import { dub } from "@cap/utils";

export async function getVideoAnalytics(videoId: string) {
if (!videoId) {
Expand Down
58 changes: 8 additions & 50 deletions apps/web/app/(org)/dashboard/caps/Caps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import { Effect, Exit } from "effect";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { useEffectMutation } from "@/lib/EffectRuntime";
import { useEffectMutation, useEffectQuery } from "@/lib/EffectRuntime";
import {
AnalyticsRequest,
useVideosAnalyticsQuery,
} from "@/lib/Requests/AnalyticsRequest";
import { Rpc, withRpc } from "@/lib/Rpcs";
import { useDashboardContext } from "../Contexts";
import {
Expand Down Expand Up @@ -73,54 +77,8 @@ export const Caps = ({

const anyCapSelected = selectedCaps.length > 0;

const videoIds = data.map((video) => video.id).sort();

const { data: analyticsData, isLoading: isLoadingAnalytics } = useQuery({
queryKey: ["analytics", videoIds],
queryFn: async () => {
if (!dubApiKeyEnabled || data.length === 0) {
return {};
}

const analyticsPromises = data.map(async (video) => {
try {
const response = await fetch(`/api/analytics?videoId=${video.id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});

if (response.ok) {
const responseData = await response.json();
return { videoId: video.id, count: responseData.count || 0 };
}
return { videoId: video.id, count: 0 };
} catch (error) {
console.warn(
`Failed to fetch analytics for video ${video.id}:`,
error,
);
return { videoId: video.id, count: 0 };
}
});

const results = await Promise.allSettled(analyticsPromises);
const analyticsData: Record<string, number> = {};

results.forEach((result) => {
if (result.status === "fulfilled" && result.value) {
analyticsData[result.value.videoId] = result.value.count;
}
});

return analyticsData;
},
refetchOnWindowFocus: false,
refetchOnMount: true,
});

const analytics = analyticsData || {};
const analyticsQuery = useVideosAnalyticsQuery(data.map((video) => video.id));
const analytics = analyticsQuery.data || {};
Comment on lines +80 to +81
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Analytics never loads here (missing dubApiKeyEnabled)

useVideosAnalyticsQuery short-circuits when the flag is falsy. You’re not passing it, so analytics stays empty.

Apply this diff:

-  const analyticsQuery = useVideosAnalyticsQuery(data.map((video) => video.id));
+  const analyticsQuery = useVideosAnalyticsQuery(
+    data.map((video) => video.id),
+    dubApiKeyEnabled,
+  );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const analyticsQuery = useVideosAnalyticsQuery(data.map((video) => video.id));
const analytics = analyticsQuery.data || {};
const analyticsQuery = useVideosAnalyticsQuery(
data.map((video) => video.id),
dubApiKeyEnabled,
);
const analytics = analyticsQuery.data || {};
🤖 Prompt for AI Agents 
In apps/web/app/(org)/dashboard/caps/Caps.tsx around lines 80-81, the call to
useVideosAnalyticsQuery omits the dubApiKeyEnabled flag so the hook
short-circuits and analytics stays empty; update the call to pass the
dubApiKeyEnabled boolean (e.g., from feature flags/context/props where flags are
read) as the first argument and only map video IDs when that flag is truthy (or
guard the hook call with the flag) so the hook runs and analyticsQuery.data is
populated.


useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
Expand Down Expand Up @@ -318,7 +276,7 @@ export const Caps = ({
}
}}
userId={user?.id}
isLoadingAnalytics={isLoadingAnalytics}
isLoadingAnalytics={analyticsQuery.isLoading}
isSelected={selectedCaps.includes(video.id)}
anyCapSelected={anyCapSelected}
onSelectToggle={() => handleCapSelection(video.id)}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/(org)/dashboard/caps/components/UploadCapButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
useUploadingContext,
} from "@/app/(org)/dashboard/caps/UploadingContext";
import { UpgradeModal } from "@/components/UpgradeModal";
import { ThumbnailRequest } from "@/lib/ThumbnailRequest";
import { ThumbnailRequest } from "@/lib/Requests/ThumbnailRequest";

export const UploadCapButton = ({
size = "md",
Expand Down
52 changes: 7 additions & 45 deletions apps/web/app/(org)/dashboard/folder/[id]/components/FolderVideosSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
import { useEffectMutation } from "@/lib/EffectRuntime";
import { useVideosAnalyticsQuery } from "@/lib/Requests/AnalyticsRequest";
import { Rpc, withRpc } from "@/lib/Rpcs";
import type { VideoData } from "../../../caps/Caps";
import { CapCard } from "../../../caps/components/CapCard/CapCard";
Expand Down Expand Up @@ -108,49 +109,10 @@ export default function FolderVideosSection({
});
};

const { data: analyticsData, isLoading: isLoadingAnalytics } = useQuery({
queryKey: ["analytics", initialVideos.map((video) => video.id)],
queryFn: async () => {
if (!dubApiKeyEnabled || initialVideos.length === 0) {
return {};
}

const analyticsPromises = initialVideos.map(async (video) => {
try {
const response = await fetch(`/api/analytics?videoId=${video.id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});

if (response.ok) {
const responseData = await response.json();
return { videoId: video.id, count: responseData.count || 0 };
}
return { videoId: video.id, count: 0 };
} catch (error) {
console.warn(
`Failed to fetch analytics for video ${video.id}:`,
error,
);
return { videoId: video.id, count: 0 };
}
});

const results = await Promise.allSettled(analyticsPromises);
const analyticsData: Record<string, number> = {};

results.forEach((result) => {
if (result.status === "fulfilled" && result.value) {
analyticsData[result.value.videoId] = result.value.count;
}
});
return analyticsData;
},
refetchOnWindowFocus: false,
refetchOnMount: true,
});
const analyticsQuery = useVideosAnalyticsQuery(
initialVideos.map((video) => video.id),
dubApiKeyEnabled,
);

const [isUploading, uploadingCapId] = useUploadingStatus();
const visibleVideos = useMemo(
Expand All @@ -161,7 +123,7 @@ export default function FolderVideosSection({
[initialVideos, isUploading, uploadingCapId],
);

const analytics = analyticsData || {};
const analytics = analyticsQuery.data || {};

return (
<>
Expand All @@ -185,7 +147,7 @@ export default function FolderVideosSection({
cap={video}
analytics={analytics[video.id] || 0}
userId={user?.id}
isLoadingAnalytics={isLoadingAnalytics}
isLoadingAnalytics={analyticsQuery.isLoading}
isSelected={selectedCaps.includes(video.id)}
anyCapSelected={selectedCaps.length > 0}
isDeleting={isDeletingCaps || isDeletingCap}
Expand Down
53 changes: 7 additions & 46 deletions apps/web/app/(org)/dashboard/spaces/[spaceId]/SharedCaps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useQuery } from "@tanstack/react-query";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { useVideosAnalyticsQuery } from "@/lib/Requests/AnalyticsRequest";
import { useDashboardContext } from "../../Contexts";
import { CapPagination } from "../../caps/components/CapPagination";
import Folder, { type FolderDataType } from "../../caps/components/Folder";
Expand Down Expand Up @@ -94,52 +95,12 @@ export const SharedCaps = ({

const organizationMemberCount = organizationMembers?.length || 0;

const { data: analyticsData, isLoading: isLoadingAnalytics } = useQuery({
queryKey: ["analytics", data.map((video) => video.id)],
queryFn: async () => {
if (!dubApiKeyEnabled || data.length === 0) {
return {};
}

const analyticsPromises = data.map(async (video) => {
try {
const response = await fetch(`/api/analytics?videoId=${video.id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});

if (response.ok) {
const responseData = await response.json();
return { videoId: video.id, count: responseData.count || 0 };
}
return { videoId: video.id, count: 0 };
} catch (error) {
console.warn(
`Failed to fetch analytics for video ${video.id}:`,
error,
);
return { videoId: video.id, count: 0 };
}
});

const results = await Promise.allSettled(analyticsPromises);
const analyticsData: Record<string, number> = {};

results.forEach((result) => {
if (result.status === "fulfilled" && result.value) {
analyticsData[result.value.videoId] = result.value.count;
}
});

return analyticsData;
},
staleTime: 30000, // 30 seconds
refetchOnWindowFocus: false,
});
const analyticsQuery = useVideosAnalyticsQuery(
data.map((video) => video.id),
dubApiKeyEnabled,
);

const analytics = analyticsData || {};
const analytics = analyticsQuery.data || {};

const handleVideosAdded = () => {
router.refresh();
Expand Down Expand Up @@ -296,7 +257,7 @@ export const SharedCaps = ({
key={cap.id}
cap={cap}
hideSharedStatus
isLoadingAnalytics={isLoadingAnalytics}
isLoadingAnalytics={analyticsQuery.isLoading}
analytics={analytics[cap.id] || 0}
organizationName={activeOrganization?.organization.name || ""}
spaceName={spaceData?.name || ""}
Expand Down
3 changes: 1 addition & 2 deletions apps/web/app/api/desktop/[...route]/video.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
videoUploads,
} from "@cap/database/schema";
import { buildEnv, NODE_ENV, serverEnv } from "@cap/env";
import { userIsPro } from "@cap/utils";
import { dub, userIsPro } from "@cap/utils";
import { S3Buckets } from "@cap/web-backend";
import { Organisation, Video } from "@cap/web-domain";
import { zValidator } from "@hono/zod-validator";
Expand All @@ -20,7 +20,6 @@ import { Effect, Option } from "effect";
import { Hono } from "hono";
import { z } from "zod";
import { runPromise } from "@/lib/server";
import { dub } from "@/utils/dub";
import { stringOrNumberOptional } from "@/utils/zod";
import { withAuth } from "../../utils";

Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/VideoThumbnail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import moment from "moment";
import Image from "next/image";
import { memo, useEffect, useRef } from "react";
import { useEffectQuery } from "@/lib/EffectRuntime";
import { ThumbnailRequest } from "@/lib/ThumbnailRequest";
import { ThumbnailRequest } from "@/lib/Requests/ThumbnailRequest";

export type ImageLoadingStatus = "loading" | "success" | "error";

Expand Down
4 changes: 3 additions & 1 deletion apps/web/lib/EffectRuntime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import {
makeUseEffectMutation,
makeUseEffectQuery,
} from "./effect-react-query";
import { AnalyticsRequest } from "./Requests/AnalyticsRequest";
import { ThumbnailRequest } from "./Requests/ThumbnailRequest";
import { Rpc } from "./Rpcs";
import { ThumbnailRequest } from "./ThumbnailRequest";

export const RuntimeLayer = Layer.mergeAll(
ThumbnailRequest.DataLoaderResolver.Default,
AnalyticsRequest.DataLoaderResolver.Default,
Rpc.Default,
FetchHttpClient.layer,
);
Expand Down
Loading