From fea943f401aa5cb587e038df6558cf57110dedab Mon Sep 17 00:00:00 2001
From: Tomas <tomas.engebretsen@gmail.com>
Date: Wed, 15 Jan 2025 14:27:57 +0100
Subject: [PATCH] refactor: Split app content library component

---
 .../appContentLibrary/AppContentLibrary.tsx   | 40 +++++++++++++++----
 .../utils/mapToCodeListsUsage.test.ts         |  4 +-
 .../utils/mapToCodeListsUsage.ts              | 10 ++---
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
index 92f65b621d1..8431b6adcd7 100644
--- a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
+++ b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
@@ -1,5 +1,6 @@
 import type { CodeListReference, CodeListWithMetadata } from '@studio/content-library';
 import { ResourceContentLibraryImpl } from '@studio/content-library';
+import type { ReactElement } from 'react';
 import React from 'react';
 import { useOptionListsQuery, useOptionListsReferencesQuery } from 'app-shared/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
@@ -16,28 +17,51 @@ import {
   useUpdateOptionListIdMutation,
 } from 'app-shared/hooks/mutations';
 import { mapToCodeListsUsage } from './utils/mapToCodeListsUsage';
+import type { OptionListData } from 'app-shared/types/OptionList';
+import type { OptionListReferences } from 'app-shared/types/OptionListReferences';
 
 export function AppContentLibrary(): React.ReactElement {
   const { org, app } = useStudioEnvironmentParams();
   const { t } = useTranslation();
-  const { data: optionListsData, isPending: optionListsDataPending } = useOptionListsQuery(
+  const { data: optionListDataList, isPending: optionListsDataPending } = useOptionListsQuery(
     org,
     app,
   );
+  const { data: optionListUsages, isPending: optionListsUsageIsPending } =
+    useOptionListsReferencesQuery(org, app);
+
+  if (optionListsDataPending || optionListsUsageIsPending) {
+    return <StudioPageSpinner spinnerTitle={t('general.loading')}></StudioPageSpinner>;
+  } else {
+    return (
+      <AppContentLibraryWithData
+        optionListDataList={optionListDataList}
+        optionListUsages={optionListUsages}
+      />
+    );
+  }
+}
+
+type AppContentLibraryWithDataProps = {
+  optionListDataList: OptionListData[];
+  optionListUsages: OptionListReferences;
+};
+
+function AppContentLibraryWithData({
+  optionListDataList,
+  optionListUsages,
+}: AppContentLibraryWithDataProps): ReactElement {
+  const { org, app } = useStudioEnvironmentParams();
+  const { t } = useTranslation();
   const { mutate: uploadOptionList } = useAddOptionListMutation(org, app, {
     hideDefaultError: (error: AxiosError<ApiError>) => isErrorUnknown(error),
   });
   const { mutate: updateOptionList } = useUpdateOptionListMutation(org, app);
   const { mutate: updateOptionListId } = useUpdateOptionListIdMutation(org, app);
-  const { data: optionListsUsages, isPending: optionListsUsageIsPending } =
-    useOptionListsReferencesQuery(org, app);
-
-  if (optionListsDataPending || optionListsUsageIsPending)
-    return <StudioPageSpinner spinnerTitle={t('general.loading')}></StudioPageSpinner>;
 
-  const codeListsData = convertOptionsListsDataToCodeListsData(optionListsData);
+  const codeListsData = convertOptionsListsDataToCodeListsData(optionListDataList);
 
-  const codeListsUsages: CodeListReference[] = mapToCodeListsUsage({ optionListsUsages });
+  const codeListsUsages: CodeListReference[] = mapToCodeListsUsage(optionListUsages);
 
   const handleUpdateCodeListId = (optionListId: string, newOptionListId: string) => {
     updateOptionListId({ optionListId, newOptionListId });
diff --git a/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.test.ts b/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.test.ts
index 57af8582d80..8d01276c1cc 100644
--- a/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.test.ts
+++ b/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.test.ts
@@ -19,7 +19,7 @@ const optionListsUsages: OptionListReferences = [
 
 describe('mapToCodeListsUsage', () => {
   it('maps optionListsUsage to codeListUsage', () => {
-    const codeListUsage = mapToCodeListsUsage({ optionListsUsages });
+    const codeListUsage = mapToCodeListsUsage(optionListsUsages);
     expect(codeListUsage).toEqual([
       {
         codeListId: optionListId,
@@ -29,7 +29,7 @@ describe('mapToCodeListsUsage', () => {
   });
 
   it('maps undefined optionListsUsage to empty array', () => {
-    const codeListUsage = mapToCodeListsUsage({ optionListsUsages: undefined });
+    const codeListUsage = mapToCodeListsUsage(undefined);
     expect(codeListUsage).toEqual([]);
   });
 });
diff --git a/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.ts b/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.ts
index 603e6869203..e86a95a5fd9 100644
--- a/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.ts
+++ b/frontend/app-development/features/appContentLibrary/utils/mapToCodeListsUsage.ts
@@ -1,13 +1,9 @@
 import type { OptionListReferences } from 'app-shared/types/OptionListReferences';
 import type { CodeListReference } from '@studio/content-library';
 
-type MapToCodeListsUsageProps = {
-  optionListsUsages: OptionListReferences;
-};
-
-export const mapToCodeListsUsage = ({
-  optionListsUsages,
-}: MapToCodeListsUsageProps): CodeListReference[] => {
+export const mapToCodeListsUsage = (
+  optionListsUsages: OptionListReferences,
+): CodeListReference[] => {
   const codeListsUsages: CodeListReference[] = [];
   if (!optionListsUsages) return codeListsUsages;
   optionListsUsages.map((optionListsUsage) =>