This commit is contained in:
João Borges 2019-03-18 16:44:41 +00:00
parent c2b7539e2f
commit ce8d7ed01d
3 changed files with 446 additions and 385 deletions

View File

@ -1,429 +1,444 @@
import React, { Component } from "react"; import React, {Component} from "react";
import { import {
Button, Button,
View, View,
Text, Text,
TouchableOpacity, TouchableOpacity,
FlatList, FlatList,
ActivityIndicator, ActivityIndicator,
Dimensions, Dimensions,
StyleSheet, StyleSheet,
Image, Image,
ImageBackground, ImageBackground,
NetInfo, NetInfo,
AppState AppState
} from "react-native"; } from "react-native";
import { Shadow } from "react-native-shadow"; import {Shadow} from "react-native-shadow";
import Icon from "react-native-vector-icons/Ionicons"; import Icon from "react-native-vector-icons/Ionicons";
import { RkButton, RkTheme } from "react-native-ui-kitten"; import {RkButton, RkTheme} from "react-native-ui-kitten";
import { connect } from "react-redux"; import {connect} from "react-redux";
import { bindActionCreators } from "redux"; import {bindActionCreators} from "redux";
import * as Actions from "../store/actions"; //Import your actionss import * as Actions from "../store/actions"; //Import your actionss
import ImageOverlay from "react-native-image-overlay"; import ImageOverlay from "react-native-image-overlay";
import { createStore } from "redux"; import {createStore} from "redux";
import PTRView from "react-native-pull-to-refresh"; import PTRView from "react-native-pull-to-refresh";
import { Provider } from "react-redux"; import {Provider} from "react-redux";
import { ScrollView } from "react-native-gesture-handler"; import {ScrollView} from "react-native-gesture-handler";
const SCREEN_HEIGHT = Dimensions.get("window").height; const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width; const SCREEN_WIDTH = Dimensions.get("window").width;
import { Card, Divider } from "react-native-elements"; import {Card, Divider} from "react-native-elements";
import RNMaterialShadows from "react-native-material-shadows"; import RNMaterialShadows from "react-native-material-shadows";
import IconFA from "react-native-vector-icons/FontAwesome5"; import IconFA from "react-native-vector-icons/FontAwesome5";
class Home extends Component { class Home extends Component {
_handleConnectionChange = isConnected => { _handleConnectionChange = isConnected => {
// this.props.dispatch(connectionState({ status: isConnected })); // this.props.dispatch(connectionState({ status: isConnected }));
console.log("fck that"); console.log("fck that");
};
_refresh() {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, 2000);
});
}
_callApi() {
this.props.getUserInfo(this.props.token);
}
constructor(props) {
super(props);
this.state = {
token: { valid: false },
logged: true,
onHold: true,
user: { Name: "" },
userDetails: {},
appState: AppState.currentState
}; };
}
handleConnectivityChange = () => {
console.log("asdasdasdasdasd");
};
componentDidMount() { _refresh() {
// NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange); return new Promise(resolve => {
setTimeout(() => {
// this.props.hold(); resolve();
console.log("hold" + this.props.onHold); }, 2000);
//this.props.logoutUser(); });
//console.log(this.props.token);
this.props.getUserInfo(this.props.userDetails.token);
//console.log('logged:'+this.props.logged);
//console.log(th2is.props)
}
componentWillUnmount() {}
bClick() {
//this.props.logoutUser();
let a = {};
// this.setState({ user: this.props.user });
// console.log(this.props.user)
//
//var navigate = this.props.navigation.navigate
}
_update = () => {
this.props.getUserInfo(this.props.userDetails.token);
};
render() {
const { navigate } = this.props.navigation;
if (this.props.onHold) {
return (
<View>
<Text>lollsss {this.props.onHold}</Text>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
} }
if (this.props.logged) {
return (
<PTRView onRefresh={this._update}>
<ScrollView style={{ backgroundColor: "#eeeeee" }}>
<View>
<ImageBackground
opacity={0.9}
source={require("../assets/img/bg_3.jpg")}
style={{
width: "100%",
// marginTop:150, _callApi() {
backgroundColor: "rgba(255,255,255,1)" this.props.getUserInfo(this.props.token);
}} }
>
<View style={styles.homeHeader}> constructor(props) {
<View style={styles.userImageContainer}> super(props);
<Image
style={styles.userImage} this.state = {
source={{ uri: "https://i.imgur.com/XXJ7LxV.jpg" }} token: {valid: false},
/> logged: true,
</View> onHold: true,
{this.props.user != undefined && ( user: {Name: ""},
<Text style={styles.userText}>{this.props.user.Name}</Text> userDetails: {},
)} appState: AppState.currentState
<Text style={styles.userTextSub}> };
{this.props.user.Company} }
</Text>
</View> handleConnectivityChange = () => {
</ImageBackground> console.log("asdasdasdasdasd");
};
<View style={styles.userStats}>
<View style={{backgroundColor:'orange'}}> componentDidMount() {
<Text style={styles.userStatsTitle}>Informações Importantes</Text> // NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
</View>
// this.props.hold();
<View style={styles.userStatsBox}> console.log("hold" + this.props.onHold);
<Text style={{margin:10}}>Grupo de ....</Text> //this.props.logoutUser();
<Text style={{margin:10}}>Alojamento</Text>
</View> //console.log(this.props.token);
</View>
this.props.getUserInfo(this.props.userDetails.token);
<View>
<View //console.log('logged:'+this.props.logged);
style={{
margin: 10, //console.log(th2is.props)
marginTop: 20, }
backgroundColor: "white",
borderRadius: 3 componentWillUnmount() {
}} }
>
<View style={{ backgroundColor: "#CC1A17" , flex:1, flexDirection:'row'}}> bClick() {
<View style={{width:'79%'}}> //this.props.logoutUser();
<Text
style={{ let a = {};
fontSize: 25, // this.setState({ user: this.props.user });
color: "white", // console.log(this.props.user)
margin: 10, //
fontWeight: "bold",
marginBottom: 0 //var navigate = this.props.navigation.navigate
}} }
>
Os tones _update = () => {
</Text> this.props.getUserInfo(this.props.userDetails.token);
<Text };
style={{
color: "white",
marginLeft: 10, /*_removeMember = (membro.id) => {
marginBottom: 5
}} };*/
>
5/6 elementos render() {
</Text> const {navigate} = this.props.navigation;
</View>
<View style={{alignItems:'center', alignContent:'center',alignSelf:'center'}}> if (this.props.onHold) {
<IconFA name="plus" color={'white'} size={30} /> return (
<Text style={{color:'white'}}>Adicionar</Text> <View>
</View> <Text>lollsss {this.props.onHold}</Text>
</View> <ActivityIndicator size="large" color="#0000ff"/>
</View>
<View> );
<View style={{ flex: 1 }}> }
<View style={styles.user}> if (this.props.logged) {
<View style={styles.userLogo}> return (
<IconFA name="user" size={40} /> <PTRView onRefresh={this._update}>
</View> <ScrollView style={{backgroundColor: "#eeeeee"}}>
<View style={styles.userT}> <View>
<Text style={styles.userName}>Henrique Dias</Text> <ImageBackground
<Text>AFFJASDXZ</Text> opacity={0.9}
</View> source={require("../assets/img/bg_3.jpg")}
style={{
<TouchableOpacity style={styles.userRemove}> width: "100%",
<Text style={{fontWeight:'bold'}}>rm equipa</Text> // marginTop:150,
</TouchableOpacity> backgroundColor: "rgba(255,255,255,1)"
</View> }}
<Divider style={{ backgroundColor: "black" }} /> >
<View style={styles.user}> <View style={styles.homeHeader}>
<View style={styles.userLogo}> <View style={styles.userImageContainer}>
<IconFA name="user" size={40} /> <Image
</View> style={styles.userImage}
<View style={styles.userT}> source={{uri: "https://i.imgur.com/XXJ7LxV.jpg"}}
<Text style={styles.userName}>Henrique Dias</Text> />
<Text>AFFJASDXZ</Text> </View>
</View> {this.props.user != undefined && (
<Text style={styles.userText}>{this.props.user.Name}</Text>
<TouchableOpacity style={styles.userRemove}> )}
<IconFA name="times" color={"#CC1A17"} size={30} /> <Text style={styles.userTextSub}>
<Text>remover</Text> {this.props.user.Company}
</TouchableOpacity> </Text>
</View> </View>
<Divider style={{ backgroundColor: "black" }} /> </ImageBackground>
<View style={styles.user}>
<View style={styles.userLogo}> <View style={styles.userStats}>
<IconFA name="user" size={40} /> <View style={{backgroundColor: 'orange'}}>
</View> <Text style={styles.userStatsTitle}>Informações Importantes</Text>
<View style={styles.userT}> </View>
<Text style={styles.userName}>Henrique Dias</Text>
<Text>AFFJASDXZ</Text> <View style={styles.userStatsBox}>
</View> <Text style={{margin: 10}}>Grupo de ....</Text>
<Text style={{margin: 10}}>Alojamento</Text>
<TouchableOpacity style={styles.userRemove}> </View>
<IconFA name="times" color={"#CC1A17"} size={30} /> </View>
<Text>remover</Text>
</TouchableOpacity> <View>
</View> <View
<Divider style={{ backgroundColor: "black" }} /> style={{
<View style={styles.user}> margin: 10,
<View style={styles.userLogo}> marginTop: 20,
<IconFA name="user" size={40} /> backgroundColor: "white",
</View> borderRadius: 3
<View style={styles.userT}> }}
<Text style={styles.userName}>Henrique Dias</Text> >
<Text>AFFJASDXZ</Text> <View style={{backgroundColor: "#CC1A17", flex: 1, flexDirection: 'row'}}>
</View> <View style={{width: '79%'}}>
<Text
<TouchableOpacity style={styles.userRemove}> style={{
<IconFA name="times" color={"#CC1A17"} size={30} /> fontSize: 25,
<Text>remover</Text> color: "white",
</TouchableOpacity> margin: 10,
</View> fontWeight: "bold",
<Divider style={{ backgroundColor: "black" }} /> marginBottom: 0
<View style={styles.user}> }}
<View style={styles.userLogo}> >
<IconFA name="user" size={40} /> Os tones
</View> </Text>
<View style={styles.userT}> <Text
<Text style={styles.userName}>Henrique Dias</Text> style={{
<Text>AFFJASDXZ</Text> color: "white",
</View> marginLeft: 10,
marginBottom: 5
<TouchableOpacity style={styles.userRemove}> }}
<IconFA name="times" color={"#CC1A17"} size={30} /> >
<Text>remover</Text> 5/6 elementos
</TouchableOpacity> </Text>
</View> </View>
<View
style={{alignItems: 'center', alignContent: 'center', alignSelf: 'center'}}>
</View> <IconFA name="plus" color={'white'} size={30}/>
</View> <Text style={{color: 'white'}}>Adicionar</Text>
</View> </View>
</View> </View>
</View>
</ScrollView> <View>
</PTRView> <View style={{flex: 1}}>
); <View style={styles.user}>
} else { <View style={styles.userLogo}>
return ( <IconFA name="user" size={40}/>
<View> </View>
<Text>sem permissões para aceder aqui</Text> <View style={styles.userT}>
</View> <Text style={styles.userName}>Henrique Dias</Text>
); <Text>AFFJASDXZ</Text>
</View>
<TouchableOpacity style={styles.userRemove} /*onPress={() => this._removeMember(membro.id)}*/>
<Text style={{fontWeight: 'bold'}}>rm equipa</Text>
</TouchableOpacity>
</View>
<Divider style={{backgroundColor: "black"}}/>
<View style={styles.user}>
<View style={styles.userLogo}>
<IconFA name="user" size={40}/>
</View>
<View style={styles.userT}>
<Text style={styles.userName}>Henrique Dias</Text>
<Text>AFFJASDXZ</Text>
</View>
<TouchableOpacity style={styles.userRemove}>
<IconFA name="times" color={"#CC1A17"} size={30}/>
<Text>remover</Text>
</TouchableOpacity>
</View>
<Divider style={{backgroundColor: "black"}}/>
<View style={styles.user}>
<View style={styles.userLogo}>
<IconFA name="user" size={40}/>
</View>
<View style={styles.userT}>
<Text style={styles.userName}>Henrique Dias</Text>
<Text>AFFJASDXZ</Text>
</View>
<TouchableOpacity style={styles.userRemove}>
<IconFA name="times" color={"#CC1A17"} size={30}/>
<Text>remover</Text>
</TouchableOpacity>
</View>
<Divider style={{backgroundColor: "black"}}/>
<View style={styles.user}>
<View style={styles.userLogo}>
<IconFA name="user" size={40}/>
</View>
<View style={styles.userT}>
<Text style={styles.userName}>Henrique Dias</Text>
<Text>AFFJASDXZ</Text>
</View>
<TouchableOpacity style={styles.userRemove}>
<IconFA name="times" color={"#CC1A17"} size={30}/>
<Text>remover</Text>
</TouchableOpacity>
</View>
<Divider style={{backgroundColor: "black"}}/>
<View style={styles.user}>
<View style={styles.userLogo}>
<IconFA name="user" size={40}/>
</View>
<View style={styles.userT}>
<Text style={styles.userName}>Henrique Dias</Text>
<Text>AFFJASDXZ</Text>
</View>
<TouchableOpacity style={styles.userRemove}>
<IconFA name="times" color={"#CC1A17"} size={30}/>
<Text>remover</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
</View>
</ScrollView>
</PTRView>
);
} else {
return (
<View>
<Text>sem permissões para aceder aqui</Text>
</View>
);
}
} }
}
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
userName:{ userName: {
fontSize:16, fontSize: 16,
fontWeight:'bold' fontWeight: 'bold'
}, },
userRemove: { userRemove: {
alignContent: "center", alignContent: "center",
alignItems: "center", alignItems: "center",
alignSelf:'center'
},
userT: {
margin: 10,
width: "55%", alignSelf: 'center'
// backgroundColor: "red" },
}, userT: {
userLogo: { margin: 10,
paddingLeft: 10,
margin: 10 width: "55%",
}, // backgroundColor: "red"
user: { },
alignSelf: "center", userLogo: {
flex: 1, paddingLeft: 10,
flexDirection: "row",
margin: 10, margin: 10
},
user: {
alignSelf: "center",
flex: 1,
flexDirection: "row",
marginTop: 5, margin: 10,
width: "100%"
},
userBoxText: {
color: "white",
fontWeight: "bold"
},
userStatsBoxIcon: {
color: "white"
},
userStatsBox: {
flex: 1,
backgroundColor:'white',
flexDirection: "row"
},
userBox: {
alignItems: "center",
justifyContent: "center",
width: "33%"
},
userCurriculum: {
paddingTop: 5,
color: "red",
fontWeight: "bold",
fontSize: 15
},
userBioRow: {
flex: 1,
flexDirection: "row",
padding: 10
},
userBioText: {},
userBioLogo: {
marginLeft: SCREEN_WIDTH * 0.05,
width: SCREEN_WIDTH * 0.15
},
userTextSub: { marginTop: 5,
backgroundColor: "rgba(0,0,0,0.7)", width: "100%"
color: "white" },
}, userBoxText: {
userText: { color: "white",
backgroundColor: "rgba(0,0,0,0.7)", fontWeight: "bold"
color: "white", },
fontWeight: "bold", userStatsBoxIcon: {
fontSize: 20 color: "white"
}, },
homeHeader: { userStatsBox: {
flex: 1, flex: 1,
backgroundColor: 'white',
flexDirection: "row"
},
userBox: {
alignItems: "center",
justifyContent: "center",
width: "33%"
},
userCurriculum: {
paddingTop: 5,
color: "red",
fontWeight: "bold",
fontSize: 15
},
userBioRow: {
flex: 1,
flexDirection: "row",
padding: 10
},
userBioText: {},
userBioLogo: {
marginLeft: SCREEN_WIDTH * 0.05,
width: SCREEN_WIDTH * 0.15
},
height: SCREEN_HEIGHT * 0.3, userTextSub: {
justifyContent: "center", backgroundColor: "rgba(0,0,0,0.7)",
alignItems: "center" color: "white"
}, },
userImage: { userText: {
width: 110, backgroundColor: "rgba(0,0,0,0.7)",
height: 110, color: "white",
borderWidth: 1, fontWeight: "bold",
borderRadius: 5, fontSize: 20
borderWidth: 2, },
borderColor: "white" homeHeader: {
}, flex: 1,
userBio: {
flex: 1,
padding: 10,
margin: 9,
backgroundColor: "white",
// height: SCREEN_HEIGHT*0.20,
color: "black",
borderRadius: 5
},
userStats: {
backgroundColor: "white",
height: SCREEN_HEIGHT * 0.2,
// padding: 10,
margin: 10,
borderRadius: 5,
marginTop: 10,
marginBottom: 0
},
userStatsTitle: {
margin:10,
color: "white",
fontSize: 17,
fontWeight: "bold",
padding: 1
},
userImageContainer: {
alignSelf: "center"
// transform: [{ rotate: '-15deg'}], height: SCREEN_HEIGHT * 0.3,
} justifyContent: "center",
alignItems: "center"
},
userImage: {
width: 110,
height: 110,
borderWidth: 1,
borderRadius: 5,
borderWidth: 2,
borderColor: "white"
},
userBio: {
flex: 1,
padding: 10,
margin: 9,
backgroundColor: "white",
// height: SCREEN_HEIGHT*0.20,
color: "black",
borderRadius: 5
},
userStats: {
backgroundColor: "white",
height: SCREEN_HEIGHT * 0.2,
// padding: 10,
margin: 10,
borderRadius: 5,
marginTop: 10,
marginBottom: 0
},
userStatsTitle: {
margin: 10,
color: "white",
fontSize: 17,
fontWeight: "bold",
padding: 1
},
userImageContainer: {
alignSelf: "center"
// transform: [{ rotate: '-15deg'}],
}
}); });
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
return { return {
token: state.apiReducer.token, token: state.apiReducer.token,
user: state.apiReducer.user, user: state.apiReducer.user,
logged: state.apiReducer.logged, logged: state.apiReducer.logged,
userDetails: state.apiReducer.userDetails, userDetails: state.apiReducer.userDetails,
onHold: state.apiReducer.onHold onHold: state.apiReducer.onHold
}; };
} }
function mapDispatchToProps(dispatch) { function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch); return bindActionCreators(Actions, dispatch);
} }
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Home); )(Home);

View File

@ -0,0 +1,46 @@
import * as React from "react";
import {View, StyleSheet, Dimensions, Text, Button, ScrollView} from "react-native";
import {TabView, TabBar, SceneMap} from "react-native-tab-view";
import * as Actions from "../store/actions";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
export default class rallyDetail extends React.Component {
renderHeader = () => {
};
render() {
return (
<View>
</View>
)
}
}
function mapStateToProps(state, props) {
return {
token: state.apiReducer.token,
user: state.apiReducer.user,
logged: state.apiReducer.logged,
events: state.apiReducer.events
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(rallyDetail);

View File

@ -34,7 +34,7 @@ function mapStateToProps(state, props) {
token: state.apiReducer.token, token: state.apiReducer.token,
user: state.apiReducer.user, user: state.apiReducer.user,
logged: state.apiReducer.logged, logged: state.apiReducer.logged,
events: state.apiReducer.events //rally: state.apiReducer.rally
} }
} }