Merge branch 'master' into hosts-support

src/components/hooks/queries/useFilterQuery.ts

@@ -1,14 +1,14 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useApi } from './useApi';
-import { FilterResult, SearchFilter, FilterQueryResult } from 'lib/types';
+import { PageResult, PageParams, FilterQueryResult } from 'lib/types';
 
 export function useFilterQuery<T = any>({
   queryKey,
   queryFn,
   ...options
 }: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): FilterQueryResult<T> {
-  const [params, setParams] = useState<T | SearchFilter>({
+  const [params, setParams] = useState<T | PageParams>({
     query: '',
     page: 1,
   });
@@ -21,7 +21,7 @@ export function useFilterQuery<T = any>({
   });
 
   return {
-    result: data as FilterResult<any>,
+    result: data as PageResult<any>,
     query,
     params,
     setParams,

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,33 +1,17 @@
 import useApi from './useApi';
+import { useFilterParams } from '../useFilterParams';
 import { UseQueryOptions } from '@tanstack/react-query';
-import { useDateRange, useNavigation, useTimezone } from 'components/hooks';
-import { zonedTimeToUtc } from 'date-fns-tz';
 
 export function useWebsiteEvents(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate, unit, offset } = dateRange;
-  const { timezone } = useTimezone();
-  const {
-    query: { url, event },
-  } = useNavigation();
-
-  const params = {
-    startAt: +zonedTimeToUtc(startDate, timezone),
-    endAt: +zonedTimeToUtc(endDate, timezone),
-    unit,
-    offset,
-    timezone,
-    url,
-    event,
-  };
+  const params = useFilterParams(websiteId);
 
   return useQuery({
-    queryKey: ['events', { ...params }],
-    queryFn: () => get(`/websites/${websiteId}/events`, { ...params }),
+    queryKey: ['websites:events', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/events`, params),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteMetrics.ts

@@ -1,12 +1,15 @@
-import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
+import useApi from './useApi';
+import { useFilterParams } from '../useFilterParams';
 
 export function useWebsiteMetrics(
   websiteId: string,
-  params?: { [key: string]: any },
+  type: string,
+  limit: number,
   options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
 
   return useQuery({
     queryKey: [
@@ -14,21 +17,26 @@ export function useWebsiteMetrics(
       {
         websiteId,
         ...params,
+        type,
+        limit,
       },
     ],
     queryFn: async () => {
       const filters = { ...params };
 
-      filters[params.type] = undefined;
+      filters[type] = undefined;
 
       const data = await get(`/websites/${websiteId}/metrics`, {
         ...filters,
+        type,
+        limit,
       });
 
       options?.onDataLoad?.(data);
 
       return data;
     },
+    enabled: !!websiteId,
     ...options,
   });
 }

src/components/hooks/queries/useWebsitePageviews.ts

@@ -1,35 +1,18 @@
-import { zonedTimeToUtc } from 'date-fns-tz';
-import { useApi, useDateRange, useNavigation, useTimezone } from 'components/hooks';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { useApi } from './useApi';
+import { useFilterParams } from '..//useFilterParams';
 
-export function useWebsitePageviews(websiteId: string, options?: { [key: string]: string }) {
+export function useWebsitePageviews(
+  websiteId: string,
+  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+) {
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate, unit } = dateRange;
-  const { timezone } = useTimezone();
-  const {
-    query: { url, referrer, host, os, browser, device, country, region, city, title },
-  } = useNavigation();
-
-  const params = {
-    startAt: +zonedTimeToUtc(startDate, timezone),
-    endAt: +zonedTimeToUtc(endDate, timezone),
-    unit,
-    timezone,
-    url,
-    referrer,
-    host,
-    os,
-    browser,
-    device,
-    country,
-    region,
-    city,
-    title,
-  };
+  const params = useFilterParams(websiteId);
 
   return useQuery({
     queryKey: ['websites:pageviews', { websiteId, ...params }],
     queryFn: () => get(`/websites/${websiteId}/pageviews`, params),
+    enabled: !!websiteId,
     ...options,
   });
 }

src/components/hooks/queries/useWebsiteStats.ts

@@ -1,31 +1,14 @@
-import { useApi, useDateRange, useNavigation } from 'components/hooks';
+import { useApi } from './useApi';
+import { useFilterParams } from '../useFilterParams';
 
 export function useWebsiteStats(websiteId: string, options?: { [key: string]: string }) {
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate } = dateRange;
-  const {
-    query: { url, referrer, host, title, os, browser, device, country, region, city },
-  } = useNavigation();
-
-  const params = {
-    startAt: +startDate,
-    endAt: +endDate,
-    url,
-    referrer,
-    host,
-    title,
-    os,
-    browser,
-    device,
-    country,
-    region,
-    city,
-  };
+  const params = useFilterParams(websiteId);
 
   return useQuery({
     queryKey: ['websites:stats', { websiteId, ...params }],
     queryFn: () => get(`/websites/${websiteId}/stats`, params),
+    enabled: !!websiteId,
     ...options,
   });
 }

src/components/hooks/useFilterParams.ts

@@ -0,0 +1,32 @@
+import { useNavigation } from './useNavigation';
+import { useDateRange } from './useDateRange';
+import { useTimezone } from './useTimezone';
+import { zonedTimeToUtc } from 'date-fns-tz';
+
+export function useFilterParams(websiteId: string) {
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, offset } = dateRange;
+  const { timezone } = useTimezone();
+  const {
+    query: { url, referrer, title, query, os, browser, device, country, region, city, event },
+  } = useNavigation();
+
+  return {
+    startAt: +zonedTimeToUtc(startDate, timezone),
+    endAt: +zonedTimeToUtc(endDate, timezone),
+    unit,
+    offset,
+    timezone,
+    url,
+    referrer,
+    title,
+    query,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+    event,
+  };
+}

src/components/messages.ts

@@ -29,6 +29,7 @@ export const labels = defineMessages({
   createdBy: { id: 'label.created-by', defaultMessage: 'Created By' },
   edit: { id: 'label.edit', defaultMessage: 'Edit' },
   name: { id: 'label.name', defaultMessage: 'Name' },
+  manager: { id: 'label.manager', defaultMessage: 'Manager' },
   member: { id: 'label.member', defaultMessage: 'Member' },
   members: { id: 'label.members', defaultMessage: 'Members' },
   accessCode: { id: 'label.access-code', defaultMessage: 'Access code' },
@@ -43,6 +44,7 @@ export const labels = defineMessages({
   settings: { id: 'label.settings', defaultMessage: 'Settings' },
   owner: { id: 'label.owner', defaultMessage: 'Owner' },
   teamOwner: { id: 'label.team-owner', defaultMessage: 'Team owner' },
+  teamManager: { id: 'label.team-manager', defaultMessage: 'Team manager' },
   teamMember: { id: 'label.team-member', defaultMessage: 'Team member' },
   teamViewOnly: { id: 'label.team-view-only', defaultMessage: 'Team view only' },
   enableShareUrl: { id: 'label.enable-share-url', defaultMessage: 'Enable share URL' },

src/components/metrics/MetricsTable.tsx

@@ -6,7 +6,6 @@ import LinkButton from 'components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import { percentFilter } from 'lib/filters';
 import {
-  useDateRange,
   useNavigation,
   useWebsiteMetrics,
   useMessages,
@@ -45,35 +44,14 @@ export function MetricsTable({
 }: MetricsTableProps) {
   const [search, setSearch] = useState('');
   const { formatValue } = useFormat();
-  const [{ startDate, endDate }] = useDateRange(websiteId);
-  const {
-    renderUrl,
-    query: { url, referrer, host, title, os, browser, device, country, region, city },
-  } = useNavigation();
+  const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetrics(
-    websiteId,
-    {
-      type,
-      startAt: +startDate,
-      endAt: +endDate,
-      url,
-      referrer,
-      host,
-      os,
-      title,
-      browser,
-      device,
-      country,
-      region,
-      city,
-      limit,
-      search,
-    },
-    { retryDelay: delay || DEFAULT_ANIMATION_DURATION, onDataLoad },
-  );
+  const { data, isLoading, isFetched, error } = useWebsiteMetrics(websiteId, type, limit, {
+    retryDelay: delay || DEFAULT_ANIMATION_DURATION,
+    onDataLoad,
+  });
 
   const filteredData = useMemo(() => {
     if (data) {

src/components/metrics/PagesTable.tsx

@@ -38,7 +38,11 @@ export function PagesTable({ allowFilter, domainName, ...props }: PagesTableProp
         id={view}
         value={x}
         label={!x && formatMessage(labels.none)}
-        externalUrl={`${domainName.startsWith('http') ? domainName : `https://${domainName}`}${x}`}
+        externalUrl={
+          view === 'url'
+            ? `${domainName.startsWith('http') ? domainName : `https://${domainName}`}${x}`
+            : null
+        }
       />
     );
   };