store base64 defaut room avatar in redux

ts/components/session/SessionJoinableDefaultRooms.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useContext, useEffect, useReducer, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
   joinOpenGroupV2WithUIEvents,
   parseOpenGroupV2,
 } from '../../opengroup/opengroupV2/JoinOpenGroupV2';
 import { downloadPreviewOpenGroupV2 } from '../../opengroup/opengroupV2/OpenGroupAPIV2';
+import { updateDefaultBase64RoomData } from '../../state/ducks/defaultRooms';
 import { StateType } from '../../state/reducer';
 import { Avatar, AvatarSize } from '../Avatar';
 import { Flex } from '../basic/Flex';
@@ -15,24 +16,35 @@ import { H3 } from '../basic/Text';
 export type JoinableRoomProps = {
   completeUrl: string;
   name: string;
+  roomId: string;
   imageId?: string;
   onClick: (completeUrl: string) => void;
+  base64Data?: string;
 };
 
 const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
-  const [base64Data, setBase64Data] = useState('');
-
   useEffect(() => {
     try {
       const parsedInfos = parseOpenGroupV2(props.completeUrl);
       if (parsedInfos) {
+        if (props.base64Data) {
+          return;
+        }
         void downloadPreviewOpenGroupV2(parsedInfos)
           .then(base64 => {
-            setBase64Data(base64 || '');
+            const payload = {
+              roomId: props.roomId,
+              base64Data: base64 || '',
+            };
+            window.inboxStore?.dispatch(updateDefaultBase64RoomData(payload));
           })
           .catch(e => {
             window.log.warn('downloadPreviewOpenGroupV2 failed', e);
-            setBase64Data('');
+            const payload = {
+              roomId: props.roomId,
+              base64Data: '',
+            };
+            window.inboxStore?.dispatch(updateDefaultBase64RoomData(payload));
           });
       }
     } catch (e) {
@@ -42,7 +54,7 @@ const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
   return (
     <Avatar
       size={AvatarSize.XS}
-      base64Data={base64Data}
+      base64Data={props.base64Data}
       {...props}
       onAvatarClick={() => props.onClick(props.completeUrl)}
     />
@@ -86,6 +98,8 @@ export const SessionJoinableRooms = () => {
               key={r.id}
               completeUrl={r.completeUrl}
               name={r.name}
+              roomId={r.id}
+              base64Data={r.base64Data}
               onClick={completeUrl => {
                 void joinOpenGroupV2WithUIEvents(completeUrl, true);
               }}

ts/opengroup/opengroupV2/ApiUtil.ts

@@ -40,6 +40,7 @@ export type OpenGroupV2Info = {
 
 export type OpenGroupV2InfoJoinable = OpenGroupV2Info & {
   completeUrl: string;
+  base64Data?: string;
 };
 
 /**

ts/state/ducks/defaultRooms.tsx

@@ -1,10 +1,18 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { OpenGroupV2InfoJoinable } from '../../opengroup/opengroupV2/ApiUtil';
 
 export type DefaultRoomsState = Array<OpenGroupV2InfoJoinable>;
 
 const initialState: DefaultRoomsState = [];
 
+/**
+ * Payload to dispatch to update the base64 data of a default room
+ */
+export type Base64Update = {
+  base64Data: string;
+  roomId: string;
+};
+
 /**
  * This slice is the one holding the default joinable rooms fetched once in a while from the default opengroup v2 server.
  */
@@ -16,9 +24,22 @@ const defaultRoomsSlice = createSlice({
       window.log.warn('updating default rooms', action.payload);
       return action.payload as DefaultRoomsState;
     },
+    updateDefaultBase64RoomData(state, action: PayloadAction<Base64Update>) {
+      const payload = action.payload;
+      const newState = state.map(room => {
+        if (room.id === payload.roomId) {
+          return {
+            ...room,
+            base64Data: payload.base64Data,
+          };
+        }
+        return room;
+      });
+      return newState;
+    },
   },
 });
 
 const { actions, reducer } = defaultRoomsSlice;
-export const { updateDefaultRooms } = actions;
+export const { updateDefaultRooms, updateDefaultBase64RoomData } = actions;
 export const defaultRoomReducer = reducer;