refactor packages

2024-02-19 10:55:15 +01:00
parent ae8482c1e3
commit 2f3c5ddf76
142 changed files with 2234 additions and 5507 deletions
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
@@ -1,13 +1,16 @@
 'use client';

-import type { RouterOutputs } from '@/app/_trpc/client';
 import { ExpandableListItem } from '@/components/general/ExpandableListItem';
 import { KeyValue, KeyValueSubtle } from '@/components/ui/key-value';
 import { useAppParams } from '@/hooks/useAppParams';
-import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
+import {
+  useEventQueryFilters,
+  useEventQueryNamesFilter,
+} from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 import { getProfileName } from '@/utils/getters';
 import { round } from '@/utils/math';
+import { uniq } from 'ramda';

 import type { IServiceCreateEventPayload } from '@mixan/db';

@@ -40,7 +43,8 @@ export function EventListItem({
  meta,
 }: EventListItemProps) {
  const params = useAppParams();
-  const eventQueryFilters = useEventQueryFilters({ shallow: false });
+  const [, setEvents] = useEventQueryNamesFilter({ shallow: false });
+  const [, setFilter] = useEventQueryFilters({ shallow: false });
  const keyValueList = [
    {
      name: 'Duration',
@@ -50,98 +54,98 @@ export function EventListItem({
      name: 'Referrer',
      value: referrer,
      onClick() {
-        eventQueryFilters.referrer.set(referrer ?? null);
+        setFilter('referrer', referrer ?? '');
      },
    },
    {
      name: 'Referrer name',
      value: referrerName,
      onClick() {
-        eventQueryFilters.referrerName.set(referrerName ?? null);
+        setFilter('referrer_name', referrerName ?? '');
      },
    },
    {
      name: 'Referrer type',
      value: referrerType,
      onClick() {
-        eventQueryFilters.referrerType.set(referrerType ?? null);
+        setFilter('referrer_type', referrerType ?? '');
      },
    },
    {
      name: 'Brand',
      value: brand,
      onClick() {
-        eventQueryFilters.brand.set(brand ?? null);
+        setFilter('brand', brand ?? '');
      },
    },
    {
      name: 'Model',
      value: model,
      onClick() {
-        eventQueryFilters.model.set(model ?? null);
+        setFilter('model', model ?? '');
      },
    },
    {
      name: 'Browser',
      value: browser,
      onClick() {
-        eventQueryFilters.browser.set(browser ?? null);
+        setFilter('browser', browser ?? '');
      },
    },
    {
      name: 'Browser version',
      value: browserVersion,
      onClick() {
-        eventQueryFilters.browserVersion.set(browserVersion ?? null);
+        setFilter('browser_version', browserVersion ?? '');
      },
    },
    {
      name: 'OS',
      value: os,
      onClick() {
-        eventQueryFilters.os.set(os ?? null);
+        setFilter('os', os ?? '');
      },
    },
    {
      name: 'OS cersion',
      value: osVersion,
      onClick() {
-        eventQueryFilters.osVersion.set(osVersion ?? null);
+        setFilter('os_version', osVersion ?? '');
      },
    },
    {
      name: 'City',
      value: city,
      onClick() {
-        eventQueryFilters.city.set(city ?? null);
+        setFilter('city', city ?? '');
      },
    },
    {
      name: 'Region',
      value: region,
      onClick() {
-        eventQueryFilters.region.set(region ?? null);
+        setFilter('region', region ?? '');
      },
    },
    {
      name: 'Country',
      value: country,
      onClick() {
-        eventQueryFilters.country.set(country ?? null);
+        setFilter('country', country ?? '');
      },
    },
    {
      name: 'Continent',
      value: continent,
      onClick() {
-        eventQueryFilters.continent.set(continent ?? null);
+        setFilter('continent', continent ?? '');
      },
    },
    {
      name: 'Device',
      value: device,
      onClick() {
-        eventQueryFilters.device.set(device ?? null);
+        setFilter('device', device ?? '');
      },
    },
  ].filter((item) => typeof item.value === 'string' && item.value);
@@ -156,7 +160,11 @@ export function EventListItem({
  return (
    <ExpandableListItem
      className={cn(meta?.conversion && 'ring-2 ring-primary-500')}
-      title={name.split('_').join(' ')}
+      title={
+        <button onClick={() => setEvents((p) => uniq([...p, name]))}>
+          {name.split('_').join(' ')}
+        </button>
+      }
      content={
        <>
          <KeyValueSubtle name="Time" value={createdAt.toLocaleString()} />
@@ -172,7 +180,7 @@ export function EventListItem({
              name="Path"
              value={path}
              onClick={() => {
-                eventQueryFilters.path.set(path);
+                setFilter('path', path);
              }}
            />
          )}
@@ -191,6 +199,13 @@ export function EventListItem({
                    key={item.name}
                    name={item.name}
                    value={item.value}
+                    onClick={() => {
+                      setFilter(
+                        `properties.${item.name}`,
+                        item.value ? String(item.value) : '',
+                        'is'
+                      );
+                    }}
                  />
                ))}
              </div>
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list.tsx
@@ -5,7 +5,7 @@ import { FullPageEmptyState } from '@/components/FullPageEmptyState';
 import { Pagination } from '@/components/Pagination';
 import { Button } from '@/components/ui/button';
 import { useCursor } from '@/hooks/useCursor';
-import { useEventFilters } from '@/hooks/useEventQueryFilters';
+import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { GanttChartIcon } from 'lucide-react';

 import type { IServiceCreateEventPayload } from '@mixan/db';
@@ -18,8 +18,7 @@ interface EventListProps {
 }
 export function EventList({ data, count }: EventListProps) {
  const { cursor, setCursor } = useCursor();
-  const filters = useEventFilters();
-
+  const [filters] = useEventQueryFilters();
  return (
    <Suspense>
      <div className="p-4">
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/events/page.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/events/page.tsx
@@ -1,7 +1,10 @@
 import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
-import { getEventFilters } from '@/hooks/useEventQueryFilters';
+import {
+  eventQueryFiltersParser,
+  eventQueryNamesFilter,
+} from '@/hooks/useEventQueryFilters';
 import { getExists } from '@/server/pageExists';

 import { getEventList, getEventsCount } from '@mixan/db';
@@ -15,27 +18,9 @@ interface PageProps {
    organizationId: string;
  };
  searchParams: {
+    events?: string;
    cursor?: string;
-    path?: string;
-    device?: string;
-    referrer?: string;
-    referrerName?: string;
-    referrerType?: string;
-    utmSource?: string;
-    utmMedium?: string;
-    utmCampaign?: string;
-    utmContent?: string;
-    utmTerm?: string;
-    continent?: string;
-    country?: string;
-    region?: string;
-    city?: string;
-    browser?: string;
-    browserVersion?: string;
-    os?: string;
-    osVersion?: string;
-    brand?: string;
-    model?: string;
+    f?: string;
  };
 }

@@ -59,53 +44,13 @@ export default async function Page({
      cursor: parseQueryAsNumber(searchParams.cursor),
      projectId,
      take: 50,
-      filters: getEventFilters({
-        path: searchParams.path ?? null,
-        device: searchParams.device ?? null,
-        referrer: searchParams.referrer ?? null,
-        referrerName: searchParams.referrerName ?? null,
-        referrerType: searchParams.referrerType ?? null,
-        utmSource: searchParams.utmSource ?? null,
-        utmMedium: searchParams.utmMedium ?? null,
-        utmCampaign: searchParams.utmCampaign ?? null,
-        utmContent: searchParams.utmContent ?? null,
-        utmTerm: searchParams.utmTerm ?? null,
-        continent: searchParams.continent ?? null,
-        country: searchParams.country ?? null,
-        region: searchParams.region ?? null,
-        city: searchParams.city ?? null,
-        browser: searchParams.browser ?? null,
-        browserVersion: searchParams.browserVersion ?? null,
-        os: searchParams.os ?? null,
-        osVersion: searchParams.osVersion ?? null,
-        brand: searchParams.brand ?? null,
-        model: searchParams.model ?? null,
-      }),
+      events: eventQueryNamesFilter.parse(searchParams.events ?? ''),
+      filters: eventQueryFiltersParser.parse(searchParams.f ?? '') ?? undefined,
    }),
    getEventsCount({
      projectId,
-      filters: getEventFilters({
-        path: searchParams.path ?? null,
-        device: searchParams.device ?? null,
-        referrer: searchParams.referrer ?? null,
-        referrerName: searchParams.referrerName ?? null,
-        referrerType: searchParams.referrerType ?? null,
-        utmSource: searchParams.utmSource ?? null,
-        utmMedium: searchParams.utmMedium ?? null,
-        utmCampaign: searchParams.utmCampaign ?? null,
-        utmContent: searchParams.utmContent ?? null,
-        utmTerm: searchParams.utmTerm ?? null,
-        continent: searchParams.continent ?? null,
-        country: searchParams.country ?? null,
-        region: searchParams.region ?? null,
-        city: searchParams.city ?? null,
-        browser: searchParams.browser ?? null,
-        browserVersion: searchParams.browserVersion ?? null,
-        os: searchParams.os ?? null,
-        osVersion: searchParams.osVersion ?? null,
-        brand: searchParams.brand ?? null,
-        model: searchParams.model ?? null,
-      }),
+      events: eventQueryNamesFilter.parse(searchParams.events ?? ''),
+      filters: eventQueryFiltersParser.parse(searchParams.f ?? '') ?? undefined,
    }),
    getExists(organizationId, projectId),
  ]);
@@ -116,6 +61,7 @@ export default async function Page({
        <OverviewFiltersDrawer
          projectId={projectId}
          nuqsOptions={nuqsOptions}
+          enableEventsFilter
        />
        <OverviewFiltersButtons
          className="p-0 justify-end"