Merge branch 'dev' into hosts-support

src/components/hooks/queries/useRealtime.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { RealtimeData } from 'lib/types';
-import { useApi } from 'components/hooks';
+import { useApi } from './useApi';
 import { REALTIME_INTERVAL, REALTIME_RANGE } from 'lib/constants';
 import { startOfMinute, subMinutes } from 'date-fns';
 import { percentFilter } from 'lib/filters';

src/components/hooks/queries/useWebsiteMetrics.ts

@@ -4,8 +4,7 @@ import { useFilterParams } from '../useFilterParams';
 
 export function useWebsiteMetrics(
   websiteId: string,
-  type: string,
-  limit: number,
+  queryParams: { type: string; limit: number; search: string; startAt?: number; endAt?: number },
   options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
@@ -17,19 +16,17 @@ export function useWebsiteMetrics(
       {
         websiteId,
         ...params,
-        type,
-        limit,
+        ...queryParams,
       },
     ],
     queryFn: async () => {
       const filters = { ...params };
 
-      filters[type] = undefined;
+      filters[queryParams.type] = undefined;
 
       const data = await get(`/websites/${websiteId}/metrics`, {
         ...filters,
-        type,
-        limit,
+        ...queryParams,
       });
 
       options?.onDataLoad?.(data);

src/components/hooks/queries/useWebsitePageviews.ts

@@ -4,14 +4,15 @@ import { useFilterParams } from '..//useFilterParams';
 
 export function useWebsitePageviews(
   websiteId: string,
+  compare?: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 
   return useQuery({
-    queryKey: ['websites:pageviews', { websiteId, ...params }],
-    queryFn: () => get(`/websites/${websiteId}/pageviews`, params),
+    queryKey: ['websites:pageviews', { websiteId, ...params, compare }],
+    queryFn: () => get(`/websites/${websiteId}/pageviews`, { ...params, compare }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteStats.ts

@@ -1,13 +1,17 @@
 import { useApi } from './useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteStats(websiteId: string, options?: { [key: string]: string }) {
+export function useWebsiteStats(
+  websiteId: string,
+  compare?: string,
+  options?: { [key: string]: string },
+) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 
   return useQuery({
-    queryKey: ['websites:stats', { websiteId, ...params }],
-    queryFn: () => get(`/websites/${websiteId}/stats`, params),
+    queryKey: ['websites:stats', { websiteId, ...params, compare }],
+    queryFn: () => get(`/websites/${websiteId}/stats`, { ...params, compare }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,4 +1,4 @@
-import { useApi } from 'components/hooks';
+import { useApi } from './useApi';
 
 export function useWebsiteValues({
   websiteId,

src/components/hooks/useCountryNames.ts

@@ -10,7 +10,7 @@ export function useCountryNames(locale: string) {
   const [list, setList] = useState(countryNames[locale] || enUS);
 
   async function loadData(locale: string) {
-    const { data } = await httpGet(`${process.env.basePath}/intl/country/${locale}.json`);
+    const { data } = await httpGet(`${process.env.basePath || ''}/intl/country/${locale}.json`);
 
     if (data) {
       countryNames[locale] = data;

src/components/hooks/useDateRange.ts

@@ -1,19 +1,25 @@
 import { getMinimumUnit, parseDateRange } from 'lib/date';
 import { setItem } from 'next-basics';
-import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
-import websiteStore, { setWebsiteDateRange } from 'store/websites';
+import { DATE_RANGE_CONFIG, DEFAULT_DATE_COMPARE, DEFAULT_DATE_RANGE } from 'lib/constants';
+import websiteStore, { setWebsiteDateRange, setWebsiteDateCompare } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
 import { DateRange } from 'lib/types';
 import { useLocale } from './useLocale';
 import { useApi } from './queries/useApi';
 
-export function useDateRange(websiteId?: string): [DateRange, (value: string | DateRange) => void] {
+export function useDateRange(websiteId?: string): {
+  dateRange: DateRange;
+  saveDateRange: (value: string | DateRange) => void;
+  dateCompare: string;
+  saveDateCompare: (value: string) => void;
+} {
   const { get } = useApi();
   const { locale } = useLocale();
   const websiteConfig = websiteStore(state => state[websiteId]?.dateRange);
   const defaultConfig = DEFAULT_DATE_RANGE;
   const globalConfig = appStore(state => state.dateRange);
   const dateRange = parseDateRange(websiteConfig || globalConfig || defaultConfig, locale);
+  const dateCompare = websiteStore(state => state[websiteId]?.dateCompare || DEFAULT_DATE_COMPARE);
 
   const saveDateRange = async (value: DateRange | string) => {
     if (websiteId) {
@@ -45,7 +51,11 @@ export function useDateRange(websiteId?: string): [DateRange, (value: string | D
     }
   };
 
-  return [dateRange, saveDateRange];
+  const saveDateCompare = (value: string) => {
+    setWebsiteDateCompare(websiteId, value);
+  };
+
+  return { dateRange, saveDateRange, dateCompare, saveDateCompare };
 }
 
 export default useDateRange;

src/components/hooks/useFilterParams.ts

@@ -4,8 +4,8 @@ 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 { dateRange } = useDateRange(websiteId);
+  const { startDate, endDate, unit } = dateRange;
   const { timezone } = useTimezone();
   const {
     query: { url, referrer, title, query, os, browser, device, country, region, city, event },
@@ -15,7 +15,6 @@ export function useFilterParams(websiteId: string) {
     startAt: +zonedTimeToUtc(startDate, timezone),
     endAt: +zonedTimeToUtc(endDate, timezone),
     unit,
-    offset,
     timezone,
     url,
     referrer,

src/components/hooks/useLanguageNames.ts

@@ -10,7 +10,7 @@ export function useLanguageNames(locale) {
   const [list, setList] = useState(languageNames[locale] || enUS);
 
   async function loadData(locale) {
-    const { data } = await httpGet(`${process.env.basePath}/intl/language/${locale}.json`);
+    const { data } = await httpGet(`${process.env.basePath || ''}/intl/language/${locale}.json`);
 
     if (data) {
       languageNames[locale] = data;

src/components/hooks/useLocale.ts

@@ -19,7 +19,9 @@ export function useLocale() {
   const dateLocale = getDateLocale(locale);
 
   async function loadMessages(locale: string) {
-    const { ok, data } = await httpGet(`${process.env.basePath}/intl/messages/${locale}.json`);
+    const { ok, data } = await httpGet(
+      `${process.env.basePath || ''}/intl/messages/${locale}.json`,
+    );
 
     if (ok) {
       messages[locale] = data;