diff --git a/app/share.tsx b/app/share.tsx index d8c712143..eed5f55ca 100644 --- a/app/share.tsx +++ b/app/share.tsx @@ -68,7 +68,7 @@ const InsideStack = () => { - + ); }; diff --git a/app/views/SelectServerView.tsx b/app/views/SelectServerView.tsx index de73b4bc4..ceddb088f 100644 --- a/app/views/SelectServerView.tsx +++ b/app/views/SelectServerView.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { useEffect, useLayoutEffect } from 'react'; import { FlatList } from 'react-native'; -import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; -import { connect } from 'react-redux'; +import { StackNavigationProp } from '@react-navigation/stack'; import { Q } from '@nozbe/watermelondb'; +import { useNavigation } from '@react-navigation/native'; import I18n from '../i18n'; import StatusBar from '../containers/StatusBar'; @@ -12,72 +12,60 @@ import database from '../lib/database'; import SafeAreaView from '../containers/SafeAreaView'; import * as List from '../containers/List'; 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 keyExtractor = (item: TServerModel) => item.id; -interface ISelectServerViewState { - servers: TServerModel[]; -} +const SelectServerView = () => { + const [servers, setServers] = React.useState([]); -interface ISelectServerViewProps { - navigation: StackNavigationProp; - server?: string; -} + const server = useAppSelector(state => state.share.server.server); + const navigation = useNavigation>(); -class SelectServerView extends React.Component { - static navigationOptions = (): StackNavigationOptions => ({ - title: I18n.t('Select_Server') - }); + useLayoutEffect(() => { + navigation.setOptions({ + title: I18n.t('Select_Server') + }); + }, [navigation]); - state = { servers: [] }; - - async componentDidMount() { - const serversDB = database.servers; - const serversCollection = serversDB.get('servers'); - const servers = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch(); - this.setState({ servers }); - } - - select = async (server: string) => { - const { server: currentServer, navigation } = this.props; + useEffect(() => { + const init = async () => { + const serversDB = database.servers; + const serversCollection = serversDB.get('servers'); + const serversResult = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch(); + setServers(serversResult); + }; + init(); + }, []); + const select = async (serverSelected: string) => { navigation.navigate('ShareListView'); - if (currentServer !== server) { - await shareExtensionInit(server); + if (serverSelected !== server) { + await shareExtensionInit(serverSelected); } }; - renderItem = ({ item }: { item: TServerModel }) => { - const { server } = this.props; - return this.select(item.id)} item={item} hasCheck={item.id === server} />; - }; + return ( + + + ( + 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' + /> + + ); +}; - render() { - const { servers } = this.state; - return ( - - - - - ); - } -} - -const mapStateToProps = ({ share }: IApplicationState) => ({ - server: share.server.server -}); - -export default connect(mapStateToProps)(SelectServerView); +export default SelectServerView;