Updated hooks. Changed url, host to path, hostname.

src/components/hooks/useDateRange.ts

@@ -1,19 +1,25 @@
 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 { useWebsites, setWebsiteDateRange, setWebsiteDateCompare } from '@/store/websites';
-import { useApp, setDateRange } from '@/store/app';
+import { setWebsiteDateCompare, setWebsiteDateRange, useWebsites } from '@/store/websites';
+import { setDateRange, useApp } from '@/store/app';
 import { DateRange } from '@/lib/types';
 import { useLocale } from './useLocale';
 import { useApi } from './useApi';
+import { useNavigation } from './useNavigation';
 
 export function useDateRange(websiteId?: string) {
   const { get } = useApi();
   const { locale } = useLocale();
+  const {
+    query: { date },
+  } = useNavigation();
   const websiteConfig = useWebsites(state => state[websiteId]?.dateRange);
-  const defaultConfig = DEFAULT_DATE_RANGE;
   const globalConfig = useApp(state => state.dateRange);
-  const dateRange = parseDateRange(websiteConfig || globalConfig || defaultConfig, locale);
+  const dateRange = parseDateRange(
+    date || websiteConfig || globalConfig || DEFAULT_DATE_RANGE,
+    locale,
+  );
   const dateCompare = useWebsites(state => state[websiteId]?.dateCompare || DEFAULT_DATE_COMPARE);
 
   const saveDateRange = async (value: DateRange | string) => {

src/components/hooks/useFields.ts

@@ -4,17 +4,17 @@ export function useFields() {
   const { formatMessage, labels } = useMessages();
 
   const fields = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
+    { name: 'path', type: 'string', label: formatMessage(labels.path) },
     { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
     { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
+    //{ name: 'query', type: 'string', label: formatMessage(labels.query) },
     { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
     { name: 'os', type: 'string', label: formatMessage(labels.os) },
     { name: 'device', type: 'string', label: formatMessage(labels.device) },
     { name: 'country', type: 'string', label: formatMessage(labels.country) },
     { name: 'region', type: 'string', label: formatMessage(labels.region) },
     { name: 'city', type: 'string', label: formatMessage(labels.city) },
-    { name: 'host', type: 'string', label: formatMessage(labels.host) },
+    { name: 'hostname', type: 'string', label: formatMessage(labels.hostname) },
     { name: 'tag', type: 'string', label: formatMessage(labels.tag) },
   ];
 

src/components/hooks/useFilters.ts

@@ -1,45 +1,32 @@
-import { useMessages } from './useMessages';
-import { useNavigation } from '@/components/hooks/useNavigation';
 import { FILTER_COLUMNS, OPERATORS } from '@/lib/constants';
 import { safeDecodeURIComponent } from '@/lib/url';
+import { useMessages } from './useMessages';
+import { useNavigation } from './useNavigation';
+import { useFields } from './useFields';
 
 export function useFilters() {
   const { formatMessage, labels } = useMessages();
   const { query } = useNavigation();
-
-  const fields = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-    { name: 'host', type: 'string', label: formatMessage(labels.host) },
-    { name: 'tag', type: 'string', label: formatMessage(labels.tag) },
-  ];
+  const { fields } = useFields();
 
   const operators = [
-    { name: 'eq', type: 'string', label: 'Is' },
-    { name: 'neq', type: 'string', label: 'Is not' },
-    { name: 'c', type: 'string', label: 'Contains' },
-    { name: 'dnc', type: 'string', label: 'Does not contain' },
-    { name: 'c', type: 'array', label: 'Contains' },
-    { name: 'dnc', type: 'array', label: 'Does not contain' },
-    { name: 't', type: 'boolean', label: 'True' },
-    { name: 'f', type: 'boolean', label: 'False' },
-    { name: 'eq', type: 'number', label: 'Is' },
-    { name: 'neq', type: 'number', label: 'Is not' },
-    { name: 'gt', type: 'number', label: 'Greater than' },
-    { name: 'lt', type: 'number', label: 'Less than' },
-    { name: 'gte', type: 'number', label: 'Greater than or equals' },
-    { name: 'lte', type: 'number', label: 'Less than or equals' },
-    { name: 'bf', type: 'date', label: 'Before' },
-    { name: 'af', type: 'date', label: 'After' },
-    { name: 'eq', type: 'uuid', label: 'Is' },
+    { name: 'eq', type: 'string', label: formatMessage(labels.is) },
+    { name: 'neq', type: 'string', label: formatMessage(labels.isNot) },
+    { name: 'c', type: 'string', label: formatMessage(labels.contains) },
+    { name: 'dnc', type: 'string', label: formatMessage(labels.doesNotContain) },
+    { name: 'i', type: 'array', label: formatMessage(labels.includes) },
+    { name: 'dni', type: 'array', label: formatMessage(labels.doesNotInclude) },
+    { name: 't', type: 'boolean', label: formatMessage(labels.isTrue) },
+    { name: 'f', type: 'boolean', label: formatMessage(labels.isFalse) },
+    { name: 'eq', type: 'number', label: formatMessage(labels.is) },
+    { name: 'neq', type: 'number', label: formatMessage(labels.isNot) },
+    { name: 'gt', type: 'number', label: formatMessage(labels.greaterThan) },
+    { name: 'lt', type: 'number', label: formatMessage(labels.lessThan) },
+    { name: 'gte', type: 'number', label: formatMessage(labels.greaterThanEquals) },
+    { name: 'lte', type: 'number', label: formatMessage(labels.lessThanEquals) },
+    { name: 'bf', type: 'date', label: formatMessage(labels.before) },
+    { name: 'af', type: 'date', label: formatMessage(labels.after) },
+    { name: 'eq', type: 'uuid', label: formatMessage(labels.is) },
   ];
 
   const operatorLabels = {

src/components/hooks/useNavigation.ts

@@ -1,31 +1,24 @@
-import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from '@/lib/url';
 
 export function useNavigation() {
   const router = useRouter();
   const pathname = usePathname();
-  const params = useSearchParams();
+  const searchParams = useSearchParams();
   const [, teamId] = pathname.match(/\/teams\/([a-f0-9-]+)/) || [];
   const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];
+  const query = Object.fromEntries(searchParams);
 
-  const query = useMemo<{ [key: string]: any }>(() => {
-    const obj = {};
-
-    for (const [key, value] of params.entries()) {
-      obj[key] = value;
-    }
-
-    return obj;
-  }, [params]);
-
-  function renderUrl(params: any) {
+  const updateParams = (params?: { [key: string]: string | number }) => {
     return !params ? pathname : buildUrl(pathname, { ...query, ...params });
-  }
+  };
 
-  function renderTeamUrl(url: string) {
-    return teamId ? `/teams/${teamId}${url}` : url;
-  }
+  const renderUrl = (path: string, params?: { [key: string]: string | number } | false) => {
+    return buildUrl(
+      teamId ? `/teams/${teamId}${path}` : path,
+      params === false ? {} : { ...query, ...params },
+    );
+  };
 
-  return { pathname, query, router, renderUrl, renderTeamUrl, teamId, websiteId };
+  return { router, pathname, searchParams, query, teamId, websiteId, updateParams, renderUrl };
 }