chore: migrate AddExistingTeamView to hooks (#5042)

* chore: migrate AddExistingTeamView to hooks

* fix masterdetailstack lint

* fix inside stack

* minor tweak

* tweak empty space
This commit is contained in:
Reinaldo Neto 2023-07-06 14:40:46 -03:00 committed by GitHub
parent 0dbaff4f63
commit a44951296d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 187 additions and 238 deletions

View File

@ -410,7 +410,6 @@ export default function subscribeRooms() {
log(e);
}
}
if (/video-conference/.test(ev)) {
const [action, params] = ddpMessage.fields.args;
store.dispatch(handleVideoConfIncomingWebsocketMessages({ action, params }));

View File

@ -128,11 +128,7 @@ const ChatsStackNavigator = () => {
<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} />
<ChatsStack.Screen name='CreateChannelView' component={CreateChannelView} />
<ChatsStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
<ChatsStack.Screen
name='AddExistingChannelView'
component={AddExistingChannelView}
options={AddExistingChannelView.navigationOptions}
/>
<ChatsStack.Screen name='AddExistingChannelView' component={AddExistingChannelView} />
{/* @ts-ignore */}
<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
{/* @ts-ignore */}

View File

@ -130,12 +130,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
{/* @ts-ignore */}
<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} />
<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
<ModalStack.Screen
name='AddExistingChannelView'
// @ts-ignore
component={AddExistingChannelView}
options={AddExistingChannelView.navigationOptions}
/>
<ModalStack.Screen name='AddExistingChannelView' component={AddExistingChannelView} />
<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
<ModalStack.Screen name='MessagesView' component={MessagesView} />
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} />

View File

@ -10,7 +10,6 @@ import { IMessage, TAnyMessageModel, TMessageModel } from '../definitions/IMessa
import { TServerModel } from '../definitions/IServer';
import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
import { TChangeAvatarViewContext } from '../definitions/TChangeAvatarViewContext';
import { IItem } from '../views/TeamChannelsView';
import { MasterDetailInsideStackParamList, ModalStackParamList } from './MasterDetailStack/types';
import { TNavigation } from './stackType';
@ -154,12 +153,10 @@ export type ChatsStackParamList = {
teamId?: string;
};
AddChannelTeamView: {
teamId?: string;
teamChannels: IItem[];
teamId: string;
};
AddExistingChannelView: {
teamId?: string;
teamChannels: IItem[];
teamId: string;
};
MarkdownTableView: {
renderRows: (drawExtraBorders?: boolean) => JSX.Element;

View File

@ -40,7 +40,9 @@ const setHeader = ({
const AddChannelTeamView = () => {
const navigation = useNavigation<TNavigation>();
const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
const { teamChannels, teamId } = useRoute<TRoute>().params;
const {
params: { teamId }
} = useRoute<TRoute>();
useEffect(() => {
setHeader({ navigation, isMasterDetail });
@ -70,7 +72,7 @@ const AddChannelTeamView = () => {
<List.Separator />
<List.Item
title='Add_Existing'
onPress={() => navigation.navigate('AddExistingChannelView', { teamId, teamChannels })}
onPress={() => navigation.navigate('AddExistingChannelView', { teamId })}
testID='add-channel-team-view-add-existing'
left={() => <List.Icon name='channel-public' />}
right={() => <List.Icon name='chevron-right' />}

View File

@ -1,217 +0,0 @@
import React from 'react';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import { Q } from '@nozbe/watermelondb';
import * as List from '../containers/List';
import database from '../lib/database';
import I18n from '../i18n';
import log, { events, logEvent } from '../lib/methods/helpers/log';
import SearchBox from '../containers/SearchBox';
import * as HeaderButton from '../containers/HeaderButton';
import StatusBar from '../containers/StatusBar';
import { themes } from '../lib/constants';
import { TSupportedThemes, withTheme } from '../theme';
import SafeAreaView from '../containers/SafeAreaView';
import { sendLoadingEvent } from '../containers/Loading';
import { animateNextTransition } from '../lib/methods/helpers/layoutAnimation';
import { showErrorAlert } from '../lib/methods/helpers/info';
import { ChatsStackParamList } from '../stacks/types';
import { TSubscriptionModel, SubscriptionType, IApplicationState } from '../definitions';
import { getRoomTitle, hasPermission, debounce } from '../lib/methods/helpers';
import { Services } from '../lib/services';
interface IAddExistingChannelViewState {
search: TSubscriptionModel[];
channels: TSubscriptionModel[];
selected: string[];
}
interface IAddExistingChannelViewProps {
navigation: StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
route: RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
theme?: TSupportedThemes;
isMasterDetail: boolean;
addTeamChannelPermission?: string[];
}
const QUERY_SIZE = 50;
class AddExistingChannelView extends React.Component<IAddExistingChannelViewProps, IAddExistingChannelViewState> {
private teamId: string;
constructor(props: IAddExistingChannelViewProps) {
super(props);
this.query();
this.teamId = props.route?.params?.teamId ?? '';
this.state = {
search: [],
channels: [],
selected: []
};
this.setHeader();
}
setHeader = () => {
const { navigation, isMasterDetail } = this.props;
const { selected } = this.state;
const options: StackNavigationOptions = {
headerTitle: I18n.t('Add_Existing_Channel')
};
if (isMasterDetail) {
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
}
options.headerRight = () =>
selected.length > 0 && (
<HeaderButton.Container>
<HeaderButton.Item title={I18n.t('Next')} onPress={this.submit} testID='add-existing-channel-view-submit' />
</HeaderButton.Container>
);
navigation.setOptions(options);
};
query = async (stringToSearch = '') => {
try {
const { addTeamChannelPermission } = this.props;
const db = database.active;
const channels = await db
.get('subscriptions')
.query(
Q.where('team_id', ''),
Q.where('t', Q.oneOf(['c', 'p'])),
Q.where('name', Q.like(`%${stringToSearch}%`)),
Q.take(QUERY_SIZE),
Q.sortBy('room_updated_at', Q.desc)
)
.fetch();
const asyncFilter = async (channelsArray: TSubscriptionModel[]) => {
const results = await Promise.all(
channelsArray.map(async channel => {
if (channel.prid) {
return false;
}
const permissions = await hasPermission([addTeamChannelPermission], channel.rid);
if (!permissions[0]) {
return false;
}
return true;
})
);
return channelsArray.filter((_v: any, index: number) => results[index]);
};
const channelFiltered = await asyncFilter(channels);
this.setState({ channels: channelFiltered });
} catch (e) {
log(e);
}
};
onSearchChangeText = debounce((text: string) => {
this.query(text);
}, 300);
dismiss = () => {
const { navigation } = this.props;
return navigation.pop();
};
submit = async () => {
const { selected } = this.state;
const { navigation } = this.props;
sendLoadingEvent({ visible: true });
try {
logEvent(events.CT_ADD_ROOM_TO_TEAM);
const result = await Services.addRoomsToTeam({ rooms: selected, teamId: this.teamId });
if (result.success) {
sendLoadingEvent({ visible: false });
// Expect that after you add an existing channel to a team, the user should move back to the team
navigation.navigate('RoomView');
}
} catch (e: any) {
logEvent(events.CT_ADD_ROOM_TO_TEAM_F);
showErrorAlert(I18n.t(e.data.error), I18n.t('Add_Existing_Channel'), () => {});
sendLoadingEvent({ visible: false });
}
};
renderHeader = () => (
<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='add-existing-channel-view-search' />
);
isChecked = (rid: string) => {
const { selected } = this.state;
return selected.includes(rid);
};
toggleChannel = (rid: string) => {
const { selected } = this.state;
animateNextTransition();
if (!this.isChecked(rid)) {
logEvent(events.AEC_ADD_CHANNEL);
this.setState({ selected: [...selected, rid] }, () => this.setHeader());
} else {
logEvent(events.AEC_REMOVE_CHANNEL);
const filterSelected = selected.filter(el => el !== rid);
this.setState({ selected: filterSelected }, () => this.setHeader());
}
};
renderItem = ({ item }: { item: TSubscriptionModel }) => {
const isChecked = this.isChecked(item.rid);
// TODO: reuse logic inside RoomTypeIcon
const icon = item.t === SubscriptionType.DIRECT && !item?.teamId ? 'channel-private' : 'channel-public';
return (
<List.Item
title={getRoomTitle(item)}
translateTitle={false}
onPress={() => this.toggleChannel(item.rid)}
testID={`add-existing-channel-view-item-${item.name}`}
left={() => <List.Icon name={icon} />}
right={() => (isChecked ? <List.Icon name='check' /> : null)}
/>
);
};
renderList = () => {
const { search, channels } = this.state;
const { theme } = this.props;
return (
<FlatList
data={search.length > 0 ? search : channels}
extraData={this.state}
keyExtractor={item => item.id}
ListHeaderComponent={this.renderHeader}
renderItem={this.renderItem}
ItemSeparatorComponent={List.Separator}
contentContainerStyle={{ backgroundColor: themes[theme!].backgroundColor }}
keyboardShouldPersistTaps='always'
/>
);
};
render() {
return (
<SafeAreaView testID='add-existing-channel-view'>
<StatusBar />
{this.renderList()}
</SafeAreaView>
);
}
}
const mapStateToProps = (state: IApplicationState) => ({
isMasterDetail: state.app.isMasterDetail,
addTeamChannelPermission: state.permissions['add-team-channel']
});
export default connect(mapStateToProps)(withTheme(AddExistingChannelView));

View File

@ -0,0 +1,177 @@
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { FlatList } from 'react-native';
import { Q } from '@nozbe/watermelondb';
import * as List from '../../containers/List';
import database from '../../lib/database';
import I18n from '../../i18n';
import log, { events, logEvent } from '../../lib/methods/helpers/log';
import SearchBox from '../../containers/SearchBox';
import * as HeaderButton from '../../containers/HeaderButton';
import StatusBar from '../../containers/StatusBar';
import { useTheme } from '../../theme';
import SafeAreaView from '../../containers/SafeAreaView';
import { sendLoadingEvent } from '../../containers/Loading';
import { animateNextTransition } from '../../lib/methods/helpers/layoutAnimation';
import { showErrorAlert } from '../../lib/methods/helpers/info';
import { ChatsStackParamList } from '../../stacks/types';
import { TSubscriptionModel, SubscriptionType } from '../../definitions';
import { getRoomTitle, hasPermission, useDebounce } from '../../lib/methods/helpers';
import { Services } from '../../lib/services';
import { useAppSelector } from '../../lib/hooks';
type TNavigation = StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
type TRoute = RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
const QUERY_SIZE = 50;
const AddExistingChannelView = () => {
const [channels, setChannels] = useState<TSubscriptionModel[]>([]);
const [selected, setSelected] = useState<string[]>([]);
const { colors } = useTheme();
const navigation = useNavigation<TNavigation>();
const {
params: { teamId }
} = useRoute<TRoute>();
const { addTeamChannelPermission, isMasterDetail } = useAppSelector(state => ({
isMasterDetail: state.app.isMasterDetail,
addTeamChannelPermission: state.permissions['add-team-channel']
}));
useLayoutEffect(() => {
setHeader();
}, [selected.length]);
useEffect(() => {
query();
}, []);
const setHeader = () => {
const options: StackNavigationOptions = {
headerTitle: I18n.t('Add_Existing_Channel')
};
if (isMasterDetail) {
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
}
options.headerRight = () =>
selected.length > 0 && (
<HeaderButton.Container>
<HeaderButton.Item title={I18n.t('Next')} onPress={submit} testID='add-existing-channel-view-submit' />
</HeaderButton.Container>
);
navigation.setOptions(options);
};
const query = async (stringToSearch = '') => {
try {
const db = database.active;
const channels = await db
.get('subscriptions')
.query(
Q.where('team_id', ''),
Q.where('t', Q.oneOf(['c', 'p'])),
Q.where('name', Q.like(`%${stringToSearch}%`)),
Q.take(QUERY_SIZE),
Q.sortBy('room_updated_at', Q.desc)
)
.fetch();
const asyncFilter = async (channelsArray: TSubscriptionModel[]) => {
const results = await Promise.all(
channelsArray.map(async channel => {
if (channel.prid) {
return false;
}
const permissions = await hasPermission([addTeamChannelPermission], channel.rid);
if (!permissions[0]) {
return false;
}
return true;
})
);
return channelsArray.filter((_v: any, index: number) => results[index]);
};
const channelFiltered = await asyncFilter(channels);
setChannels(channelFiltered);
} catch (e) {
log(e);
}
};
const onSearchChangeText = useDebounce((text: string) => {
query(text);
}, 300);
const isChecked = (rid: string) => selected.includes(rid);
const toggleChannel = (rid: string) => {
animateNextTransition();
if (!isChecked(rid)) {
logEvent(events.AEC_ADD_CHANNEL);
setSelected([...selected, rid]);
} else {
logEvent(events.AEC_REMOVE_CHANNEL);
const filterSelected = selected.filter(el => el !== rid);
setSelected(filterSelected);
}
};
const submit = async () => {
sendLoadingEvent({ visible: true });
try {
logEvent(events.CT_ADD_ROOM_TO_TEAM);
const result = await Services.addRoomsToTeam({ rooms: selected, teamId });
if (result.success) {
sendLoadingEvent({ visible: false });
// Expect that after you add an existing channel to a team, the user should move back to the team
navigation.navigate('RoomView');
}
} catch (e: any) {
logEvent(events.CT_ADD_ROOM_TO_TEAM_F);
showErrorAlert(I18n.t(e.data.error), I18n.t('Add_Existing_Channel'), () => {});
sendLoadingEvent({ visible: false });
}
};
return (
<SafeAreaView testID='add-existing-channel-view'>
<StatusBar />
<FlatList
data={channels}
extraData={channels}
keyExtractor={item => item.id}
ListHeaderComponent={
<SearchBox onChangeText={(text: string) => onSearchChangeText(text)} testID='add-existing-channel-view-search' />
}
renderItem={({ item }: { item: TSubscriptionModel }) => {
// TODO: reuse logic inside RoomTypeIcon
const icon = item.t === SubscriptionType.GROUP && !item?.teamId ? 'channel-private' : 'channel-public';
return (
<List.Item
title={getRoomTitle(item)}
translateTitle={false}
onPress={() => toggleChannel(item.rid)}
testID={`add-existing-channel-view-item-${item.name}`}
left={() => <List.Icon name={icon} />}
right={() => (isChecked(item.rid) ? <List.Icon name='check' /> : null)}
/>
);
}}
ItemSeparatorComponent={List.Separator}
contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
keyboardShouldPersistTaps='always'
/>
</SafeAreaView>
);
};
export default AddExistingChannelView;

View File

@ -186,7 +186,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
}, 300);
setHeader = () => {
const { isSearching, showCreate, data } = this.state;
const { isSearching, showCreate } = this.state;
const { navigation, isMasterDetail, theme } = this.props;
const { team } = this;
@ -234,7 +234,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
<HeaderButton.Item
iconName='create'
testID='team-channels-view-create'
onPress={() => navigation.navigate('AddChannelTeamView', { teamId: this.teamId, teamChannels: data })}
onPress={() => navigation.navigate('AddChannelTeamView', { teamId: this.teamId })}
/>
) : null}
<HeaderButton.Item iconName='search' testID='team-channels-view-search' onPress={this.onSearchPress} />