From 1720b6b627db02f94ca39d38b767004bffe2a310 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 30 Apr 2021 13:07:22 +1000
Subject: [PATCH] store base64 defaut room avatar in redux

---
 .../session/SessionJoinableDefaultRooms.tsx   | 26 ++++++++++++++-----
 ts/opengroup/opengroupV2/ApiUtil.ts           |  1 +
 ts/state/ducks/defaultRooms.tsx               | 25 ++++++++++++++++--
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/ts/components/session/SessionJoinableDefaultRooms.tsx b/ts/components/session/SessionJoinableDefaultRooms.tsx
index 74ae4ac49..6975d61bc 100644
--- a/ts/components/session/SessionJoinableDefaultRooms.tsx
+++ b/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);
               }}
diff --git a/ts/opengroup/opengroupV2/ApiUtil.ts b/ts/opengroup/opengroupV2/ApiUtil.ts
index 01fbfbd35..21a341b03 100644
--- a/ts/opengroup/opengroupV2/ApiUtil.ts
+++ b/ts/opengroup/opengroupV2/ApiUtil.ts
@@ -40,6 +40,7 @@ export type OpenGroupV2Info = {
 
 export type OpenGroupV2InfoJoinable = OpenGroupV2Info & {
   completeUrl: string;
+  base64Data?: string;
 };
 
 /**
diff --git a/ts/state/ducks/defaultRooms.tsx b/ts/state/ducks/defaultRooms.tsx
index ba669c2fd..aee94e29d 100644
--- a/ts/state/ducks/defaultRooms.tsx
+++ b/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;