…e joinedRoom updates

I learned a few things during these and came up with some ideas for future but as it is
right now it breaks stuff so DON'T USE. I REPEAT, DONT USE! :)

Here's what I've lerned:

// This isn't Optimal as it gets recreated each time
// while the premise of redux is to only update the slices that have actually changed
// That means that only touch the actual slices that have changed by value
// and leave the old references in palce so they don't trigger rerenders!
// Also, this is why flattening the data structure works and deep structures don't,
//  because when you update a deep structure the whole object has to update for even the
//  deepest value, but if things are flat (on the same level) then they don't their
// reference doesn't change and so they don't have to update!
const createActivity = (room: Room, activity: BaseRoomActivity) => {
  const peersList = Object.values(room.peersIncludingMe);
  const membersList = peersList.map(toRoomMember);

  return toRoomActivity(activity, membersList);
};

Also, see the comments here:

useEffect(() => {
    setJoinedRoom((prev) => {
      if (!roomAndActivityZip) {
        return undefined;
      }

      // If there is no prev, create it for the 1st time
      if (!prev) {
        return createJoinedRoom(roomAndActivityZip);
      }

      // If only the activity has changed, then you can just apply that
      // TODO: Maybe there's a need for a deeper (smarter) comparison
      if (roomAndActivityZip.activity !== prev.currentActivity) {
        return {
          ...prev,
          currentActivity: createActivity(roomAndActivityZip.room, roomAndActivityZip.activity),
        };
      }

      // If the current activity isn't the new one then the room has to be!
      // In case of the room just recreate the whole thing, for now, because
      //   the current activity heavily depends on it
      return createJoinedRoom(roomAndActivityZip);
    });
  }, [roomAndActivityZip]);

…ng but some ideas are good