change(ui): fix EventsBlock types, fix event and resource type

frontend/app/components/Session_/EventsBlock/EventsBlock.tsx

@@ -11,15 +11,16 @@ import EventSearch from './EventSearch/EventSearch';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { RootStore } from 'App/duck'
-import { List as ImmList } from 'immutable'
 import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache'
+import { InjectedEvent } from 'Types/session/event'
+import Session from 'Types/session'
 
 interface IProps {
   setEventFilter: (filter: { query: string }) => void
-  filteredEvents: ImmList<Record<string, any>>
+  filteredEvents: InjectedEvent[]
   setActiveTab: (tab?: string) => void
   query: string
-  session: Record<string, any>
+  session: Session
   filterOutNote: (id: string) => void
   eventsIndex: number[]
 }
@@ -87,13 +88,13 @@ function EventsBlock(props: IProps) {
   const onMouseLeave = () => setMouseOver(false)
 
   const renderGroup = ({ index, key, style, parent }: { index: number; key: string; style: React.CSSProperties; parent: any }) => {
-    const isLastEvent = index === usedEvents.size - 1;
-    const isLastInGroup = isLastEvent || usedEvents.get(index + 1)?.type === TYPES.LOCATION;
-    const event = usedEvents.get(index);
-    const isNote = !!event?.noteId
+    const isLastEvent = index === usedEvents.length - 1;
+    const isLastInGroup = isLastEvent || usedEvents[index + 1]?.type === TYPES.LOCATION;
+    const event = usedEvents[index];
+    const isNote = 'noteId' in event
     const isCurrent = index === currentTimeEventIndex;
 
-    const heightBug = index === 0 && event?.type === TYPES.LOCATION && event.referrer ? { top: 2 } : {}
+    const heightBug = index === 0 && event?.type === TYPES.LOCATION && 'referrer' in event ? { top: 2 } : {}
     return (
       <CellMeasurer
         key={key}
@@ -123,7 +124,7 @@ function EventsBlock(props: IProps) {
     );
   }
 
-  const isEmptySearch = query && (usedEvents.size === 0 || !usedEvents)
+  const isEmptySearch = query && (usedEvents.length === 0 || !usedEvents)
   return (
     <>
       <div className={ cn(styles.header, 'p-4') }>
@@ -133,7 +134,7 @@ function EventsBlock(props: IProps) {
             setActiveTab={setActiveTab}
             value={query}
             header={
-              <div className="text-xl">User Steps <span className="color-gray-medium">{ events.size }</span></div>
+              <div className="text-xl">User Steps <span className="color-gray-medium">{ events.length }</span></div>
             }
           />
         </div>
@@ -160,7 +161,7 @@ function EventsBlock(props: IProps) {
               width={248}
               overscanRowCount={6}
               itemSize={230}
-              rowCount={usedEvents.size}
+              rowCount={usedEvents.length}
               deferredMeasurementCache={cache}
               rowHeight={cache.rowHeight}
               rowRenderer={renderGroup}

frontend/app/player/web/WebPlayer.ts

@@ -30,7 +30,7 @@ export default class WebPlayer extends Player {
     let initialLists = live ? {} : {
       event: session.events,
       stack: session.stackEvents,
-      resource: session.resources.toJSON(), // MBTODO: put ResourceTiming in file
+      resource: session.resources, // MBTODO: put ResourceTiming in file
       exceptions: session.errors.map(({ time, errorId, name }: any) =>
         Log({
           level: LogLevel.ERROR,

frontend/app/types/session/session.ts

@@ -1,4 +1,3 @@
-import { List } from 'immutable';
 import { Duration } from 'luxon';
 import SessionEvent, { TYPES, EventData, InjectedEvent } from './event';
 import StackEvent from './stackEvent';
@@ -181,6 +180,7 @@ export default class Session {
       devtoolsURL = [],
       mobsUrl = [],
       notes = [],
+      resources = [],
       ...session
     } = sessionData
     const duration = Duration.fromMillis(session.duration < 1000 ? 1000 : session.duration);
@@ -207,12 +207,12 @@ export default class Session {
       })
     }
 
-    let resources = List(session.resources).map((r) => new Resource(r as any));
-    resources.forEach((r: Resource) => {
+    let resourcesList = resources.map((r) => new Resource(r as any));
+    resourcesList.forEach((r: Resource) => {
       r.time = Math.max(0, r.time - startedAt)
     })
-    resources = resources.sort((r1, r2) => r1.time - r2.time);
-    const missedResources = resources.filter(({ success }) => !success);
+    resourcesList = resourcesList.sort((r1, r2) => r1.time - r2.time);
+    const missedResources = resourcesList.filter(({ success }) => !success);
 
     const stackEventsList: StackEvent[] = []
     if (stackEvents?.length || session.userEvents?.length) {
@@ -243,7 +243,7 @@ export default class Session {
       siteId: projectId,
       events,
       stackEvents: stackEventsList,
-      resources,
+      resources: resourcesList,
       missedResources,
       userDevice,
       userDeviceType,
@@ -267,7 +267,7 @@ export default class Session {
       domURL,
       devtoolsURL,
       notes,
-      notesWithEvents: List(notesWithEvents),
+      notesWithEvents: notesWithEvents,
     })
   }
 }