PR comments addressed

Signed-off-by: ibolton336 <[email protected]>
konveyor · Sep 20, 2023 · 0dd192e · 0dd192e
1 parent 9d3216f
commit 0dd192e
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 124 deletions.
diff --git a/...pplications/components/application-detail-drawer/application-detail-drawer-assessment.tsx b/...pplications/components/application-detail-drawer/application-detail-drawer-assessment.tsx
@@ -20,7 +20,7 @@ import {
   ApplicationDetailDrawer,
   IApplicationDetailDrawerProps,
 } from "./application-detail-drawer";
-import { useGetReviewByItemId } from "@app/queries/reviews";
+import { useFetchReviewById } from "@app/queries/reviews";
 
 export interface IApplicationDetailDrawerAssessmentProps
   extends Pick<IApplicationDetailDrawerProps, "application" | "onCloseClick"> {
@@ -32,7 +32,7 @@ export const ApplicationDetailDrawerAssessment: React.FC<
 > = ({ application, onCloseClick, task }) => {
   const { t } = useTranslation();
 
-  const { review: appReview } = useGetReviewByItemId(application?.id);
+  const { review: appReview } = useFetchReviewById(application?.review?.id);
   const notYetReviewed = (
     <EmptyTextMessage message={t("terms.notYetReviewed")} />
   );

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -69,7 +69,6 @@ const Archetypes: React.FC = () => {
   const [archetypeToEdit, setArchetypeToEdit] = useState<Archetype | null>(
     null
   );
-  const [reviewToEdit, setReviewToEdit] = React.useState<number | null>(null);
 
   const [archetypeToDuplicate, setArchetypeToDuplicate] =
     useState<Archetype | null>(null);
@@ -186,18 +185,6 @@ const Archetypes: React.FC = () => {
       setArchetypeToAssess(null);
     }
   };
-  const reviewSelectedArchetype = (archetype: Archetype) => {
-    if (archetype.review) {
-      setReviewToEdit(archetype.id);
-    } else {
-      history.push(
-        formatPath(Paths.archetypeReview, {
-          archetypeId: archetype.id,
-        })
-      );
-    }
-  };
-
   return (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -312,7 +299,11 @@ const Archetypes: React.FC = () => {
                               {
                                 title: t("actions.review"),
                                 onClick: () =>
-                                  reviewSelectedArchetype(archetype),
+                                  history.push(
+                                    formatPath(Paths.archetypeReview, {
+                                      archetypeId: archetype.id,
+                                    })
+                                  ),
                               },
                               {
                                 title: t("actions.edit"),

diff --git a/...nt/src/app/pages/reports/components/adoption-candidate-graph/adoption-candidate-graph.tsx b/...nt/src/app/pages/reports/components/adoption-candidate-graph/adoption-candidate-graph.tsx
@@ -37,7 +37,7 @@ import { ApplicationSelectionContext } from "../../application-selection-context
 import { CartesianSquare } from "./cartesian-square";
 import { Arrow } from "./arrow";
 import useFetchApplicationDependencies from "@app/hooks/useFetchApplicationDependencies/useFetchApplicationDependencies";
-import { useGetReviewByItemId } from "@app/queries/reviews";
+import { useFetchReviewById } from "@app/queries/reviews";
 
 interface Line {
   from: LinePoint;
@@ -165,7 +165,7 @@ export const AdoptionCandidateGraph: React.FC = () => {
       const appConfidence = confidences.find(
         (elem) => elem.applicationId === current.id
       );
-      const { review: appReview } = useGetReviewByItemId(current?.id);
+      const { review: appReview } = useFetchReviewById(current?.review?.id);
 
       if (appConfidence && appReview) {
         const key = appReview.proposedAction;

diff --git a/...nt/src/app/pages/reports/components/adoption-candidate-table/adoption-candidate-table.tsx b/...nt/src/app/pages/reports/components/adoption-candidate-table/adoption-candidate-table.tsx
@@ -22,7 +22,7 @@ import {
 } from "@app/api/models";
 
 import { ApplicationSelectionContext } from "../../application-selection-context";
-import { useGetReviewByItemId } from "@app/queries/reviews";
+import { useFetchReviewById } from "@app/queries/reviews";
 import { useQuery } from "@tanstack/react-query";
 import { useFetchRisks } from "@app/queries/risks";
 import { AppTableWithControls } from "@app/components/AppTableWithControls";
@@ -110,7 +110,7 @@ export const AdoptionCandidateTable: React.FC<IAdoptionCandidateTable> = () => {
       const confidenceData = confidence?.find(
         (e) => e.applicationId === app.id
       );
-      const { review: reviewData } = useGetReviewByItemId(app?.id);
+      const { review: reviewData } = useFetchReviewById(app?.review?.id);
 
       const riskData = assessmentRisks?.find((e) => e.applicationId === app.id);
 

diff --git a/client/src/app/pages/review/components/application-details/application-details.tsx b/client/src/app/pages/review/components/application-details/application-details.tsx
@@ -13,7 +13,7 @@ import { Application, Assessment } from "@app/api/models";
 import { useFetchQuestionnaires } from "@app/queries/questionnaires";
 
 export interface IApplicationDetailsProps {
-  application: Application;
+  application?: Application;
   assessment?: Assessment;
 }
 
@@ -27,7 +27,7 @@ export const ApplicationDetails: React.FC<IApplicationDetailsProps> = ({
     (questionnaire) => questionnaire.id === assessment?.questionnaire?.id
   );
   const { t } = useTranslation();
-  if (!matchingQuestionnaire) {
+  if (!matchingQuestionnaire || !application) {
     return null;
   }
 

diff --git a/client/src/app/pages/review/components/review-form/review-form.tsx b/client/src/app/pages/review/components/review-form/review-form.tsx
@@ -28,11 +28,9 @@ import {
 } from "@app/components/HookFormPFFields";
 import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
 import {
-  reviewsByItemIdQueryKey,
   useCreateReviewMutation,
   useUpdateReviewMutation,
 } from "@app/queries/reviews";
-import { useQueryClient } from "@tanstack/react-query";
 import { useHistory } from "react-router-dom";
 import { Paths } from "@app/Paths";
 import { NotificationsContext } from "@app/components/NotificationsContext";
@@ -57,6 +55,7 @@ export const ReviewForm: React.FC<IReviewFormProps> = ({
   application,
   review,
 }) => {
+  console.log("existing review", review);
   const { t } = useTranslation();
   const history = useHistory();
   const { pushNotification } = React.useContext(NotificationsContext);
@@ -112,17 +111,8 @@ export const ReviewForm: React.FC<IReviewFormProps> = ({
     console.log("Invalid form", errors);
   };
 
-  const queryClient = useQueryClient();
-  const onHandleUpdateReviewSuccess = () => {
-    queryClient.invalidateQueries([
-      reviewsByItemIdQueryKey,
-      application?.review?.id,
-    ]);
-  };
   const createReviewMutation = useCreateReviewMutation();
-  const updateReviewMutation = useUpdateReviewMutation(
-    onHandleUpdateReviewSuccess
-  );
+  const updateReviewMutation = useUpdateReviewMutation();
 
   const onSubmit = async (formValues: FormValues) => {
     const payload: New<Review> = {
@@ -251,7 +241,7 @@ export const ReviewForm: React.FC<IReviewFormProps> = ({
         label={t("composed.workPriority")}
         fieldId="priority"
         isRequired
-        renderInput={({ field: { value, name, onChange } }) => (
+        renderInput={({ field: { value, onChange } }) => (
           <NumberInput
             inputName="priority"
             inputAriaLabel="priority"

diff --git a/client/src/app/pages/review/review-page.tsx b/client/src/app/pages/review/review-page.tsx
@@ -22,24 +22,26 @@ import QuestionnaireSummary, {
   SummaryType,
 } from "@app/components/questionnaire-summary/questionnaire-summary";
 import { PageHeader } from "@app/components/PageHeader";
-import { useGetReviewByItemId } from "@app/queries/reviews";
+import { useFetchReviewById } from "@app/queries/reviews";
 import useIsArchetype from "@app/hooks/useIsArchetype";
+import { useFetchApplicationById } from "@app/queries/applications";
+import { useFetchArchetypeById } from "@app/queries/archetypes";
 
 const ReviewPage: React.FC = () => {
   const { t } = useTranslation();
 
   const { applicationId, archetypeId } = useParams<ReviewRoute>();
   const isArchetype = useIsArchetype();
 
-  const { application, review, fetchError, isFetching } = useGetReviewByItemId(
-    applicationId || archetypeId,
-    isArchetype
-  );
-
-  //TODO: Review archetypes?
-  // const { archetype } = useFetchArchetypeById(archetypeId || "");
+  const { archetype } = useFetchArchetypeById(archetypeId);
+  const { application } = useFetchApplicationById(applicationId);
 
-  //TODO: Add a dropdown with multiple assessments to choose from
+  const { review, fetchError, isFetching } = useFetchReviewById(
+    isArchetype ? archetype?.review?.id : application?.review?.id
+  );
+  console.log("archetype.review", archetype?.review?.id);
+  console.log("reviewl", review);
+  console.log("isFetchign", isFetching);
   const assessment = undefined;
   const breadcrumbs = [
     ...(isArchetype
@@ -55,10 +57,10 @@ const ReviewPage: React.FC = () => {
             path: Paths.applications,
           },
         ]),
-    {
-      title: t("terms.review"),
-      path: Paths.applicationsReview,
-    },
+    // {
+    //   title: t("terms.review"),
+    //   path: Paths.applicationsReview,
+    // },
   ];
 
   if (fetchError) {
@@ -94,37 +96,30 @@ const ReviewPage: React.FC = () => {
           description={
             <Text component="p">{t("message.reviewInstructions")}</Text>
           }
-          breadcrumbs={[
-            {
-              title: t("terms.applications"),
-              path: Paths.applications,
-            },
-            {
-              title: t("terms.review"),
-              path: Paths.applicationsReview,
-            },
-          ]}
+          breadcrumbs={breadcrumbs}
           menuActions={[]}
         />
       </PageSection>
       <PageSection variant="light">
         <ConditionalRender when={isFetching} then={<AppPlaceholder />}>
           <Grid hasGutter>
-            {application && (
-              <GridItem md={5}>
-                <div className="pf-v5-c-form">
-                  <FormSection>
-                    <ApplicationDetails
-                      application={application}
-                      assessment={assessment}
-                    />
-                  </FormSection>
-                  <FormSection>
-                    <ReviewForm review={review} application={application} />
-                  </FormSection>
-                </div>
-              </GridItem>
-            )}
+            <GridItem md={5}>
+              <div className="pf-v5-c-form">
+                <FormSection>
+                  <ApplicationDetails
+                    application={application}
+                    assessment={assessment}
+                  />
+                </FormSection>
+                <FormSection>
+                  <ReviewForm
+                    review={review}
+                    application={application}
+                    archetype={archetype}
+                  />
+                </FormSection>
+              </div>
+            </GridItem>
             {assessment && (
               <GridItem md={6}>
                 <ApplicationAssessmentDonutChart assessment={assessment} />

diff --git a/client/src/app/queries/reviews.ts b/client/src/app/queries/reviews.ts
@@ -9,8 +9,6 @@ import {
 } from "@app/api/rest";
 import { New, Review } from "@app/api/models";
 import { AxiosError } from "axios";
-import { useFetchApplicationById } from "./applications";
-import { useFetchArchetypeById } from "./archetypes";
 
 export const reviewQueryKey = "review";
 export const reviewsByItemIdQueryKey = "reviewsByItemId";
@@ -92,55 +90,18 @@ export const useDeleteReviewMutation = (
   });
 };
 
-export function useGetReviewByItemId(
-  id?: string | number,
-  isArchetype?: boolean
-) {
-  const {
-    application,
-    isFetching: isApplicationFetching,
-    fetchError: applicationError,
-  } = useFetchApplicationById(id);
-
-  const {
-    archetype,
-    isFetching: isArchetypeFetching,
-    fetchError: archetypeError,
-  } = useFetchArchetypeById(id);
-
-  let review = null;
-  let isLoading = false;
-  let isError = false;
-
-  const reviewId = application?.review?.id || archetype?.review?.id;
-
-  const reviewQuery = useQuery(
-    [
-      reviewsByItemIdQueryKey,
-      reviewId,
-      application?.review?.id,
-      archetype?.review?.id,
-    ],
-    () => (reviewId ? getReviewById(reviewId) : null),
-    {
-      enabled: !!reviewId,
-    }
-  );
-
-  if (reviewId) {
-    review = reviewQuery.data;
-    isLoading = reviewQuery.isLoading;
-    isError = reviewQuery.isError;
-  }
+export const useFetchReviewById = (id?: number | string) => {
+  const { data, isLoading, error, isFetching } = useQuery({
+    queryKey: [reviewQueryKey, id],
+    queryFn: () =>
+      id === undefined ? Promise.resolve(null) : getReviewById(id),
+    onError: (error: AxiosError) => console.log("error, ", error),
+    enabled: id !== undefined,
+  });
 
   return {
-    application,
-    archetype,
-    review,
-    isLoading,
-    isError,
-    isFetching: isApplicationFetching || isLoading || isArchetypeFetching,
-    fetchError:
-      applicationError || (review ? reviewQuery.error : null) || archetypeError,
+    review: data,
+    isFetching: isFetching,
+    fetchError: error,
   };
-}
+};