Move app archetype filter logic to within the query hook for archetypes

Signed-off-by: ibolton336 <[email protected]>

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -204,9 +204,7 @@ export const ApplicationDetailDrawer: React.FC<
                     {t("terms.archetypesAssessed")}
                   </DescriptionListTerm>
                   <DescriptionListDescription>
-                    <AssessedArchetypes
-                      archetypeRefs={application?.archetypes}
-                    />
+                    <AssessedArchetypes application={application} />
                   </DescriptionListDescription>
                 </DescriptionListGroup>
 

client/src/app/pages/applications/components/application-detail-drawer/components/assessed-archetypes.tsx

@@ -1,23 +1,23 @@
 import React from "react";
-import { Ref } from "@app/api/models";
+import { Application } from "@app/api/models";
 import { Label, LabelGroup, Spinner } from "@patternfly/react-core";
 import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { useTranslation } from "react-i18next";
 import { useFetchArchetypes } from "@app/queries/archetypes";
 import { useFetchAllAssessmentsWithArchetypes } from "@app/queries/assessments";
 
 interface IAssessedArchetypesProps {
-  archetypeRefs: Ref[] | undefined;
+  application: Application | null;
 }
 
 export const AssessedArchetypes: React.FC<IAssessedArchetypesProps> = ({
-  archetypeRefs,
+  application,
 }) => {
   const { t } = useTranslation();
-  const { archetypes, isFetching: isFetchingArchetypes } = useFetchArchetypes();
-  const applicationArchetypes = archetypes.filter(
-    (archetype) => archetypeRefs?.some((ref) => ref.id === archetype.id)
-  );
+  const {
+    archetypes: applicationArchetypes,
+    isFetching: isFetchingArchetypes,
+  } = useFetchArchetypes(application);
 
   const {
     assessmentsWithArchetypes,

client/src/app/queries/archetypes.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { AxiosError } from "axios";
-import { Archetype } from "@app/api/models";
+import { Application, Archetype } from "@app/api/models";
 import {
   createArchetype,
   deleteArchetype,
@@ -14,18 +14,33 @@ import {
   assessmentsByItemIdQueryKey,
 } from "./assessments";
 import { reviewsQueryKey } from "./reviews";
+import { useState } from "react";
 
 export const ARCHETYPES_QUERY_KEY = "archetypes";
 export const ARCHETYPE_QUERY_KEY = "archetype";
 
-export const useFetchArchetypes = () => {
+export const useFetchArchetypes = (forApplication?: Application | null) => {
+  const [filteredArchetypes, setFilteredArchetypes] = useState<Archetype[]>([]);
+
   const queryClient = useQueryClient();
   const { isLoading, isSuccess, error, refetch, data } = useQuery({
     initialData: [],
-    queryKey: [ARCHETYPES_QUERY_KEY],
+    queryKey: [ARCHETYPES_QUERY_KEY, forApplication?.id],
+
     queryFn: getArchetypes,
     refetchInterval: 5000,
-    onSuccess: () => {
+    onSuccess: (fetchedArchetypes) => {
+      if (forApplication && forApplication.archetypes) {
+        const archetypeIds = forApplication.archetypes.map(
+          (archetype) => archetype.id
+        );
+        const filtered = fetchedArchetypes.filter((archetype) =>
+          archetypeIds.includes(archetype.id)
+        );
+        setFilteredArchetypes(filtered);
+      } else {
+        setFilteredArchetypes(fetchedArchetypes);
+      }
       queryClient.invalidateQueries([reviewsQueryKey]);
       queryClient.invalidateQueries([assessmentsQueryKey]);
       queryClient.invalidateQueries([assessmentsByItemIdQueryKey]);
@@ -35,7 +50,7 @@ export const useFetchArchetypes = () => {
   });
 
   return {
-    archetypes: data || [],
+    archetypes: filteredArchetypes || [],
     isFetching: isLoading,
     isSuccess,
     error,