154 lines
3.5 KiB
JavaScript
154 lines
3.5 KiB
JavaScript
/*
|
|
* Main screen with top Navbar, chat scroll view,
|
|
* and Ad space components
|
|
*/
|
|
import React, { Component } from 'react';
|
|
import {
|
|
Dimensions,
|
|
View,
|
|
Text,
|
|
DrawerLayoutAndroid,
|
|
AsyncStorage
|
|
} from 'react-native';
|
|
import {
|
|
Actions
|
|
} from 'react-native-router-flux';
|
|
import { Fonts } from '../utils/Fonts.js';
|
|
|
|
import { Drawer } from 'native-base';
|
|
import Menu from './main/menu.js';
|
|
|
|
// imported components for different sections in main component
|
|
import Navbar from './main/navbar.js';
|
|
import Chat from './main/chat.js';
|
|
import AdSpace from './main/adspace.js';
|
|
|
|
const windowWidth = Dimensions.get('window').width;
|
|
const windowHeight = Dimensions.get('window').height;
|
|
|
|
const allAvatarLinks = ['https://images.pexels.com/photos/430207/pexels-photo-430207.jpeg?auto=compress&cs=tinysrgb&h=350', 'https://www.graphicpear.com/wp-content/uploads/2017/05/aaa.jpg', 'https://i.pinimg.com/736x/1f/12/87/1f1287b54f9d0c8f5c5fe86d27c95bbb--blue-patterns-indoor-outdoor-rugs.jpg'];
|
|
|
|
type Props = {};
|
|
export default class Main extends Component<Props> {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
position: {
|
|
long: props.long,
|
|
lat: props.lat
|
|
}
|
|
}
|
|
|
|
this.retrieveAvatar();
|
|
}
|
|
|
|
retrieveAvatar = async () => {
|
|
try {
|
|
const value = await AsyncStorage.getItem('avatar');
|
|
if (value !== null) {
|
|
// We have data!!
|
|
console.log("Have avatar: " + value);
|
|
|
|
this.setState({
|
|
avatar: parseInt(value)
|
|
});
|
|
} else {
|
|
var newValue = Math.floor(Math.random() * allAvatarLinks.length);
|
|
this.storeAvatar(newValue.toString());
|
|
|
|
this.setState({
|
|
avatar: newValue
|
|
});
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
// Error retrieving data
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
storeAvatar = async (linkIndex) => {
|
|
try {
|
|
await AsyncStorage.setItem('avatar', linkIndex);
|
|
} catch (error) {
|
|
// Error saving data
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
refreshConnection = () => {
|
|
|
|
}
|
|
|
|
disconnect = () => {
|
|
Actions.home();
|
|
}
|
|
|
|
refreshAvatar = () => {
|
|
var newAvatar = (this.state.avatar + 1) % allAvatarLinks.length;
|
|
this.setState({
|
|
avatar: newAvatar
|
|
});
|
|
|
|
this.storeAvatar(newAvatar.toString());
|
|
}
|
|
|
|
openDrawer = () => {
|
|
this.refs['menu'].openDrawer();
|
|
}
|
|
|
|
render() {
|
|
console.log('in Main');
|
|
|
|
const { position, avatar } = this.state;
|
|
const avatarLink = allAvatarLinks[avatar];
|
|
|
|
console.log(position);
|
|
|
|
return (
|
|
<DrawerLayoutAndroid
|
|
ref="menu"
|
|
drawerWidth={300}
|
|
drawerPosition={DrawerLayoutAndroid.positions.Left}
|
|
renderNavigationView={() => <Menu refreshConnection={this.refreshConnection}
|
|
refreshAvatar={this.refreshAvatar}
|
|
disconnect={this.disconnect}
|
|
avatar={avatarLink} />}>
|
|
<View style={styles.container}>
|
|
<View style={styles.navbar}>
|
|
<Navbar openDrawer={this.openDrawer} avatar={avatarLink} />
|
|
</View>
|
|
|
|
<View style={styles.chat}>
|
|
<Chat position={position} avatar={avatarLink} />
|
|
</View>
|
|
|
|
<View style={styles.adspace}>
|
|
<AdSpace />
|
|
</View>
|
|
</View>
|
|
</DrawerLayoutAndroid>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 18,
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
position: 'relative'
|
|
},
|
|
navbar: {
|
|
flex: 1
|
|
},
|
|
chat: {
|
|
flex: 15
|
|
},
|
|
adspace: {
|
|
flex: 0
|
|
}
|
|
}
|