feature-8742: sortedSpeakers variable mutation issue happened at certain event (#9013)

Author: Hieu Lam - TMA

app/components/public/session-item.hbs

@@ -1,5 +1,5 @@
 {{!-- template-lint-disable no-nested-interactive  --}}
-<UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}}>
+<UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}} {{did-insert this.setUpComponent}}>
   <div class="title p-4 pr-1" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
     <div class="ui">
       <h3 class="ui header d-flex" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>

app/components/public/session-item.js

@@ -16,6 +16,9 @@ export default class SessionItem extends Component {
   @tracked
   hideImage = this.args.expanded;
 
+  @tracked
+  sortedSpeakers = [];
+
   get youtubeLink() {
     return extractYoutubeUrl(this.args.session.videoUrl);
   }
@@ -25,8 +28,9 @@ export default class SessionItem extends Component {
     return url.startsWith('https://open-event-api-dev.herokuapp.com') || url.startsWith('https://api.eventyay.com');
   }
 
-  get sortedSpeakers() {
-    const { speakers } = this.args.session;
+  @action
+  async setUpComponent(){
+    const { speakers } = await this.args.session;
     const sortedSpeakers = {};
     const sessionId = this.args.session.id;
     let count = 0;
@@ -37,7 +41,7 @@ export default class SessionItem extends Component {
       }
     });
     Object.fromEntries(Object.entries(sortedSpeakers).sort());
-    return count === speakers.length ? Object.values(sortedSpeakers) : speakers;
+    this.sortedSpeakers = count === speakers.length ? Object.values(sortedSpeakers) : speakers;
   }
 
   get sessionEnded() {

app/components/schedule.ts

@@ -62,7 +62,7 @@ export default class Schedule extends Component<ScheduleArgs> {
   }
 
   get resources() { // eslint-disable-line @typescript-eslint/explicit-module-boundary-types
-    return this.args.rooms.map(room => ({ id: room.id, title: room.name }));
+    return this.args.rooms?.map(room => ({ id: room.id, title: room.name }));
   }
 
   get events() { // eslint-disable-line @typescript-eslint/explicit-module-boundary-types

app/controllers/events/view/scheduler.js

@@ -11,7 +11,7 @@ export default class extends Controller {
 
   @computed('model.microlocations')
   get microlocations() {
-    return this.model.microlocations.sortBy('position').filter(x => !x.hiddenInScheduler);
+    return this.model.microlocations?.sortBy('position').filter(x => !x.hiddenInScheduler);
   }
 
   @computed('model.unscheduled', 'filter')