refactor: move loading to simplify code

Altinn · Dec 18, 2024 · 03a9b49 · 03a9b49
1 parent 3b84378
commit 03a9b49
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 42 deletions.
diff --git a/...cyRule/PolicyAccessPackages/PolicyAccessPackageAccordion/PolicyAccessPackageAccordion.tsx b/...cyRule/PolicyAccessPackages/PolicyAccessPackageAccordion/PolicyAccessPackageAccordion.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactElement, useState } from 'react';
+import React, { type ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import classes from './PolicyAccessPackageAccordion.module.css';
 import type { AccessPackageResource, PolicyAccessPackage } from '@altinn/policy-editor';
@@ -19,26 +19,6 @@ export const PolicyAccessPackageAccordion = ({
   isChecked,
   handleSelectChange,
 }: PolicyAccessPackageAccordionProps): React.ReactElement => {
-  const { t } = useTranslation();
-  const [isServicesEnabled, setIsServicesEnabled] = useState<boolean>(false);
-
-  // Determine enviroment to load resources/apps connected to each access packages from. Option to override this
-  // value with a localStorage setting is for testing. Valid options are 'at22', 'at23', 'at24', 'tt02'
-  const accessPackageResourcesEnv = localStorage.getItem('accessPackageResourcesEnv') || 'prod';
-
-  const { data: services, isLoading } = useResourceAccessPackageServicesQuery(
-    accessPackage.urn,
-    accessPackageResourcesEnv,
-    isServicesEnabled,
-  );
-
-  const onOpenAccordion = () => {
-    setIsServicesEnabled(true);
-  };
-
-  const hasServices: boolean = services?.length > 0;
-  const serviceListIsEmpty: boolean = services?.length === 0;
-
   return (
     <div className={classes.accessPackageAccordion}>
       <PolicyAccordion
@@ -51,22 +31,42 @@ export const PolicyAccessPackageAccordion = ({
             accessPackage={accessPackage}
           />
         }
-        onOpened={onOpenAccordion}
       >
-        {isLoading && (
-          <StudioSpinner spinnerTitle={t('policy_editor.access_package_loading_services')} />
-        )}
-        {hasServices && <Services services={services} />}
-        {serviceListIsEmpty && (
-          <StudioParagraph className={classes.noServicesText}>
-            {t('policy_editor.access_package_no_services')}
-          </StudioParagraph>
-        )}
+        <AccordionContent accessPackageUrn={accessPackage.urn} />
       </PolicyAccordion>
     </div>
   );
 };
 
+type AccordionContentProps = { accessPackageUrn: string };
+const AccordionContent = ({ accessPackageUrn }: AccordionContentProps): ReactElement => {
+  const { t } = useTranslation();
+  // Determine enviroment to load resources/apps connected to each access packages from. Option to override this
+  // value with a localStorage setting is for testing. Valid options are 'at22', 'at23', 'at24', 'tt02'
+  const accessPackageResourcesEnv = localStorage.getItem('accessPackageResourcesEnv') || 'prod';
+
+  const { data: services, isLoading } = useResourceAccessPackageServicesQuery(
+    accessPackageUrn,
+    accessPackageResourcesEnv,
+  );
+
+  const hasServices: boolean = services?.length > 0;
+  const serviceListIsEmpty: boolean = services?.length === 0;
+  return (
+    <>
+      {isLoading && (
+        <StudioSpinner spinnerTitle={t('policy_editor.access_package_loading_services')} />
+      )}
+      {hasServices && <Services services={services} />}
+      {serviceListIsEmpty && (
+        <StudioParagraph className={classes.noServicesText}>
+          {t('policy_editor.access_package_no_services')}
+        </StudioParagraph>
+      )}
+    </>
+  );
+};
+
 type ServicesProps = {
   services: AccessPackageResource[];
 };

diff --git a/...nents/PolicyCardRules/PolicyRule/PolicyAccessPackages/PolicyAccordion/PolicyAccordion.tsx b/...nents/PolicyCardRules/PolicyRule/PolicyAccessPackages/PolicyAccordion/PolicyAccordion.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactNode, useEffect, useId, useState } from 'react';
+import React, { type ReactNode, useId, useState } from 'react';
 import cn from 'classnames';
 import { StudioButton, StudioLabelAsParagraph } from '@studio/components';
 import * as StudioIcons from '@studio/icons';
@@ -10,7 +10,6 @@ interface PolicyAccordion {
   subTitle: string;
   extraHeaderContent?: ReactNode;
   defaultOpen?: boolean;
-  onOpened?: () => void;
   children: ReactNode;
 }
 
@@ -20,20 +19,13 @@ export const PolicyAccordion = ({
   subTitle,
   extraHeaderContent,
   defaultOpen,
-  onOpened,
   children,
 }: PolicyAccordion): ReactNode => {
   const contentId = useId();
   const initialExpandedState: boolean = defaultOpen || false;
   const [isExpanded, setIsExpanded] = useState<boolean>(initialExpandedState);
   const IconComponent = StudioIcons[icon];
 
-  useEffect(() => {
-    if (isExpanded && onOpened) {
-      onOpened();
-    }
-  }, [isExpanded, onOpened]);
-
   return (
     <div className={classes.accordion}>
       <div className={classes.accordionHeader}>

diff --git a/frontend/packages/shared/src/hooks/queries/useResourceAccessPackageServicesQuery.ts b/frontend/packages/shared/src/hooks/queries/useResourceAccessPackageServicesQuery.ts
@@ -16,13 +16,11 @@ import type { AxiosError } from 'axios';
 export const useResourceAccessPackageServicesQuery = (
   accessPackageUrn: string,
   env: string,
-  enabled: boolean,
 ): UseQueryResult<AccessPackageResource[], AxiosError> => {
   const { getAccessPackageServices } = useServicesContext();
 
   return useQuery<AccessPackageResource[], AxiosError>({
     queryKey: [QueryKey.ResourcePolicyAccessPackageServices, accessPackageUrn, env],
     queryFn: () => getAccessPackageServices(accessPackageUrn, env),
-    enabled: enabled,
   });
 };