verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Hooks app/views/SelectServerView (#4445) 

* Chore: Hooks app/views/SelectServerView

* refactor row_height

* minor tweak
This commit is contained in:
Reinaldo Neto 2022-08-18 19:09:25 -03:00 committed by GitHub
parent 31a8c3e4fb
commit 3ac10ee860
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/share.tsx
View File

@ -68,7 +68,7 @@ const InsideStack = () => {
<Inside.Navigator screenOptions={screenOptions}> <Inside.Navigator screenOptions={screenOptions}>
<Inside.Screen name='ShareListView' component={ShareListView} /> <Inside.Screen name='ShareListView' component={ShareListView} />
<Inside.Screen name='ShareView' component={ShareView} /> <Inside.Screen name='ShareView' component={ShareView} />
<Inside.Screen name='SelectServerView' component={SelectServerView} options={SelectServerView.navigationOptions} /> <Inside.Screen name='SelectServerView' component={SelectServerView} />
</Inside.Navigator> </Inside.Navigator>
); );
}; };

106
app/views/SelectServerView.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React, { useEffect, useLayoutEffect } from 'react';
import { FlatList } from 'react-native'; import { FlatList } from 'react-native';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationProp } from '@react-navigation/stack';
import { connect } from 'react-redux';
import { Q } from '@nozbe/watermelondb'; import { Q } from '@nozbe/watermelondb';
import { useNavigation } from '@react-navigation/native';
import I18n from '../i18n'; import I18n from '../i18n';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
@ -12,72 +12,60 @@ import database from '../lib/database';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import * as List from '../containers/List'; import * as List from '../containers/List';
import { ShareInsideStackParamList } from '../definitions/navigationTypes'; import { ShareInsideStackParamList } from '../definitions/navigationTypes';
import { IApplicationState, TServerModel } from '../definitions'; import { TServerModel } from '../definitions';
import { useAppSelector } from '../lib/hooks';
const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index }); const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
const keyExtractor = (item: TServerModel) => item.id; const keyExtractor = (item: TServerModel) => item.id;
interface ISelectServerViewState { const SelectServerView = () => {
servers: TServerModel[]; const [servers, setServers] = React.useState<TServerModel[]>([]);
}
interface ISelectServerViewProps { const server = useAppSelector(state => state.share.server.server);
navigation: StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>; const navigation = useNavigation<StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>>();
server?: string;
}
class SelectServerView extends React.Component<ISelectServerViewProps, ISelectServerViewState> { useLayoutEffect(() => {
static navigationOptions = (): StackNavigationOptions => ({ navigation.setOptions({
title: I18n.t('Select_Server') title: I18n.t('Select_Server')
}); });
}, [navigation]);
state = { servers: [] }; useEffect(() => {
const init = async () => {
async componentDidMount() { const serversDB = database.servers;
const serversDB = database.servers; const serversCollection = serversDB.get('servers');
const serversCollection = serversDB.get('servers'); const serversResult = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch();
const servers = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch(); setServers(serversResult);
this.setState({ servers }); };
} init();
}, []);
select = async (server: string) => {
const { server: currentServer, navigation } = this.props;
const select = async (serverSelected: string) => {
navigation.navigate('ShareListView'); navigation.navigate('ShareListView');
if (currentServer !== server) { if (serverSelected !== server) {
await shareExtensionInit(server); await shareExtensionInit(serverSelected);
} }
}; };
renderItem = ({ item }: { item: TServerModel }) => { return (
const { server } = this.props; <SafeAreaView>
return <ServerItem onPress={() => this.select(item.id)} item={item} hasCheck={item.id === server} />; <StatusBar />
}; <FlatList
data={servers}
renderItem={({ item }: { item: TServerModel }) => (
<ServerItem onPress={() => select(item.id)} item={item} hasCheck={item.id === server} />
)}
keyExtractor={keyExtractor}
getItemLayout={getItemLayout} // Refactor row_height
ItemSeparatorComponent={List.Separator}
contentContainerStyle={List.styles.contentContainerStyleFlatList}
ListHeaderComponent={List.Separator}
ListFooterComponent={List.Separator}
removeClippedSubviews
keyboardShouldPersistTaps='always'
/>
</SafeAreaView>
);
};
render() { export default SelectServerView;
const { servers } = this.state;
return (
<SafeAreaView>
<StatusBar />
<FlatList
data={servers}
keyExtractor={keyExtractor}
renderItem={this.renderItem}
getItemLayout={getItemLayout} // Refactor row_height
contentContainerStyle={List.styles.contentContainerStyleFlatList}
ItemSeparatorComponent={List.Separator}
ListHeaderComponent={List.Separator}
ListFooterComponent={List.Separator}
removeClippedSubviews
keyboardShouldPersistTaps='always'
/>
</SafeAreaView>
);
}
}
const mapStateToProps = ({ share }: IApplicationState) => ({
server: share.server.server
});
export default connect(mapStateToProps)(SelectServerView);