fix(addons): fixed endless loading

Author: nsemets

package-lock.json

@@ -116,8 +116,9 @@ export class ConfigureAddonComponent implements OnInit {
   });
 
   readonly supportedResourceTypes = computed(() => {
-    if (this.linkAddons().length && this.addonTypeString() === AddonType.LINK) {
-      const addon = this.linkAddons().find((a) => this.addon()?.externalServiceName === a.externalServiceName);
+    const linkAddons = this.linkAddons();
+    if (linkAddons?.length && this.addonTypeString() === AddonType.LINK) {
+      const addon = linkAddons.find((a) => this.addon()?.externalServiceName === a.externalServiceName);
       return addon?.supportedResourceTypes || [];
     }
     return [];

src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts

@@ -242,8 +242,9 @@ export class ProjectAddonsComponent implements OnInit {
   filteredAddonCards = computed((): AddonCardModel[] => {
     const searchValue = this.searchValue().toLowerCase();
     const configuredAddons = this.allConfiguredAddonsForCheck();
+    const addons = this.currentAddonsState() ?? [];
 
-    const addonCards = this.currentAddonsState()
+    const addonCards = addons
       .filter(
         (card) =>
           card.externalServiceName.toLowerCase().includes(searchValue) ||
@@ -300,7 +301,7 @@ export class ProjectAddonsComponent implements OnInit {
         const addons = this.currentAddonsState();
         const isLoading = this.currentAddonsLoading();
 
-        if (!addons?.length && !isLoading) {
+        if (!addons && !isLoading) {
           action();
         }
       }

src/app/features/project/project-addons/project-addons.component.ts

@@ -213,7 +213,8 @@ export class SettingsAddonsComponent implements OnInit {
 
   readonly filteredAddonCards = computed(() => {
     const searchValue = this.searchValue().toLowerCase();
-    const filteredAddons = this.currentAddonsState().filter(
+    const addons = this.currentAddonsState() ?? [];
+    const filteredAddons = addons.filter(
       (card) =>
         card.externalServiceName.toLowerCase().includes(searchValue) ||
         card.displayName.toLowerCase().includes(searchValue)
@@ -259,7 +260,7 @@ export class SettingsAddonsComponent implements OnInit {
         const action = this.currentAction();
         const addons = this.currentAddonsState();
 
-        if (!addons?.length) {
+        if (!addons) {
           action();
         }
       }

src/app/features/settings/settings-addons/settings-addons.component.ts

@@ -10,9 +10,9 @@ import { OperationInvocation } from '@osf/shared/models/addons/operation-invocat
 import { AsyncStateModel } from '@osf/shared/models/store/async-state.model';
 
 export interface AddonsStateModel {
-  storageAddons: AsyncStateModel<AddonModel[]>;
-  citationAddons: AsyncStateModel<AddonModel[]>;
-  linkAddons: AsyncStateModel<AddonModel[]>;
+  storageAddons: AsyncStateModel<AddonModel[] | null>;
+  citationAddons: AsyncStateModel<AddonModel[] | null>;
+  linkAddons: AsyncStateModel<AddonModel[] | null>;
   authorizedStorageAddons: AsyncStateModel<AuthorizedAccountModel[]>;
   authorizedCitationAddons: AsyncStateModel<AuthorizedAccountModel[]>;
   authorizedLinkAddons: AsyncStateModel<AuthorizedAccountModel[]>;
@@ -30,17 +30,17 @@ export interface AddonsStateModel {
 
 export const ADDONS_DEFAULTS: AddonsStateModel = {
   storageAddons: {
-    data: [],
+    data: null,
     isLoading: false,
     error: null,
   },
   citationAddons: {
-    data: [],
+    data: null,
     isLoading: false,
     error: null,
   },
   linkAddons: {
-    data: [],
+    data: null,
     isLoading: false,
     error: null,
   },

src/app/shared/stores/addons/addons.models.ts

@@ -16,13 +16,13 @@ import { AddonsState } from './addons.state';
 
 export class AddonsSelectors {
   @Selector([AddonsState])
-  static getStorageAddons(state: AddonsStateModel): AddonModel[] {
+  static getStorageAddons(state: AddonsStateModel): AddonModel[] | null {
     return state.storageAddons.data;
   }
 
   static getStorageAddon(id: string): (state: AddonsStateModel) => AddonModel | null {
     return createSelector([AddonsState], (state: AddonsStateModel): AddonModel | null => {
-      return state.storageAddons.data.find((addon: AddonModel) => addon.id === id) || null;
+      return state.storageAddons.data?.find((addon: AddonModel) => addon.id === id) || null;
     });
   }
 
@@ -32,7 +32,7 @@ export class AddonsSelectors {
   }
 
   @Selector([AddonsState])
-  static getCitationAddons(state: AddonsStateModel): AddonModel[] {
+  static getCitationAddons(state: AddonsStateModel): AddonModel[] | null {
     return state.citationAddons.data;
   }
 
@@ -42,7 +42,7 @@ export class AddonsSelectors {
   }
 
   @Selector([AddonsState])
-  static getLinkAddons(state: AddonsStateModel): AddonModel[] {
+  static getLinkAddons(state: AddonsStateModel): AddonModel[] | null {
     return state.linkAddons.data;
   }