Merge branch 'dev' into master

src/components/hooks/queries/useConfig.ts

@@ -1,23 +1,16 @@
 import { useEffect } from 'react';
-import useStore, { setConfig } from 'store/app';
-import { useApi } from '../useApi';
-
-let loading = false;
+import useStore, { setConfig } from '@/store/app';
+import { getConfig } from '@/app/actions/getConfig';
 
 export function useConfig() {
   const { config } = useStore();
-  const { get } = useApi();
-  const configUrl = process.env.configUrl;
 
   async function loadConfig() {
-    const data = await get(configUrl);
-    loading = false;
-    setConfig(data);
+    setConfig(await getConfig());
   }
 
   useEffect(() => {
-    if (!config && !loading && configUrl) {
-      loading = true;
+    if (!config) {
       loadConfig();
     }
   }, []);

src/components/hooks/queries/useLogin.ts

@@ -1,5 +1,5 @@
 import { UseQueryResult } from '@tanstack/react-query';
-import useStore, { setUser } from 'store/app';
+import useStore, { setUser } from '@/store/app';
 import { useApi } from '../useApi';
 
 const selector = (state: { user: any }) => state.user;

src/components/hooks/queries/useRealtime.ts

@@ -1,6 +1,6 @@
-import { useTimezone } from 'components/hooks';
-import { REALTIME_INTERVAL } from 'lib/constants';
-import { RealtimeData } from 'lib/types';
+import { useTimezone } from '@/components/hooks/useTimezone';
+import { REALTIME_INTERVAL } from '@/lib/constants';
+import { RealtimeData } from '@/lib/types';
 import { useApi } from '../useApi';
 
 export function useRealtime(websiteId: string) {

src/components/hooks/queries/useReport.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useApi } from '../useApi';
 import { useTimezone } from '../useTimezone';
 import { useMessages } from '../useMessages';
+import { parseDateRange } from '@/lib/date';
 
 export function useReport(
   reportId: string,
@@ -24,14 +25,12 @@ export function useReport(
     const data: any = await get(`/reports/${id}`);
 
     const { dateRange } = data?.parameters || {};
-    const { startDate, endDate } = dateRange || {};
 
-    if (startDate && endDate) {
-      dateRange.startDate = new Date(startDate);
-      dateRange.endDate = new Date(endDate);
-    }
-
-    data.parameters = { ...defaultParameters?.parameters, ...data.parameters };
+    data.parameters = {
+      ...defaultParameters?.parameters,
+      ...data.parameters,
+      dateRange: parseDateRange(dateRange.value),
+    };
 
     setReport(data);
   };

src/components/hooks/queries/useSessionDataProperties.ts

@@ -10,7 +10,7 @@ export function useSessionDataProperties(
   const params = useFilterParams(websiteId);
 
   return useQuery<any>({
-    queryKey: ['websites:event-data:properties', { websiteId, ...params }],
+    queryKey: ['websites:session-data:properties', { websiteId, ...params }],
     queryFn: () => get(`/websites/${websiteId}/session-data/properties`, { ...params }),
     enabled: !!websiteId,
     ...options,

src/components/hooks/queries/useShareToken.ts

@@ -1,4 +1,4 @@
-import useStore, { setShareToken } from 'store/app';
+import useStore, { setShareToken } from '@/store/app';
 import { useApi } from '../useApi';
 
 const selector = (state: { shareToken: string }) => state.shareToken;

src/components/hooks/queries/useTeams.ts

@@ -11,6 +11,7 @@ export function useTeams(userId: string) {
     queryFn: (params: any) => {
       return get(`/users/${userId}/teams`, params);
     },
+    enabled: !!userId,
   });
 }
 

src/components/hooks/queries/useWebsitePageviews.ts

@@ -1,6 +1,6 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
-import { useFilterParams } from '..//useFilterParams';
+import { useFilterParams } from '../useFilterParams';
 
 export function useWebsitePageviews(
   websiteId: string,

src/components/hooks/queries/useWebsiteSessions.ts

@@ -1,7 +1,7 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import useModified from '../useModified';
-import { useFilterParams } from 'components/hooks/useFilterParams';
+import { useFilterParams } from '@/components/hooks/useFilterParams';
 
 export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
   const { get } = useApi();

src/components/hooks/queries/useWebsiteSessionsWeekly.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import useModified from '../useModified';
-import { useFilterParams } from 'components/hooks/useFilterParams';
+import { useFilterParams } from '@/components/hooks/useFilterParams';
 
 export function useWebsiteSessionsWeekly(
   websiteId: string,

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,5 +1,6 @@
 import { useApi } from '../useApi';
-import { useCountryNames, useRegionNames } from 'components/hooks';
+import { useCountryNames } from '@/components/hooks/useCountryNames';
+import { useRegionNames } from '@/components/hooks/useRegionNames';
 import useLocale from '../useLocale';
 
 export function useWebsiteValues({

src/components/hooks/useApi.ts

@@ -1,20 +1,78 @@
+import { useCallback } from 'react';
 import * as reactQuery from '@tanstack/react-query';
-import { useApi as nextUseApi } from 'next-basics';
-import { getClientAuthToken } from 'lib/client';
-import { SHARE_TOKEN_HEADER } from 'lib/constants';
-import useStore from 'store/app';
+import { getClientAuthToken } from '@/lib/client';
+import { SHARE_TOKEN_HEADER } from '@/lib/constants';
+import { httpGet, httpPost, httpPut, httpDelete, FetchResponse } from '@/lib/fetch';
+import useStore from '@/store/app';
 
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
+async function handleResponse(res: FetchResponse): Promise<any> {
+  if (!res.ok) {
+    return Promise.reject(new Error(res.error));
+  }
+  return Promise.resolve(res.data);
+}
+
+function handleError(err: Error | string) {
+  return Promise.reject((err as Error)?.message || err || null);
+}
+
 export function useApi() {
   const shareToken = useStore(selector);
 
-  const { get, post, put, del } = nextUseApi(
-    { authorization: `Bearer ${getClientAuthToken()}`, [SHARE_TOKEN_HEADER]: shareToken?.token },
-    process.env.basePath,
-  );
+  const defaultHeaders = {
+    authorization: `Bearer ${getClientAuthToken()}`,
+    [SHARE_TOKEN_HEADER]: shareToken?.token,
+  };
+  const basePath = process.env.basePath;
 
-  return { get, post, put, del, ...reactQuery };
+  const getUrl = (url: string) => {
+    return url.startsWith('http') ? url : `${basePath || ''}/api${url}`;
+  };
+
+  const getHeaders = (headers: any = {}) => {
+    return { ...defaultHeaders, ...headers };
+  };
+
+  return {
+    get: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpGet(getUrl(url), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
+      },
+      [httpGet],
+    ),
+
+    post: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpPost(getUrl(url), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
+      },
+      [httpPost],
+    ),
+
+    put: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpPut(getUrl(url), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
+      },
+      [httpPut],
+    ),
+
+    del: useCallback(
+      async (url: string, params: object = {}, headers: object = {}) => {
+        return httpDelete(getUrl(url), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
+      },
+      [httpDelete],
+    ),
+    ...reactQuery,
+  };
 }
 
 export default useApi;

src/components/hooks/useCountryNames.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { httpGet } from 'next-basics';
+import { httpGet } from '@/lib/fetch';
 import enUS from '../../../public/intl/country/en-US.json';
 
 const countryNames = {

src/components/hooks/useDateRange.ts

@@ -1,9 +1,9 @@
-import { getMinimumUnit, parseDateRange } from 'lib/date';
-import { setItem } from 'next-basics';
-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 { getMinimumUnit, parseDateRange } from '@/lib/date';
+import { setItem } from '@/lib/storage';
+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 './useApi';
 

src/components/hooks/useFilters.ts

@@ -1,5 +1,5 @@
 import { useMessages } from './useMessages';
-import { OPERATORS } from 'lib/constants';
+import { OPERATORS } from '@/lib/constants';
 
 export function useFilters() {
   const { formatMessage, labels } = useMessages();

src/components/hooks/useFormat.ts

@@ -1,5 +1,5 @@
 import useMessages from './useMessages';
-import { BROWSERS, OS_NAMES } from 'lib/constants';
+import { BROWSERS, OS_NAMES } from '@/lib/constants';
 import useLocale from './useLocale';
 import useCountryNames from './useCountryNames';
 import useLanguageNames from './useLanguageNames';

src/components/hooks/useLanguageNames.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { httpGet } from 'next-basics';
+import { httpGet } from '@/lib/fetch';
 import enUS from '../../../public/intl/language/en-US.json';
 
 const languageNames = {

src/components/hooks/useLocale.ts

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
-import { httpGet, setItem } from 'next-basics';
-import { LOCALE_CONFIG } from 'lib/constants';
-import { getDateLocale, getTextDirection } from 'lib/lang';
-import useStore, { setLocale } from 'store/app';
+import { httpGet } from '@/lib/fetch';
+import { setItem } from '@/lib/storage';
+import { LOCALE_CONFIG } from '@/lib/constants';
+import { getDateLocale, getTextDirection } from '@/lib/lang';
+import useStore, { setLocale } from '@/store/app';
 import { useForceUpdate } from './useForceUpdate';
 import enUS from '../../../public/intl/country/en-US.json';
 
@@ -19,13 +20,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 { data } = await httpGet(`${process.env.basePath || ''}/intl/messages/${locale}.json`);
 
-    if (ok) {
-      messages[locale] = data;
-    }
+    messages[locale] = data;
   }
 
   async function saveLocale(value: string) {

src/components/hooks/useMessages.ts

@@ -1,5 +1,5 @@
-import { useIntl, FormattedMessage } from 'react-intl';
-import { messages, labels } from 'components/messages';
+import { useIntl } from 'react-intl';
+import { messages, labels } from '@/components/messages';
 
 export function useMessages(): any {
   const intl = useIntl();
@@ -21,7 +21,7 @@ export function useMessages(): any {
     return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
   };
 
-  return { formatMessage, FormattedMessage, messages, labels, getMessage };
+  return { formatMessage, messages, labels, getMessage };
 }
 
 export default useMessages;

src/components/hooks/useModified.ts

@@ -1,4 +1,4 @@
-import useStore from 'store/modified';
+import useStore from '@/store/modified';
 
 export function useModified(key?: string) {
   const modified = useStore(state => state?.[key]);

src/components/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { buildUrl, safeDecodeURIComponent } from 'next-basics';
+import { buildUrl } from '@/lib/url';
 
 export function useNavigation(): {
   pathname: string;
@@ -16,7 +16,7 @@ export function useNavigation(): {
     const obj = {};
 
     for (const [key, value] of params.entries()) {
-      obj[key] = safeDecodeURIComponent(value);
+      obj[key] = value;
     }
 
     return obj;

src/components/hooks/usePagedQuery.ts

@@ -1,6 +1,6 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState } from 'react';
-import { PageResult, PageParams, PagedQueryResult } from 'lib/types';
+import { PageResult, PageParams, PagedQueryResult } from '@/lib/types';
 import { useApi } from './useApi';
 import { useNavigation } from './useNavigation';
 
@@ -11,7 +11,7 @@ export function usePagedQuery<T = any>({
 }: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): PagedQueryResult<T> {
   const { query: queryParams } = useNavigation();
   const [params, setParams] = useState<PageParams>({
-    query: '',
+    search: '',
     page: +queryParams.page || 1,
   });
 

src/components/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
-import useStore, { setTheme } from 'store/app';
-import { getItem, setItem } from 'next-basics';
-import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from 'lib/constants';
+import useStore, { setTheme } from '@/store/app';
+import { getItem, setItem } from '@/lib/storage';
+import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from '@/lib/constants';
 import { colord } from 'colord';
 
 const selector = (state: { theme: string }) => state.theme;

src/components/hooks/useTimezone.ts

@@ -1,5 +1,5 @@
-import { setItem } from 'next-basics';
-import { TIMEZONE_CONFIG } from 'lib/constants';
+import { setItem } from '@/lib/storage';
+import { TIMEZONE_CONFIG } from '@/lib/constants';
 import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
 import useStore, { setTimezone } from 'store/app';
 import useLocale from './useLocale';