diff --git a/MobileApp/src/screens/DiscoverScreen/DiscoverScreen.js b/MobileApp/src/screens/DiscoverScreen/DiscoverScreen.js index 13ea8c904..6fc3ed561 100644 --- a/MobileApp/src/screens/DiscoverScreen/DiscoverScreen.js +++ b/MobileApp/src/screens/DiscoverScreen/DiscoverScreen.js @@ -1,178 +1,202 @@ import * as React from 'react'; -import { View, StyleSheet, PermissionsAndroid, Image} from 'react-native' +import {View, StyleSheet, PermissionsAndroid, Alert} from 'react-native'; import MapView from 'react-native-maps'; -import { Marker } from 'react-native-maps'; +import {Marker} from 'react-native-maps'; import Geolocation from '@react-native-community/geolocation'; -import ActivityIndicator from '../../components/ActivityIndicator/ActivityIndicator' -import { NavigationEvents } from 'react-navigation' +import ActivityIndicator from '../../components/ActivityIndicator/ActivityIndicator'; +import {NavigationEvents} from 'react-navigation'; import database from '@react-native-firebase/database'; -import { generateResult } from '../../components/UserDataHandling/UserDataHandling'; -import {MAPMARKER} from '../../images/index' -var MapStyle = require('../../config/map.json') +import {generateResult} from '../../components/UserDataHandling/UserDataHandling'; +import {MAPMARKER} from '../../images/index'; +var MapStyle = require('../../config/map.json'); class DiscoverScreen extends React.Component { + static navigationOptions = ({navigation}) => { + return { + headerTitle: 'Explore Near By', + headerStyle: { + backgroundColor: '#014421', + }, + headerTintColor: 'white', + }; + }; - static navigationOptions = ({ navigation }) => { - return { - headerTitle: 'Explore Near By', - headerStyle: { - backgroundColor: '#014421', - }, - headerTintColor: 'white', - } - } - - constructor(props) { - super(props) - - this.state = { - observations: [], - location: [82.0, 6.8], - activityIndicator: true - } - } + constructor(props) { + super(props); - componentDidMount() { - this.findCoordinates() - this.getObservations() - } + this.state = { + observations: [], + location: [82.0, 6.8], + activityIndicator: true, + }; + } - getObservations = async function () { - // Fetch the data snapshot - const data = await database().ref(`/usersObservations/`).once('value') - // console.log(data) - const val = data.val() + componentDidMount() { + this.findCoordinates(); + this.getObservations(); + } - let observations = [] - for (let i in val) { - let name = val[i].uname - let photo = val[i].uimg - let userNick = name.toLowerCase().replace(/ /g, '') - let time = new Date(val[i].time) - let crntTime = new Date().getTime() - let dif = crntTime - time - if (dif <= 604800000) { continue } - let photUrl = val[i].photoURL - let location = val[i].location - time = time.toString().split(" ") - time = time.splice(0, time.length - 1) - time = time.toString().replace(/,/g, ' ') - let result = generateResult(val[i]) - let address = val[i].address - let marker = - { - title: time, - cordinates: - { - latitude: parseFloat(location[1]), - longitude: parseFloat(location[0]) - }, - description: address.toString() + getObservations = async function() { + // Fetch the data snapshot + const data = await database() + .ref(`/usersObservations/`) + .once('value'); + console.log(data); + const val = data.val(); - } - observations.push([name, photo, photUrl, location, time, userNick, result, marker, address]) - await this.setState({ - observations: observations, - }) - } + let observations = []; + for (let i in val) { + let name = val[i].uname; + let photo = val[i].uimg; + let userNick = name.toLowerCase().replace(/ /g, ''); + let time = new Date(val[i].time); + let crntTime = new Date().getTime(); + let dif = crntTime - time; + if (dif <= 604800000) { + continue; + } + let photUrl = val[i].photoURL; + let location = val[i].location; + time = time.toString().split(' '); + time = time.splice(0, time.length - 1); + time = time.toString().replace(/,/g, ' '); + let result = generateResult(val[i]); + let address = val[i].address; + let marker = { + title: time, + cordinates: { + latitude: parseFloat(location[1]), + longitude: parseFloat(location[0]), + }, + description: address.toString(), + }; + observations.push([ + name, + photo, + photUrl, + location, + time, + userNick, + result, + marker, + address, + ]); + await this.setState({ + observations: observations, + }); } + }; - findCoordinates = async () => { - try { - const granted = await PermissionsAndroid.request( - PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, + findCoordinates = async () => { + try { + const granted = await PermissionsAndroid.request( + PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, + ); + if (granted === PermissionsAndroid.RESULTS.GRANTED) { + console.log('Location'); + await Geolocation.getCurrentPosition( + async position => { + const initialPosition = position; + const lon = parseFloat(initialPosition['coords']['longitude']); + const lat = parseFloat(initialPosition['coords']['latitude']); + await this.setState({ + location: [lon, lat], + activityIndicator: false, + }); + }, + error => { + console.log('Error', JSON.stringify(error)); + this.setState({ + activityIndicator: false, + }); + // this.props.navigation.navigate('CameraViewScreen'); + return Alert.alert( + 'Location Error', + 'Please turn on the location access.', ); - if (granted === PermissionsAndroid.RESULTS.GRANTED) { - console.log("Location") - await Geolocation.getCurrentPosition( - async position => { - const initialPosition = position; - const lon = parseFloat(initialPosition['coords']['longitude']) - const lat = parseFloat(initialPosition['coords']['latitude']) - await this.setState({ location: [lon, lat], activityIndicator: false }); - }, - error => console.log('Error', JSON.stringify(error)), - { enableHighAccuracy: false }, - ); - } else { - await this.setState({ - activityIndicator: false - }) - - } - } catch (err) { - console.log(err.message) - } - }; - - render() { - return ( - - - {this.state.activityIndicator ? - - - - : - - {this.state.observations.map((val, i) => ( - this.props.navigation.navigate('showDetailedPhoto', - { - img: val[2], - title: val[0], - subtitle: val[5], - user: val[1], - content: val[6], - showPhoto: this.props.navigation - } - )} - // image={'map'} - /> - ))} - - } - - + }, + {enableHighAccuracy: false}, ); + } else { + await this.setState({ + activityIndicator: false, + }); + } + } catch (err) { + console.log(err.message); } + }; + + render() { + return ( + + + {this.state.activityIndicator ? ( + + + + ) : ( + + {this.state.observations.map((val, i) => ( + + this.props.navigation.navigate('showDetailedPhoto', { + img: val[2], + title: val[0], + subtitle: val[5], + user: val[1], + content: val[6], + showPhoto: this.props.navigation, + }) + } + // image={'map'} + /> + ))} + + )} + + ); + } } const styles = StyleSheet.create({ - MainContainer: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - alignItems: 'center', - justifyContent: 'flex-end', - }, - mapStyle: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - }, - indicator: { - width: "100%", - backgroundColor: 'grey' - } + MainContainer: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + alignItems: 'center', + justifyContent: 'flex-end', + }, + mapStyle: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + indicator: { + width: '100%', + backgroundColor: 'grey', + }, }); -export default DiscoverScreen; \ No newline at end of file +export default DiscoverScreen; diff --git a/MobileApp/src/screens/FeedScreen/FeedScreen.js b/MobileApp/src/screens/FeedScreen/FeedScreen.js index 4734a20ed..88f573c16 100644 --- a/MobileApp/src/screens/FeedScreen/FeedScreen.js +++ b/MobileApp/src/screens/FeedScreen/FeedScreen.js @@ -1,245 +1,288 @@ import * as React from 'react'; -import { View, StyleSheet,FlatList,Text,SafeAreaView, TouchableOpacity } from 'react-native' -import { Avatar} from 'react-native-paper'; -import ActivityIndicator from '../../components/ActivityIndicator/ActivityIndicator' -import { CardComponent } from '../../components/CardComponent/CardComponent' +import { + View, + StyleSheet, + FlatList, + Text, + SafeAreaView, + TouchableOpacity, +} from 'react-native'; +import {Avatar} from 'react-native-paper'; +import ActivityIndicator from '../../components/ActivityIndicator/ActivityIndicator'; +import {CardComponent} from '../../components/CardComponent/CardComponent'; import auth from '@react-native-firebase/auth'; import database from '@react-native-firebase/database'; -import { generateResult } from '../../components/UserDataHandling/UserDataHandling'; +import {generateResult} from '../../components/UserDataHandling/UserDataHandling'; class FeedScreen extends React.Component { + static navigationOptions = ({navigation}) => { + const {params = []} = navigation.state; + return { + headerTitle: 'Home', + headerStyle: { + backgroundColor: '#014421', + }, + headerTintColor: '#fff', - static navigationOptions = ({ navigation }) => { - const { params = [] } = navigation.state - return { - headerTitle: 'Home', - headerStyle: { - backgroundColor: '#014421', - }, - headerTintColor: '#fff', - - headerRight: () => navigation.navigate("Profile")} - > - {params.userPhoto!==''? - - : - - } - - , - } - } + headerRight: () => ( + navigation.navigate('Profile')}> + {params.userPhoto !== '' ? ( + + ) : ( + + )} + + ), + }; + }; - constructor(props) { - super(props) - this.state = { - observations: [], - activityIndicator: true, - refreshing: false, - } - } + constructor(props) { + super(props); + this.state = { + observations: [], + activityIndicator: true, + refreshing: false, + }; + } - componentDidMount() { - this.getUserData() - this.getObservations() - } + componentDidMount() { + this.getUserData(); + this.getObservations(); + } - getUserData = async function () { - const user = auth().currentUser; - // console.log(user) - const uid = user.uid - const ref = await database().ref('/users/').child(uid).once('value'); - const data = ref.val() - await this.props.navigation.setParams({ - userPhoto: data.photo, - userName: data.name - }) - } + getUserData = async function() { + const user = auth().currentUser; + // console.log(user) + const uid = user.uid; + const ref = await database() + .ref('/users/') + .child(uid) + .once('value'); + const data = ref.val(); + await this.props.navigation.setParams({ + userPhoto: data.photo, + userName: data.name, + }); + }; + + getObservations = async () => { + // Fetch the data snapshot + const data = await database() + .ref(`/usersObservations/`) + .orderByKey() + .limitToLast(5) + .once('value'); - getObservations = async() =>{ - // Fetch the data snapshot - const data = await database().ref(`/usersObservations/`).orderByKey().limitToLast(10).once('value') - - const val = data.val() - - let observations = [] - let lastVisible = '' - for (let i in val) { - let name = val[i].uname - let photo = val[i].uimg - let userNick = name.toLowerCase().replace(/ /g, '') - let time = new Date(val[i].time) - let crntTime = new Date().getTime() - let dif = crntTime - time - if (dif <= 604800000) { continue } - let photUrl = val[i].photoURL - let location = val[i].location - time = time.toString().split(" ") - time = time.splice(0, time.length - 1) - time = time.toString().replace(/,/g, ' ') - let result = generateResult(val[i]) - let address = val[i].address - - observations.push([name, photo, photUrl, location, time, userNick, result, address]) - this.setState({ - observations: observations, - activityIndicator: false - }) - - lastVisible = i - } - if(observations.length>2){ - observations.pop() - } - - await this.setState({ - activityIndicator: false, - lastVisible: lastVisible - }) - // console.log("Get "+lastVisible) + const val = data.val(); + + let observations = []; + let lastVisible = ''; + for (let i in val) { + let name = val[i].uname; + let photo = val[i].uimg; + let userNick = name.toLowerCase().replace(/ /g, ''); + let time = new Date(val[i].time); + let crntTime = new Date().getTime(); + let dif = crntTime - time; + if (dif <= 604800000) { + continue; + } + let photUrl = val[i].photoURL; + let location = val[i].location; + time = time.toString().split(' '); + time = time.splice(0, time.length - 1); + time = time.toString().replace(/,/g, ' '); + let result = generateResult(val[i]); + let address = val[i].address; + + observations.push([ + name, + photo, + photUrl, + location, + time, + userNick, + result, + address, + ]); + this.setState({ + observations: observations, + activityIndicator: false, + }); + + lastVisible = i; } + if (observations.length > 2) { + observations.pop(); + } + + await this.setState({ + activityIndicator: false, + lastVisible: lastVisible, + }); + // console.log("Get "+lastVisible) + }; + + getMoreObservation = async () => { + // console.log("hello") + let lastVisible = this.state.lastVisible; - getMoreObservation= async () => { - // console.log("hello") - let lastVisible = this.state.lastVisible - - const data = await database().ref(`/usersObservations/`).orderByKey().endAt(lastVisible).limitToLast(10).once('value') - - const val = data.val() - // console.log(val) - let observations = [] - for (let i in val) { - // console.log(i) - let name = val[i].uname - let photo = val[i].uimg - let userNick = name.toLowerCase().replace(/ /g, '') - let time = new Date(val[i].time) - let crntTime = new Date().getTime() - let dif = crntTime - time - if (dif <= 604800000) { continue } - let photUrl = val[i].photoURL - let location = val[i].location - time = time.toString().split(" ") - time = time.splice(0, time.length - 1) - time = time.toString().replace(/,/g, ' ') - let result = generateResult(val[i]) - let address = val[i].address - // console.log(result) - observations.push([name, photo, photUrl, location, time, userNick, result, address]) - lastVisible = i - } - observations.pop() - await this.setState({ - observations: [...this.state.observations,...observations], - activityIndicator: false, - lastVisible: lastVisible - }) - // console.log("Get more"+lastVisible) + const data = await database() + .ref(`/usersObservations/`) + .orderByKey() + .endAt(lastVisible) + .limitToLast(5) + .once('value'); + + const val = data.val(); + // console.log(val) + let observations = []; + for (let i in val) { + // console.log(i) + let name = val[i].uname; + let photo = val[i].uimg; + let userNick = name.toLowerCase().replace(/ /g, ''); + let time = new Date(val[i].time); + let crntTime = new Date().getTime(); + let dif = crntTime - time; + if (dif <= 604800000) { + continue; + } + let photUrl = val[i].photoURL; + let location = val[i].location; + time = time.toString().split(' '); + time = time.splice(0, time.length - 1); + time = time.toString().replace(/,/g, ' '); + let result = generateResult(val[i]); + let address = val[i].address; + // console.log(result) + observations.push([ + name, + photo, + photUrl, + location, + time, + userNick, + result, + address, + ]); + lastVisible = i; + } + observations.pop(); + await this.setState({ + observations: [...this.state.observations, ...observations], + activityIndicator: false, + lastVisible: lastVisible, + }); + // console.log("Get more"+lastVisible) + }; + renderHeader = () => { + try { + return Items; + } catch (error) { + console.log(error); } - renderHeader = () => { - try { - return ( - Items - ) - } - catch (error) { - console.log(error); - } - }; // Render Footer - renderFooter = () => { + }; // Render Footer + renderFooter = () => { try { - // Check If Loading - if (this.state.activityIndicator) { + // Check If Loading + if (this.state.activityIndicator) { return ( - - ) - } - else { + + ); + } else { return null; - } + } + } catch (error) { + console.log(error); } - catch (error) { - console.log(error); - } - }; - - render() { - return ( - - - {this.state.activityIndicator ? - - - - : - - - - {this.state.observations.length > 0? - - ( - - )} - // Item Key - keyExtractor={(item, index) => String(index)} - // Header (Title) - // On End Reached (Takes a function) - - // ListHeaderComponent={this.renderHeader} - // Footer (Activity Indicator) - ListFooterComponent={()=>} - onEndReached={this.getMoreObservation} - // How Close To The End Of List Until Next Data Request Is Made - onEndReachedThreshold={0.1} - // Refreshing (Set To True When End Reached) - refreshing={this.state.activityIndicator} - /> - - : - - } - - - - } + }; + render() { + return ( + + {this.state.activityIndicator ? ( + + + + ) : ( + + + {this.state.observations.length > 0 ? ( + + ( + + )} + // Item Key + keyExtractor={(item, index) => String(index)} + // Header (Title) + // On End Reached (Takes a function) + // ListHeaderComponent={this.renderHeader} + // Footer (Activity Indicator) + ListFooterComponent={() => ( + + )} + onEndReached={this.getMoreObservation} + // How Close To The End Of List Until Next Data Request Is Made + onEndReachedThreshold={0.1} + // Refreshing (Set To True When End Reached) + refreshing={this.state.activityIndicator} + /> + + ) : ( + + )} - - ); - } + + )} + + ); + } } const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'flex-start', - alignItems: 'center', - alignSelf: 'stretch', - }, - welcome: { - fontSize: 25 - } -}) -export default FeedScreen; \ No newline at end of file + container: { + flex: 1, + justifyContent: 'flex-start', + alignItems: 'center', + alignSelf: 'stretch', + }, + welcome: { + fontSize: 25, + }, +}); +export default FeedScreen;