refactor: Split app content library component

frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx

@@ -1,6 +1,6 @@
 import type { CodeListReference, CodeListWithMetadata } from '@studio/content-library';
 import { ResourceContentLibraryImpl } from '@studio/content-library';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { useOptionListsQuery, useOptionListsReferencesQuery } from 'app-shared/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { convertOptionsListsDataToCodeListsData } from './utils/convertOptionsListsDataToCodeListsData';
@@ -16,28 +16,51 @@ import {
   useUpdateOptionListIdMutation,
 } from 'app-shared/hooks/mutations';
 import { mapToCodeListsUsage } from './utils/mapToCodeListsUsage';
+import { OptionListData } from 'app-shared/types/OptionList';
+import { 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 });

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([]);
   });
 });

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) =>