Remove redundant query

Signed-off-by: ibolton336 <[email protected]>
konveyor · Sep 15, 2023 · 94c4115 · 94c4115
1 parent 3ab25aa
commit 94c4115
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 70 deletions.
diff --git a/client/src/app/hooks/useFetchArchetypeOrApplicationByAssessment.ts b/client/src/app/hooks/useFetchArchetypeOrApplicationByAssessment.ts
diff --git a/client/src/app/pages/assessment/components/assessment-actions/assessment-actions-page.tsx b/client/src/app/pages/assessment/components/assessment-actions/assessment-actions-page.tsx
@@ -12,20 +12,16 @@ import { AssessmentActionsRoute, Paths } from "@app/Paths";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import AssessmentActionsTable from "./components/assessment-actions-table";
-import { useFetchArchetypeOrApplicationByAssessment } from "@app/hooks/useFetchArchetypeOrApplicationByAssessment";
-import { Archetype, Application } from "@app/api/models";
+import { useFetchArchetypeById } from "@app/queries/archetypes";
+import { useFetchApplicationById } from "@app/queries/applications";
 
 const AssessmentActions: React.FC = () => {
   const { applicationId, archetypeId } = useParams<AssessmentActionsRoute>();
   const isArchetype = location.pathname.includes("/archetypes/");
-  console.log("isArchetype", isArchetype);
 
-  const { data } = useFetchArchetypeOrApplicationByAssessment(
-    isArchetype,
-    isArchetype ? archetypeId : applicationId
-  );
+  const { archetype } = useFetchArchetypeById(archetypeId);
+  const { application } = useFetchApplicationById(applicationId);
 
-  console.log("archetype or app data", data);
   return (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -49,18 +45,18 @@ const AssessmentActions: React.FC = () => {
       </PageSection>
       <PageSection>
         {isArchetype ? (
-          <ConditionalRender when={!data} then={<AppPlaceholder />}>
+          <ConditionalRender when={!archetype} then={<AppPlaceholder />}>
             <TextContent>
-              {data ? (
-                <AssessmentActionsTable archetype={data as Archetype} />
+              {archetype ? (
+                <AssessmentActionsTable archetype={archetype} />
               ) : null}
             </TextContent>
           </ConditionalRender>
         ) : (
-          <ConditionalRender when={!data} then={<AppPlaceholder />}>
+          <ConditionalRender when={!application} then={<AppPlaceholder />}>
             <TextContent>
-              {data ? (
-                <AssessmentActionsTable application={data as Application} />
+              {application ? (
+                <AssessmentActionsTable application={application} />
               ) : null}
             </TextContent>
           </ConditionalRender>

diff --git a/client/src/app/pages/assessment/components/assessment-page-header.tsx b/client/src/app/pages/assessment/components/assessment-page-header.tsx
@@ -8,7 +8,8 @@ import { PageHeader } from "@app/components/PageHeader";
 import { ApplicationDependenciesFormContainer } from "@app/components/ApplicationDependenciesFormContainer";
 import { Paths } from "@app/Paths";
 import { Application, Assessment } from "@app/api/models";
-import { useFetchArchetypeOrApplicationByAssessment } from "@app/hooks/useFetchArchetypeOrApplicationByAssessment";
+import { useFetchApplicationById } from "@app/queries/applications";
+import { useFetchArchetypeById } from "@app/queries/archetypes";
 
 export interface AssessmentPageHeaderProps {
   assessment?: Assessment;
@@ -20,10 +21,9 @@ export const AssessmentPageHeader: React.FC<AssessmentPageHeaderProps> = ({
   const { t } = useTranslation();
   const history = useHistory();
   const isArchetype = location.pathname.includes("/archetypes/");
-  const { data } = useFetchArchetypeOrApplicationByAssessment(
-    isArchetype,
-    isArchetype ? assessment?.archetype?.id : assessment?.archetype?.id
-  );
+
+  const { archetype } = useFetchArchetypeById(assessment?.archetype?.id);
+  const { application } = useFetchApplicationById(assessment?.application?.id);
 
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] =
     React.useState<boolean>(false);
@@ -35,7 +35,11 @@ export const AssessmentPageHeader: React.FC<AssessmentPageHeaderProps> = ({
     <>
       <PageHeader
         title={t("composed.applicationAssessment")}
-        description={<Text component="p">{data?.name}</Text>}
+        description={
+          <Text component="p">
+            {isArchetype ? archetype?.name : application?.name}
+          </Text>
+        }
         breadcrumbs={[
           {
             title: isArchetype ? t("terms.archetype") : t("terms.applications"),
@@ -52,11 +56,9 @@ export const AssessmentPageHeader: React.FC<AssessmentPageHeaderProps> = ({
         ]}
         btnActions={
           <>
-            {!isArchetype && data && (
+            {application && (
               <Button
-                onClick={() =>
-                  setApplicationDependenciesToManage(data as Application)
-                }
+                onClick={() => setApplicationDependenciesToManage(application)}
               >
                 {t("actions.manageDependencies")}
               </Button>

diff --git a/client/src/app/queries/applications.ts b/client/src/app/queries/applications.ts
@@ -42,12 +42,15 @@ export const useFetchApplications = () => {
 
 export const ApplicationQueryKey = "application";
 
-export const useFetchApplicationByID = (id: number | string) => {
+export const useFetchApplicationById = (id?: number | string) => {
   const { data, isLoading, error } = useQuery({
     queryKey: [ApplicationQueryKey, id],
-    queryFn: () => getApplicationById(id),
+    queryFn: () =>
+      id === undefined ? Promise.resolve(undefined) : getApplicationById(id),
     onError: (error: AxiosError) => console.log("error, ", error),
+    enabled: id !== undefined,
   });
+
   return {
     application: data,
     isFetching: isLoading,

diff --git a/client/src/app/queries/reviews.ts b/client/src/app/queries/reviews.ts
@@ -9,7 +9,7 @@ import {
 } from "@app/api/rest";
 import { New, Review } from "@app/api/models";
 import { AxiosError } from "axios";
-import { useFetchApplicationByID } from "./applications";
+import { useFetchApplicationById } from "./applications";
 
 export const reviewQueryKey = "review";
 export const reviewsByItemIdQueryKey = "reviewsByItemId";
@@ -94,7 +94,7 @@ export function useGetReviewByAppId(applicationId: string | number) {
     application,
     isFetching: isApplicationFetching,
     fetchError: applicationError,
-  } = useFetchApplicationByID(applicationId || "");
+  } = useFetchApplicationById(applicationId);
 
   let review = null;
   let isLoading = false;