Redo events tab to show all events.

src/components/common/DataTable.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Banner, Loading, SearchField } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages, useNavigation } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
 import { FilterQueryResult } from 'lib/types';
@@ -35,6 +35,7 @@ export function DataTable({
   const { query } = params || {};
   const hasData = Boolean(!isLoading && data?.length);
   const noResults = Boolean(!isLoading && query && !hasData);
+  const { router, renderUrl } = useNavigation();
 
   const handleSearch = (query: string) => {
     setParams({ ...params, query, page: params.page ? page : 1 });
@@ -42,6 +43,7 @@ export function DataTable({
 
   const handlePageChange = (page: number) => {
     setParams({ ...params, query, page });
+    router.push(renderUrl({ page }));
   };
 
   if (error) {

src/components/hooks/queries/useFilterQuery.ts

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

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,17 +1,19 @@
 import useApi from './useApi';
-import { useFilterParams } from '../useFilterParams';
 import { UseQueryOptions } from '@tanstack/react-query';
+import { useFilterParams } from '../useFilterParams';
+import { useFilterQuery } from 'components/hooks';
 
 export function useWebsiteEvents(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
-  const { get, useQuery } = useApi();
+  const { get } = useApi();
   const params = useFilterParams(websiteId);
 
-  return useQuery({
+  return useFilterQuery({
     queryKey: ['websites:events', { websiteId, ...params }],
-    queryFn: () => get(`/websites/${websiteId}/events`, params),
+    queryFn: pageParams =>
+      get(`/websites/${websiteId}/events`, { ...params, ...pageParams, pageSize: 20 }),
     enabled: !!websiteId,
     ...options,
   });

src/components/messages.ts

@@ -130,6 +130,7 @@ export const labels = defineMessages({
   selectRole: { id: 'label.select-role', defaultMessage: 'Select role' },
   selectDate: { id: 'label.select-date', defaultMessage: 'Select date' },
   all: { id: 'label.all', defaultMessage: 'All' },
+  session: { id: 'label.session', defaultMessage: 'Session' },
   sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
   pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
   activityLog: { id: 'label.activity-log', defaultMessage: 'Activity log' },
@@ -275,6 +276,7 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
+  path: { id: 'label.path', defaultMessage: 'Path' },
 });
 
 export const messages = defineMessages({