add joinable rooms on opengroupv2 joining screen
Audric Ackermann
4 years ago
parent
6aa699ad23
commit
5289d4c2aa
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type PillContainerProps = {
|
||||
children: React.ReactNode;
|
||||
margin?: string;
|
||||
padding?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const StyledPillContainer = styled.div<PillContainerProps>`
|
||||
display: flex;
|
||||
background: none;
|
||||
flex-direction: 'row';
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
padding: ${props => props.padding || ''};
|
||||
margin: ${props => props.margin || ''};
|
||||
border-radius: 300px;
|
||||
border: 1px solid ${props => props.theme.colors.pillDividerColor};
|
||||
transition: ${props => props.theme.common.animations.defaultDuration};
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.clickableHovered};
|
||||
}
|
||||
`;
|
||||
|
||||
export const PillContainer = (props: PillContainerProps) => {
|
||||
return <StyledPillContainer {...props}>{props.children}</StyledPillContainer>;
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type TextProps = {
|
||||
text: string;
|
||||
subtle?: boolean;
|
||||
opposite?: boolean;
|
||||
};
|
||||
|
||||
const StyledDefaultText = styled.div<TextProps>`
|
||||
transition: ${props => props.theme.common.animations.defaultDuration};
|
||||
font-family: ${props => props.theme.common.fonts.sessionFontDefault};
|
||||
color: ${props =>
|
||||
props.opposite
|
||||
? props.theme.colors.textColorOpposite
|
||||
: props.subtle
|
||||
? props.theme.colors.textColorSubtle
|
||||
: props.theme.colors.textColor};
|
||||
`;
|
||||
|
||||
export const Text = (props: TextProps) => {
|
||||
return <StyledDefaultText {...props}>{props.text}</StyledDefaultText>;
|
||||
};
|
||||
@ -0,0 +1,70 @@
|
||||
import React, { useReducer } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { joinOpenGroupV2WithUIEvents } from '../../opengroup/opengroupV2/JoinOpenGroupV2';
|
||||
import { StateType } from '../../state/reducer';
|
||||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
import { Flex } from '../basic/Flex';
|
||||
import { PillContainer } from '../basic/PillContainer';
|
||||
// tslint:disable: no-void-expression
|
||||
|
||||
export type JoinableRoomProps = {
|
||||
completeUrl: string;
|
||||
name: string;
|
||||
imageId?: string;
|
||||
onClick: (completeUrl: string) => void;
|
||||
};
|
||||
|
||||
const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
|
||||
return (
|
||||
<Avatar
|
||||
size={AvatarSize.XS}
|
||||
{...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?.length) {
|
||||
console.warn('no default joinable rooms yet');
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex container={true} flexGrow={1} flexWrap="wrap">
|
||||
{joinableRooms.map(r => {
|
||||
return (
|
||||
<SessionJoinableRoomRow
|
||||
key={r.id}
|
||||
completeUrl={r.completeUrl}
|
||||
name={r.name}
|
||||
onClick={completeUrl => {
|
||||
void joinOpenGroupV2WithUIEvents(completeUrl, true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import { OpenGroupV2InfoJoinable } from '../../opengroup/opengroupV2/ApiUtil';
|
||||
|
||||
export type DefaultRoomsState = Array<OpenGroupV2InfoJoinable>;
|
||||
|
||||
const initialState: DefaultRoomsState = [];
|
||||
|
||||
/**
|
||||
* This slice is the one holding the default joinable rooms fetched once in a while from the default opengroup v2 server.
|
||||
*/
|
||||
const defaultRoomsSlice = createSlice({
|
||||
name: 'defaultRooms',
|
||||
initialState,
|
||||
reducers: {
|
||||
updateDefaultRooms(state, action) {
|
||||
window.log.warn('updating default rooms', action.payload);
|
||||
return action.payload as DefaultRoomsState;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const { actions, reducer } = defaultRoomsSlice;
|
||||
export const { updateDefaultRooms } = actions;
|
||||
export const defaultRoomReducer = reducer;
|
||||
Loading…
Reference in New Issue