From 92d48641508bdf0d567cb21c07d3461b41f16e84 Mon Sep 17 00:00:00 2001 From: Scott J Dickerson Date: Tue, 12 Dec 2023 11:24:41 -0500 Subject: [PATCH] Fix review comments - Doc language - Remove custom query hook return type interfaces in favor of using TS type inference Signed-off-by: Scott J Dickerson --- client/src/app/hooks/table-controls/DOCS.md | 2 +- client/src/app/queries/dependencies.ts | 41 ++++++--------- client/src/app/queries/issues.ts | 55 +++++++++++---------- 3 files changed, 45 insertions(+), 53 deletions(-) diff --git a/client/src/app/hooks/table-controls/DOCS.md b/client/src/app/hooks/table-controls/DOCS.md index 13960729dd..ab19bef9fe 100644 --- a/client/src/app/hooks/table-controls/DOCS.md +++ b/client/src/app/hooks/table-controls/DOCS.md @@ -514,7 +514,7 @@ Table columns are identified by unique keys which are statically inferred from t #### Item IDs -Item objects must contain some unique identifier which is either a string or number. The property key of this identifier is a required config argument called `idProperty`, which will usually be `"id"`. If no unique identifier is present in the API data, an artificial one can be injected before passing the data into these hooks. This can be done in the useQuery `select` callback (see instances where we have used `"_ui_unique_id"`). Another option is to use the query hook `useWithUiId()` on the react-query fetched data. Since `select` modified data is not part of the query cache, it does not matter if transforms are do in react-query, `useWithUiId` hook, or other means. +Item objects must contain some unique identifier which is either a string or number. The property key of this identifier is a required config argument called `idProperty`, which will usually be `"id"`. If no unique identifier is present in the API data, an artificial one can be injected before passing the data into these hooks. This can be done in the useQuery `select` callback (see instances where we have used `"_ui_unique_id"`). Another option is to use the query hook `useWithUiId()` on the react-query fetched data. Since `select` modified data is not part of the query cache, it does not matter if transforms are done in react-query, `useWithUiId` hook, or other means. Any state which keeps track of something by item (i.e. by row) makes use of `item[idProperty]` as an identifier. Examples of this include selected rows, expanded rows and active rows. Valid `idProperty` values are also enforced by TypeScript generics. If an `idProperty` is provided that is not a property on the `TItem` type, you should get a type error. diff --git a/client/src/app/queries/dependencies.ts b/client/src/app/queries/dependencies.ts index d0f2e15688..24b155f672 100644 --- a/client/src/app/queries/dependencies.ts +++ b/client/src/app/queries/dependencies.ts @@ -1,6 +1,5 @@ import { useQuery } from "@tanstack/react-query"; import { - AnalysisAppDependency, AnalysisDependency, HubPaginatedResult, HubRequestParams, @@ -12,46 +11,36 @@ import { useWithUiId } from "@app/utils/query-utils"; export const DependenciesQueryKey = "dependencies"; export const AppDependenciesQueryKey = "appDependencies"; -export interface IFetchDependenciesState { - result: HubPaginatedResult>; - isFetching: boolean; - fetchError: unknown; - refetch: () => void; -} - -export const useFetchDependencies = ( - params: HubRequestParams = {} -): IFetchDependenciesState => { - const { data, isLoading, error, refetch } = useQuery({ +export const useFetchDependencies = (params: HubRequestParams = {}) => { + const { + data: dependencies, + isLoading, + error, + refetch, + } = useQuery({ queryKey: [DependenciesQueryKey, params], queryFn: async () => await getDependencies(params), onError: (error) => console.log("error, ", error), keepPreviousData: true, }); - const withUiId = useWithUiId(data?.data, (d) => `${d.name}/${d.provider}`); + const withUiId = useWithUiId( + dependencies?.data, + (d) => `${d.name}/${d.provider}` + ); return { result: { data: withUiId, - total: data?.total ?? 0, - params: data?.params ?? params, - }, + total: dependencies?.total ?? 0, + params: dependencies?.params ?? params, + } as HubPaginatedResult>, isFetching: isLoading, fetchError: error, refetch, }; }; -export interface IFetchAppDependenciesState { - result: HubPaginatedResult; - isFetching: boolean; - fetchError: unknown; - refetch: () => void; -} - -export const useFetchAppDependencies = ( - params: HubRequestParams = {} -): IFetchAppDependenciesState => { +export const useFetchAppDependencies = (params: HubRequestParams = {}) => { const { data, isLoading, error, refetch } = useQuery({ queryKey: [AppDependenciesQueryKey, params], queryFn: async () => await getAppDependencies(params), diff --git a/client/src/app/queries/issues.ts b/client/src/app/queries/issues.ts index e6d93a35a1..4a0cf53755 100644 --- a/client/src/app/queries/issues.ts +++ b/client/src/app/queries/issues.ts @@ -4,6 +4,7 @@ import { AnalysisRuleReport, HubPaginatedResult, HubRequestParams, + WithUiId, } from "@app/api/models"; import { getRuleReports, @@ -24,18 +25,16 @@ export const IssuesQueryKey = "issues"; export const IssueQueryKey = "issue"; export const IncidentsQueryKey = "incidents"; -export interface IFetchRuleReportsState { - result: HubPaginatedResult; - isFetching: boolean; - fetchError: unknown; - refetch: () => void; -} - export const useFetchRuleReports = ( enabled: boolean, params: HubRequestParams = {} -): IFetchRuleReportsState => { - const { data, isLoading, error, refetch } = useQuery({ +) => { + const { + data: ruleReport, + isLoading, + error, + refetch, + } = useQuery({ queryKey: [RuleReportsQueryKey, params], queryFn: () => getRuleReports(params), onError: (error) => console.log("error, ", error), @@ -43,13 +42,16 @@ export const useFetchRuleReports = ( enabled, }); - const withUiId = useWithUiId(data?.data, (r) => `${r.ruleset}/${r.rule}`); + const withUiId = useWithUiId( + ruleReport?.data, + (r) => `${r.ruleset}/${r.rule}` + ); return { result: { data: withUiId, - total: data?.total ?? 0, - params: data?.params ?? params, - }, + total: ruleReport?.total ?? 0, + params: ruleReport?.params ?? params, + } as HubPaginatedResult>, isFetching: isLoading, fetchError: error, refetch, @@ -71,18 +73,16 @@ export const useFetchAppReports = (params: HubRequestParams = {}) => { }; }; -export interface IFetchIssueReportsState { - result: HubPaginatedResult; - isFetching: boolean; - fetchError: unknown; - refetch: () => void; -} - export const useFetchIssueReports = ( applicationId?: number, params: HubRequestParams = {} -): IFetchIssueReportsState => { - const { data, isLoading, error, refetch } = useQuery({ +) => { + const { + data: issueReport, + isLoading, + error, + refetch, + } = useQuery({ enabled: applicationId !== undefined, queryKey: [IssueReportsQueryKey, applicationId, params], queryFn: () => getIssueReports(applicationId, params), @@ -90,13 +90,16 @@ export const useFetchIssueReports = ( keepPreviousData: true, }); - const withUiId = useWithUiId(data?.data, (r) => `${r.ruleset}/${r.rule}`); + const withUiId = useWithUiId( + issueReport?.data, + (r) => `${r.ruleset}/${r.rule}` + ); return { result: { data: withUiId, - total: data?.total ?? 0, - params: data?.params ?? params, - }, + total: issueReport?.total ?? 0, + params: issueReport?.params ?? params, + } as HubPaginatedResult, isFetching: isLoading, fetchError: error, refetch,