Make displayname and avatars show up and handle avatar changes

server/fetch-events-for-timestamp.js

@@ -68,7 +68,7 @@ async function fetchEventsForTimestamp(roomId, ts) {
   const stateEventMap = {};
   for (const stateEvent of messageResData.state) {
     if (stateEvent.type === 'm.room.member') {
-      stateEventMap[stateEvent.state_key] = stateEventMap;
+      stateEventMap[stateEvent.state_key] = stateEvent;
     }
   }
 

server/hydrogen-vm-render-script.js

@@ -89,8 +89,16 @@ async function mountHydrogen() {
     },
   });
 
+  // Something we can modify with new state updates as we see them
+  const workingStateEventMap = {
+    ...stateEventMap,
+  };
   const eventEntries = events.map((event) => {
-    const memberEvent = stateEventMap[event.user_id];
+    if (event.type === 'm.room.member') {
+      workingStateEventMap[event.state_key] = event;
+    }
+
+    const memberEvent = workingStateEventMap[event.user_id];
     return makeEventEntryFromEventJson(event, memberEvent);
   });
   //console.log('eventEntries', eventEntries);

server/server1.js

@@ -16,7 +16,7 @@ app.get(
   asyncHandler(async function (req, res) {
     const { events, stateEventMap } = await fetchEventsForTimestamp(
       '!HBehERstyQBxyJDLfR:my.synapse.server',
-      new Date('2022-01-01').getTime()
+      new Date('2022-02-08').getTime()
     );
 
     const hydrogenHtmlOutput = await renderHydrogenToString(events, stateEventMap);