optimize useCommissionAnalyticsFilters, rename partnerTag → partnerTagId

Author: steven-tey

apps/web/app/(ee)/api/commissions/analytics/route.ts

@@ -155,8 +155,8 @@ export const GET = withWorkspace(async ({ workspace, searchParams }) => {
     return byGroupId({ programId, parsed, startDate, endDate });
   }
 
-  if (groupBy === "partnerTag") {
-    return byPartnerTag({ programId, parsed, startDate, endDate });
+  if (groupBy === "partnerTagId") {
+    return byPartnerTagIdId({ programId, parsed, startDate, endDate });
   }
 
   if (groupBy === "partnerId") {
@@ -356,7 +356,7 @@ async function byGroupId({
   return NextResponse.json(commissionAnalyticsSchema.groupId.parse(result));
 }
 
-async function byPartnerTag({
+async function byPartnerTagIdId({
   programId,
   parsed,
   startDate,
@@ -384,7 +384,7 @@ async function byPartnerTag({
     rawTypeFilter.values.length > 0 &&
     validTypeValues.length === 0
   ) {
-    return NextResponse.json(commissionAnalyticsSchema.partnerTag.parse([]));
+    return NextResponse.json(commissionAnalyticsSchema.partnerTagId.parse([]));
   }
 
   const typeFilter =
@@ -457,7 +457,9 @@ async function byPartnerTag({
     count: Number(row.count),
   }));
 
-  return NextResponse.json(commissionAnalyticsSchema.partnerTag.parse(result));
+  return NextResponse.json(
+    commissionAnalyticsSchema.partnerTagId.parse(result),
+  );
 }
 
 async function byPartnerId({

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/applications/use-applications-analytics-filters.tsx

@@ -11,6 +11,7 @@ import {
   nFormatter,
   parseFilterValue,
 } from "@dub/utils";
+import { useParams } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import { ApplicationReferralSourceIcon } from "./application-referral-source-icon";
 import { useApplicationsAnalytics } from "./use-applications-analytics";
@@ -20,6 +21,7 @@ const FILTER_KEYS = ["partnerId", "country", "referralSource"] as const;
 
 export function useApplicationAnalyticsFilters() {
   const { slug } = useWorkspace();
+  const { tab } = useParams() as { tab?: string };
   const { stage } = useApplicationsAnalyticsQuery();
   const { searchParamsObj, queryParams } = useRouterStuff();
 
@@ -35,16 +37,19 @@ export function useApplicationAnalyticsFilters() {
   const { data: partners } = useApplicationsAnalytics({
     groupBy: "partnerId",
     exclude: ["partnerId"],
+    enabled: tab === "applications",
   });
 
   const { data: referralSources } = useApplicationsAnalytics({
     groupBy: "referralSource",
     exclude: ["referralSource"],
+    enabled: tab === "applications",
   });
 
   const { data: countries } = useApplicationsAnalytics({
     groupBy: "country",
     exclude: ["country"],
+    enabled: tab === "applications",
   });
 
   const filters = useMemo(

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/commissions-analytics-cards.tsx

@@ -25,6 +25,7 @@ import {
   useState,
 } from "react";
 import { CommissionStatusFilter } from "./commissions-status-selector";
+import { useCommissionsAnalyticsQuery } from "./use-commissions-analytics-query";
 
 const STATUS_LABELS: Record<string, string> = {
   pending: "Pending",
@@ -40,7 +41,7 @@ const STATUS_ICONS: Record<string, React.ElementType> = {
   all: CircleDotted,
 };
 
-type CommissionsBarListTab = "type" | "groupId" | "partnerTag";
+type CommissionsBarListTab = "type" | "groupId" | "partnerTagId";
 
 function mapCommissionBarRow(
   item: CommissionCategoryRow,
@@ -54,7 +55,7 @@ function mapCommissionBarRow(
         type={item.key as "sale" | "custom" | "lead" | "click"}
       />
     );
-  } else if (tab === "partnerTag") {
+  } else if (tab === "partnerTagId") {
     icon = <Tag className="size-4 shrink-0 text-neutral-500" />;
   } else {
     icon = (
@@ -315,22 +316,18 @@ function CommissionBarPanel<T extends string>({
 }
 
 const LEFT_TABS: {
-  id: "groupId" | "partnerTag";
+  id: "groupId" | "partnerTagId";
   label: string;
   icon: React.ElementType;
 }[] = [
   { id: "groupId", label: "Partner Group", icon: Users6 },
-  { id: "partnerTag", label: "Partner Tag", icon: Tag },
+  { id: "partnerTagId", label: "Partner Tag", icon: Tag },
 ];
 
-export function CommissionsAnalyticsCards({
-  status,
-  queryString,
-}: {
-  status: CommissionStatusFilter;
-  queryString: string;
-}) {
-  const [leftTab, setLeftTab] = useState<"groupId" | "partnerTag">("groupId");
+export function CommissionsAnalyticsCards() {
+  const { status } = useCommissionsAnalyticsQuery();
+
+  const [leftTab, setLeftTab] = useState<"groupId" | "partnerTagId">("groupId");
 
   const groupFilter = useUrlListFilter("groupId");
   const partnerTagFilter = useUrlListFilter("partnerTagId");
@@ -344,17 +341,14 @@ export function CommissionsAnalyticsCards({
   }, [groups]);
 
   const { data: groupRows, isLoading: groupLoading } = useCommissionAnalytics({
-    queryString,
     groupBy: "groupId",
   });
   const { data: partnerTagRows, isLoading: partnerTagLoading } =
     useCommissionAnalytics({
-      queryString,
-      groupBy: "partnerTag",
-      enabled: leftTab === "partnerTag",
+      groupBy: "partnerTagId",
+      enabled: leftTab === "partnerTagId",
     });
   const { data: typeRows, isLoading: typeLoading } = useCommissionAnalytics({
-    queryString,
     groupBy: "type",
   });
 

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/commissions-analytics-chart.tsx

@@ -9,7 +9,7 @@ import {
   XAxis,
   YAxis,
 } from "@dub/ui/charts";
-import { LoadingSpinner } from "@dub/ui/icons";
+import { LoadingSpinner, useRouterStuff } from "@dub/ui";
 import { currencyFormatter, nFormatter } from "@dub/utils";
 import { LinearGradient } from "@visx/gradient";
 import { useId } from "react";
@@ -48,19 +48,18 @@ const STATUS_COLORS: Record<
 export function CommissionsAnalyticsChart({
   status,
   unit = "earnings",
-  queryString,
   interval,
   start,
   end,
 }: {
   status: CommissionStatusFilter;
   unit?: "earnings" | "count";
-  queryString: string;
   interval?: string;
   start?: Date;
   end?: Date;
 }) {
   const id = useId();
+  const { searchParams } = useRouterStuff();
   const color = STATUS_COLORS[status ?? "all"];
 
   const {
@@ -69,7 +68,6 @@ export function CommissionsAnalyticsChart({
     error,
   } = useCommissionAnalytics({
     groupBy: "timeseries",
-    queryString,
   });
 
   const chartData = data?.map((d) => ({
@@ -95,7 +93,7 @@ export function CommissionsAnalyticsChart({
 
   return (
     <TimeSeriesChart
-      key={`${status ?? "all"}-${unit}-${queryString}`}
+      key={`${status ?? "all"}-${unit}-${searchParams.toString()}`}
       data={chartData ?? []}
       series={[
         {

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/commissions-partners-table.tsx

@@ -18,11 +18,7 @@ import { PartnerAnalyticsFilterCell } from "./partner-analytics-filter-cell";
 
 const PAGE_SIZE = 10;
 
-export function CommissionsPartnersTable({
-  queryString,
-}: {
-  queryString: string;
-}) {
+export function CommissionsPartnersTable() {
   const { queryParams, searchParams } = useRouterStuff();
   const { pagination, setPagination } = usePagination(PAGE_SIZE);
 
@@ -77,7 +73,6 @@ export function CommissionsPartnersTable({
     isLoading,
     error,
   } = useCommissionAnalytics({
-    queryString,
     groupBy: "partnerId",
   });
 

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/page.tsx

@@ -59,14 +59,13 @@ function CommissionsTab() {
           <CommissionsAnalyticsChart
             status={commissionStatus}
             unit={commissionUnit}
-            queryString={commissionsQueryString}
             interval={commissionsInterval}
             start={commissionsStart}
             end={commissionsEnd}
           />
         </div>
       </div>
-      <CommissionsPartnersTable queryString={commissionsQueryString} />
+      <CommissionsPartnersTable />
     </>
   );
 }

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/program-analytics-shell.tsx

@@ -35,7 +35,6 @@ import {
   ProgramAnalyticsTabId,
 } from "./program-analytics-nav";
 import { useCommissionsAnalyticsFilters } from "./use-commissions-analytics-filters";
-import { useCommissionsAnalyticsQuery } from "./use-commissions-analytics-query";
 
 export function ProgramAnalyticsShell({ children }: { children: ReactNode }) {
   const { isMobile } = useMediaQuery();
@@ -49,11 +48,7 @@ export function ProgramAnalyticsShell({ children }: { children: ReactNode }) {
       ? (tab as ProgramAnalyticsTabId)
       : "performance";
 
-  const { queryString: commissionsQueryString, status: commissionStatus } =
-    useCommissionsAnalyticsQuery();
-
-  const { stage: applicationsStage, view: applicationsView } =
-    useApplicationsAnalyticsQuery();
+  const { stage: applicationsStage } = useApplicationsAnalyticsQuery();
 
   const { start, end, interval, selectedTab, saleUnit, view } = useMemo(() => {
     const { event, ...rest } = searchParamsObj;
@@ -121,7 +116,7 @@ export function ProgramAnalyticsShell({ children }: { children: ReactNode }) {
     onToggleOperator: commOnToggleOperator,
     onOpenFilter: commOnOpenFilter,
     setSearch: commSetSearch,
-  } = useCommissionsAnalyticsFilters(commissionsQueryString);
+  } = useCommissionsAnalyticsFilters();
 
   const {
     filters: applicationsFilters,
@@ -199,7 +194,7 @@ export function ProgramAnalyticsShell({ children }: { children: ReactNode }) {
                   <Link
                     href={
                       pageTab === "commissions"
-                        ? `/${slug}/program/commissions${getQueryString({}, { include: ["interval", "start", "end", "partnerId", "groupId", "type"] })}`
+                        ? `/${slug}/program/commissions${getQueryString({}, { include: ["interval", "start", "end", "partnerId", "groupId", "partnerTagId", "type"] })}`
                         : pageTab === "applications"
                           ? `/${slug}/program/partners/applications`
                           : `/${slug}/events${getQueryString({ folderId: program?.defaultFolderId, event: selectedTab, interval })}`
@@ -279,10 +274,7 @@ export function ProgramAnalyticsShell({ children }: { children: ReactNode }) {
         </div>
 
         {pageTab === "commissions" ? (
-          <CommissionsAnalyticsCards
-            status={commissionStatus}
-            queryString={commissionsQueryString}
-          />
+          <CommissionsAnalyticsCards />
         ) : pageTab === "applications" ? (
           <ApplicationsAnalyticsCards stage={applicationsStage} />
         ) : (