Extract useData

Automattic · Feb 6, 2025 · 2519725 · 2519725
1 parent 6116279
commit 2519725
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 80 deletions.
diff --git a/client/data/hosting/use-site-logs-query.ts b/client/data/hosting/use-site-logs-query.ts
@@ -36,7 +36,7 @@ export interface PHPLog {
 
 export type SiteLogsData = {
 	total_results: number;
-	logs: Record< string, ServerLog | PHPLog >[];
+	logs: ( ServerLog | PHPLog )[];
 	scroll_id: string | null;
 	has_more: boolean;
 };

diff --git a/client/sites/tools/logs/components/site-logs-header/index.tsx b/client/sites/tools/logs/components/site-logs-header/index.tsx
@@ -3,8 +3,8 @@ import { translate, useTranslate } from 'i18n-calypso';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import NavigationHeader from 'calypso/components/navigation-header';
 import { LogType } from 'calypso/data/hosting/use-site-logs-query';
-import { buildFilterParam } from 'calypso/sites/tools/logs';
 import { useSiteLogsDownloader } from 'calypso/sites/tools/logs/hooks/use-site-logs-downloader';
+import { buildFilter } from 'calypso/sites/tools/logs/hooks/use-view';
 import type { Moment } from 'moment';
 
 import './style.scss';
@@ -81,7 +81,7 @@ export function SiteLogsHeader( {
 							logType,
 							startDateTime,
 							endDateTime,
-							filter: buildFilterParam( logType, severity, requestType, requestStatus ),
+							filter: buildFilter( logType, severity, requestType, requestStatus ),
 						} )
 					}
 				>

diff --git a/client/sites/tools/logs/hooks/use-data.ts b/client/sites/tools/logs/hooks/use-data.ts
@@ -0,0 +1,52 @@
+import {
+	LogType,
+	PHPLog,
+	ServerLog,
+	useSiteLogsQuery,
+} from 'calypso/data/hosting/use-site-logs-query';
+import { useSelector } from 'calypso/state';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import { buildFilter, getFilterValue } from './use-view';
+import type { View } from '@wordpress/dataviews';
+import type { Moment } from 'moment';
+
+const EMPTY_ARRAY: ( ServerLog | PHPLog )[] = [];
+
+const useData = ( {
+	view,
+	logType,
+	dateRange,
+}: {
+	view: View;
+	logType: LogType;
+	dateRange: { startTime: Moment; endTime: Moment };
+} ) => {
+	const siteId = useSelector( getSelectedSiteId );
+	const severity = getFilterValue( view, 'severity' );
+	const status = getFilterValue( view, 'status' );
+	const requestType = getFilterValue( view, 'request_type' );
+
+	const { data, isFetching } = useSiteLogsQuery( siteId, {
+		logType,
+		start: dateRange.startTime.unix(),
+		end: dateRange.endTime.unix(),
+		filter: buildFilter( logType, severity, requestType, status ),
+		sortOrder: view.sort?.direction,
+		pageSize: view.perPage,
+		pageIndex: view.page,
+	} );
+
+	return {
+		data: data?.logs ? ( data.logs as ( PHPLog | ServerLog )[] ) : EMPTY_ARRAY,
+		paginationInfo: {
+			totalItems: data?.total_results || 0,
+			totalPages:
+				!! data?.total_results && !! view.perPage
+					? Math.ceil( data.total_results / view.perPage )
+					: 0,
+		},
+		isLoading: isFetching,
+	};
+};
+
+export default useData;
diff --git a/client/sites/tools/logs/hooks/use-view.ts b/client/sites/tools/logs/hooks/use-view.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { LogType } from 'calypso/data/hosting/use-site-logs-query';
+import { FilterType, LogType } from 'calypso/data/hosting/use-site-logs-query';
 import type { View } from '@wordpress/dataviews';
 
 const getSortField = ( logType: LogType ) => ( logType === 'php' ? 'timestamp' : 'date' );
@@ -9,6 +9,34 @@ const getVisibleFields = ( logType: LogType ) => {
 	}
 	return [ 'request_type', 'date', 'status', 'request_url' ];
 };
+const getFilterValue = ( view: View, fieldName: string ) =>
+	view.filters?.filter( ( filter ) => filter.field === fieldName )[ 0 ]?.value || '';
+
+function buildFilter(
+	logType: LogType,
+	severity: string,
+	requestType: string,
+	requestStatus: string
+): FilterType {
+	const filters: FilterType = {};
+
+	if ( logType === 'php' ) {
+		if ( severity ) {
+			filters.severity = [ severity ];
+		}
+	}
+
+	if ( logType === 'web' ) {
+		if ( requestType ) {
+			filters.request_type = [ requestType ];
+		}
+		if ( requestStatus ) {
+			filters.status = [ requestStatus ];
+		}
+	}
+
+	return filters;
+}
 
 const useView = ( { logType }: { logType: LogType } ) => {
 	return useState< View >( () => {
@@ -42,4 +70,4 @@ const useView = ( { logType }: { logType: LogType } ) => {
 };
 
 export default useView;
-export { getSortField, getVisibleFields };
+export { buildFilter, getSortField, getVisibleFields, getFilterValue };
diff --git a/client/sites/tools/logs/index.tsx b/client/sites/tools/logs/index.tsx
@@ -14,7 +14,7 @@ import InlineSupportLink from 'calypso/components/inline-support-link';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';
 import NavigationHeader from 'calypso/components/navigation-header';
 import Pagination from 'calypso/components/pagination';
-import { useSiteLogsQuery, FilterType, LogType } from 'calypso/data/hosting/use-site-logs-query';
+import { useSiteLogsQuery, LogType } from 'calypso/data/hosting/use-site-logs-query';
 import { useInterval } from 'calypso/lib/interval';
 import { navigate } from 'calypso/lib/navigate';
 import {
@@ -33,40 +33,21 @@ import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { Skeleton } from './components/site-logs-table/skeleton';
 import { DateTimePicker } from './components/site-logs-toolbar/date-time-picker';
 import { useCurrentSiteGmtOffset } from './hooks/use-current-site-gmt-offset';
+import useData from './hooks/use-data';
 import useFields from './hooks/use-fields';
-import { default as useView, getSortField, getVisibleFields } from './hooks/use-view';
+import {
+	default as useView,
+	buildFilter,
+	getSortField,
+	getVisibleFields,
+	getFilterValue,
+} from './hooks/use-view';
 import type { View, ViewTable } from '@wordpress/dataviews';
 import type { Moment } from 'moment';
 import './style.scss';
 
 const DEFAULT_PAGE_SIZE = 50;
 
-export function buildFilterParam(
-	logType: LogType,
-	severity: string,
-	requestType: string,
-	requestStatus: string
-): FilterType {
-	const filters: FilterType = {};
-
-	if ( logType === 'php' ) {
-		if ( severity ) {
-			filters.severity = [ severity ];
-		}
-	}
-
-	if ( logType === 'web' ) {
-		if ( requestType ) {
-			filters.request_type = [ requestType ];
-		}
-		if ( requestStatus ) {
-			filters.status = [ requestStatus ];
-		}
-	}
-
-	return filters;
-}
-
 export const SiteLogs = ( {
 	logType,
 	pageSize = DEFAULT_PAGE_SIZE,
@@ -120,7 +101,7 @@ export const SiteLogs = ( {
 		logType,
 		start: dateRange.startTime.unix(),
 		end: dateRange.endTime.unix(),
-		filter: buildFilterParam( logType, severity, requestType, requestStatus ),
+		filter: buildFilter( logType, severity, requestType, requestStatus ),
 		sortOrder: 'desc',
 		pageSize,
 		pageIndex: currentPageIndex,
@@ -267,47 +248,6 @@ export const SiteLogs = ( {
 	);
 };
 
-const getFilterValueFromView = ( view: View, fieldName: string ) =>
-	view.filters?.filter( ( filter ) => filter.field === fieldName )[ 0 ]?.value || '';
-
-const EMPTY_ARRAY: Array< any > = [];
-const useDataLogs = ( {
-	view,
-	logType,
-	dateRange,
-}: {
-	view: View;
-	logType: LogType;
-	dateRange: { startTime: Moment; endTime: Moment };
-} ) => {
-	const siteId = useSelector( getSelectedSiteId );
-	const severity = getFilterValueFromView( view, 'severity' );
-	const status = getFilterValueFromView( view, 'status' );
-	const requestType = getFilterValueFromView( view, 'request_type' );
-
-	const { data, isFetching } = useSiteLogsQuery( siteId, {
-		logType,
-		start: dateRange.startTime.unix(),
-		end: dateRange.endTime.unix(),
-		filter: buildFilterParam( logType, severity, requestType, status ),
-		sortOrder: view.sort?.direction,
-		pageSize: view.perPage,
-		pageIndex: view.page,
-	} );
-
-	return {
-		data: data?.logs ? data.logs : EMPTY_ARRAY,
-		paginationInfo: {
-			totalItems: data?.total_results || 0,
-			totalPages:
-				!! data?.total_results && !! view.perPage
-					? Math.ceil( data.total_results / view.perPage )
-					: 0,
-		},
-		isLoading: isFetching,
-	};
-};
-
 export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => {
 	// TODO:
 	// - DataViews:
@@ -363,7 +303,7 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => {
 
 	const fields = useFields( { logType } );
 	const [ view, setView ] = useView( { logType } );
-	const { data, paginationInfo, isLoading } = useDataLogs( { view, logType, dateRange } );
+	const { data, paginationInfo, isLoading } = useData( { view, logType, dateRange } );
 	const onChangeView = ( newView: View ) =>
 		setView(
 			( oldView: View ) =>
@@ -393,11 +333,11 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => {
 			logType,
 			startDateTime: dateRange.startTime,
 			endDateTime: dateRange.endTime,
-			filter: buildFilterParam(
+			filter: buildFilter(
 				logType,
-				getFilterValueFromView( view, 'severity' ),
-				getFilterValueFromView( view, 'request_type' ),
-				getFilterValueFromView( view, 'request_status' )
+				getFilterValue( view, 'severity' ),
+				getFilterValue( view, 'request_type' ),
+				getFilterValue( view, 'request_status' )
 			),
 		} );
 	}, [ downloadLogs, logType, dateRange, view ] );