Chore: Hooks app/views/SelectServerView (#4445)
* Chore: Hooks app/views/SelectServerView * refactor row_height * minor tweak
This commit is contained in:
parent
31a8c3e4fb
commit
3ac10ee860
|
@ -68,7 +68,7 @@ const InsideStack = () => {
|
|||
<Inside.Navigator screenOptions={screenOptions}>
|
||||
<Inside.Screen name='ShareListView' component={ShareListView} />
|
||||
<Inside.Screen name='ShareView' component={ShareView} />
|
||||
<Inside.Screen name='SelectServerView' component={SelectServerView} options={SelectServerView.navigationOptions} />
|
||||
<Inside.Screen name='SelectServerView' component={SelectServerView} />
|
||||
</Inside.Navigator>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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,60 +12,53 @@ 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<TServerModel[]>([]);
|
||||
|
||||
interface ISelectServerViewProps {
|
||||
navigation: StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>;
|
||||
server?: string;
|
||||
}
|
||||
const server = useAppSelector(state => state.share.server.server);
|
||||
const navigation = useNavigation<StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>>();
|
||||
|
||||
class SelectServerView extends React.Component<ISelectServerViewProps, ISelectServerViewState> {
|
||||
static navigationOptions = (): StackNavigationOptions => ({
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: I18n.t('Select_Server')
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
state = { servers: [] };
|
||||
|
||||
async componentDidMount() {
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
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;
|
||||
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 <ServerItem onPress={() => this.select(item.id)} item={item} hasCheck={item.id === server} />;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { servers } = this.state;
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<StatusBar />
|
||||
<FlatList
|
||||
data={servers}
|
||||
renderItem={({ item }: { item: TServerModel }) => (
|
||||
<ServerItem onPress={() => select(item.id)} item={item} hasCheck={item.id === server} />
|
||||
)}
|
||||
keyExtractor={keyExtractor}
|
||||
renderItem={this.renderItem}
|
||||
getItemLayout={getItemLayout} // Refactor row_height
|
||||
contentContainerStyle={List.styles.contentContainerStyleFlatList}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
contentContainerStyle={List.styles.contentContainerStyleFlatList}
|
||||
ListHeaderComponent={List.Separator}
|
||||
ListFooterComponent={List.Separator}
|
||||
removeClippedSubviews
|
||||
|
@ -73,11 +66,6 @@ class SelectServerView extends React.Component<ISelectServerViewProps, ISelectSe
|
|||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const mapStateToProps = ({ share }: IApplicationState) => ({
|
||||
server: share.server.server
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(SelectServerView);
|
||||
export default SelectServerView;
|
||||
|
|
Loading…
Reference in New Issue