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 <[email protected]>
konveyor · Dec 14, 2023 · 92d4864 · 92d4864
1 parent 2540075
commit 92d4864
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 53 deletions.
diff --git 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
@@ -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<WithUiId<AnalysisDependency>>;
-  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<WithUiId<AnalysisDependency>>,
     isFetching: isLoading,
     fetchError: error,
     refetch,
   };
 };
 
-export interface IFetchAppDependenciesState {
-  result: HubPaginatedResult<AnalysisAppDependency>;
-  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
@@ -4,6 +4,7 @@ import {
   AnalysisRuleReport,
   HubPaginatedResult,
   HubRequestParams,
+  WithUiId,
 } from "@app/api/models";
 import {
   getRuleReports,
@@ -24,32 +25,33 @@ export const IssuesQueryKey = "issues";
 export const IssueQueryKey = "issue";
 export const IncidentsQueryKey = "incidents";
 
-export interface IFetchRuleReportsState {
-  result: HubPaginatedResult<AnalysisRuleReport>;
-  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),
     keepPreviousData: true,
     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<WithUiId<AnalysisRuleReport>>,
     isFetching: isLoading,
     fetchError: error,
     refetch,
@@ -71,32 +73,33 @@ export const useFetchAppReports = (params: HubRequestParams = {}) => {
   };
 };
 
-export interface IFetchIssueReportsState {
-  result: HubPaginatedResult<AnalysisIssueReport>;
-  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),
     onError: (error) => console.log("error, ", error),
     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<AnalysisIssueReport>,
     isFetching: isLoading,
     fetchError: error,
     refetch,