You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import React, { useEffect } 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';
|
|
import { PillContainer } from '../basic/PillContainer';
|
|
import { H3 } from '../basic/Text';
|
|
import { SessionSpinner } from './SessionSpinner';
|
|
// tslint:disable: no-void-expression
|
|
|
|
export type JoinableRoomProps = {
|
|
completeUrl: string;
|
|
name: string;
|
|
roomId: string;
|
|
imageId?: string;
|
|
onClick: (completeUrl: string) => void;
|
|
base64Data?: string;
|
|
};
|
|
|
|
const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
|
|
useEffect(() => {
|
|
try {
|
|
const parsedInfos = parseOpenGroupV2(props.completeUrl);
|
|
if (parsedInfos) {
|
|
if (props.base64Data) {
|
|
return;
|
|
}
|
|
void downloadPreviewOpenGroupV2(parsedInfos)
|
|
.then(base64 => {
|
|
const payload = {
|
|
roomId: props.roomId,
|
|
base64Data: base64 || '',
|
|
};
|
|
window.inboxStore?.dispatch(updateDefaultBase64RoomData(payload));
|
|
})
|
|
.catch(e => {
|
|
window?.log?.warn('downloadPreviewOpenGroupV2 failed', e);
|
|
const payload = {
|
|
roomId: props.roomId,
|
|
base64Data: '',
|
|
};
|
|
window.inboxStore?.dispatch(updateDefaultBase64RoomData(payload));
|
|
});
|
|
}
|
|
} catch (e) {
|
|
window?.log?.warn(e);
|
|
}
|
|
}, [props.imageId, props.completeUrl]);
|
|
return (
|
|
<Avatar
|
|
size={AvatarSize.XS}
|
|
base64Data={props.base64Data}
|
|
{...props}
|
|
onAvatarClick={() => props.onClick(props.completeUrl)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const SessionJoinableRoomName = (props: JoinableRoomProps) => {
|
|
return <Flex padding="0 10px">{props.name}</Flex>;
|
|
};
|
|
|
|
const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
|
|
return (
|
|
<PillContainer
|
|
onClick={() => {
|
|
props.onClick(props.completeUrl);
|
|
}}
|
|
margin="5px"
|
|
padding="5px"
|
|
>
|
|
<SessionJoinableRoomAvatar {...props} />
|
|
<SessionJoinableRoomName {...props} />
|
|
</PillContainer>
|
|
);
|
|
};
|
|
|
|
export const SessionJoinableRooms = () => {
|
|
const joinableRooms = useSelector((state: StateType) => state.defaultRooms);
|
|
|
|
if (!joinableRooms.inProgress && !joinableRooms.rooms?.length) {
|
|
window?.log?.info('no default joinable rooms yet and not in progress');
|
|
return <></>;
|
|
}
|
|
|
|
const componentToRender = joinableRooms.inProgress ? (
|
|
<SessionSpinner loading={true} />
|
|
) : (
|
|
joinableRooms.rooms.map(r => {
|
|
return (
|
|
<SessionJoinableRoomRow
|
|
key={r.id}
|
|
completeUrl={r.completeUrl}
|
|
name={r.name}
|
|
roomId={r.id}
|
|
base64Data={r.base64Data}
|
|
onClick={completeUrl => {
|
|
void joinOpenGroupV2WithUIEvents(completeUrl, true, false);
|
|
}}
|
|
/>
|
|
);
|
|
})
|
|
);
|
|
|
|
return (
|
|
<Flex container={true} flexGrow={1} flexDirection="column" width="93%">
|
|
<H3 text={window.i18n('orJoinOneOfThese')} />
|
|
<Flex container={true} flexGrow={1} flexWrap="wrap" justifyContent="center">
|
|
{componentToRender}
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|