Skip to content

Instantly share code, notes, and snippets.

@Kishanjvaghela Kishanjvaghela/AutoLink.js
Last active Nov 29, 2017

Embed
What would you like to do?
React Native Code
import React from 'react';
import { BackHandler, Platform } from 'react-native';
import { NavigationActions } from 'react-navigation';
export function backHandler(Component) {
return class Wrapped extends React.Component {
componentWillMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', () => {
this.props.navigation.dispatch(NavigationActions.back());
return true;
});
}
}
render() {
return <Component {...this.props} />;
}
};
}
import React from 'react';
import {
View,
StyleSheet,
Image,
} from 'react-native';
import { IMAGE_BG_PURPAL } from '../../config/colors';
const CircleImage = ({ style, source, radius }) => (
<View
style={[
styles.container,
style,
{
height: radius,
width: radius,
borderRadius: radius / 2,
},
]}
>
<Image
source={source}
style={{
height: radius,
width: radius,
borderRadius: radius / 2,
}}
/>
</View>
);
export default CircleImage;
const styles = StyleSheet.create({
container: {
backgroundColor: IMAGE_BG_PURPAL,
},
});
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import CardView from 'react-native-cardview';
import MeasureText from 'react-native-measure-text';
import moment from 'moment';
import { connect } from 'react-redux';
import { ToggleButton } from './common';
import ImageButton from './common/ImageButton';
import AutoLink from './common/AutoLink';
import CircleImage from '../components/common/CircleImage';
import { likePost, followPost } from '../actions';
import { IC_REPORT_LIST, IC_COMMENTS, IC_LIKE, IC_LIKE_SELECTED, IC_PLUS } from '../icon';
import {
TEXT_COLOR_BLACK, IMAGE_BG_PURPAL,
} from '../config/colors';
import {
FONT_AVENIR_MEDIUM,
} from '../config/font';
class GroupDetailCell extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.postList,
selectedData: this.props.selectedData,
numberOfLines: 2,
};
}
onLikePress() {
let arrayNew = [];
arrayNew = this.state.data;
if (arrayNew.is_like === 0) {
arrayNew.is_like = 1;
arrayNew.total_vote_count += 1;
} else {
arrayNew.is_like = 0;
arrayNew.total_vote_count -= 1;
}
let objParams = {};
if (this.props.isSearch) {
objParams = {
authorization: userLoginData.authorization,
postId: arrayNew.id,
like: arrayNew.is_like,
};
} else {
objParams = {
authorization: this.props.userData.authorization,
postId: arrayNew.id,
like: arrayNew.is_like,
};
}
this.props.likePost(objParams);
this.setState({ data: arrayNew });
}
render() {
const {
mainView,
logoImage,
userPicImage,
userText,
desText,
dotButton,
logoImage1,
toggleImage,
} = styles;
const { postList, onCommentPress, onReportPress, onLikePress } = this.props;
const dateCurrent = new Date();
const dateDisplay = postList.updated_at;
console.log(`Current ${dateCurrent}`);
console.log(`UTC ${dateDisplay}`); // 2015-09-13 03:39:27
const stillUtc = moment.utc(dateDisplay).toDate();
const local = moment(stillUtc).local().format('YYYY-MM-DD HH:mm:ss');
console.log(`Local ${local}`);
const fmtdateCurrent = moment(dateCurrent).format('YYYY-MM-DD HH:mm:ss');
const diff = moment(fmtdateCurrent).diff(moment(local));
const d = moment.duration(diff);
const days = d.get('days');// parseInt(d.asDays());
const hours = d.get('hours');
const minutes = d.get('minutes'); // d.get('minutes');
// hours -= days * 24;
console.log(`hours ${hours}`);
console.log(`minutes ${minutes}`);
let displayDate = '';
if (fmtdateCurrent > local) {
if (days === 0) {
displayDate = `${hours} hours ago`;
if (hours === 0) {
displayDate = `${minutes} minutes ago`;
if (minutes === 0) {
displayDate = 'minutes ago';
}
} else if (hours === 1) {
displayDate = `${hours} hour ago`;
}
} else if (days === 1) {
displayDate = 'Yesterday';
} else {
displayDate = moment(dateDisplay).format('YYYY-MM-DD');
}
} else if (fmtdateCurrent === local) {
console.log('same');
}
return (
<View>
<CardView
cardElevation={2}
cardMaxElevation={2}
cornerRadius={5}
style={{
marginLeft: 7,
marginRight: 7,
marginTop: 23,
backgroundColor: 'white',
}}
>
<View style={mainView}>
<View
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
}}
>
<View
style={{
backgroundColor: 'transparent',
flex: 1,
paddingLeft: 70,
}}
>
<Text
style={[
userText, {
backgroundColor: 'transparent',
}]}
> {postList.user.name} </Text>
<Text
style={{
justifyContent: 'center',
textAlign: 'left',
fontFamily: FONT_AVENIR_MEDIUM,
fontSize: 10,
paddingLeft: 3,
backgroundColor: 'transparent',
}}
>{displayDate}</Text>
</View>
<ImageButton
source={IC_REPORT_LIST}
imageStyle={dotButton}
onPress={onReportPress}
/>
</View>
<Image
style={{
backgroundColor: IMAGE_BG_PURPAL,
justifyContent: 'center',
width: null,
height: postList.file.length > 0 ? 180 : 0,
resizeMode: 'cover',
margin: 10,
borderRadius: 7,
}}
source={{ uri: postList.file.length > 0 ? postList.file : 'static' }}
/>
<AutoLink description={postList.description} style={desText} />
</View>
<View
style={{
flexDirection: 'row',
paddingBottom: 6,
}}
>
<View
style={{
// justifyContent: 'flex-start',
// alignItems: 'center',
height: 34,
flexDirection: 'row',
}}
>
<ToggleButton
style={toggleImage}
onPress={() => { this.onLikePress(); }}
selected={IC_LIKE_SELECTED}
unSelected={IC_LIKE}
isActive={this.state.data.is_like}
imageStyle={logoImage1}
/>
<Text
style={{
justifyContent: 'center',
textAlign: 'center',
alignSelf: 'center',
fontFamily: FONT_AVENIR_MEDIUM,
fontSize: 12,
}}
>
{`${postList.total_vote_count} Likes`}</Text>
</View>
<ImageButton
style={{ flex: 1 }}
source={IC_COMMENTS}
imageStyle={logoImage}
onPress={onCommentPress}
title={`${postList.total_comment_count} Comments`}
titleStyle={{
margin: 5,
justifyContent: 'center',
textAlign: 'center',
alignSelf: 'center',
fontFamily: FONT_AVENIR_MEDIUM,
fontSize: 12,
}}
/>
</View>
</CardView>
{postList.user.image === '' ? <CircleImage
style={userPicImage}
radius={50}
/> : <CircleImage
style={userPicImage}
source={{ uri: postList.user.image }}
radius={50}
/>}
</View>
);
}
}
const styles = {
mainView: {
backgroundColor: 'white',
// height: 320,
// margin: 10,
borderRadius: 10,
},
userText: {
backgroundColor: 'transparent',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
fontFamily: FONT_AVENIR_MEDIUM,
fontSize: 15,
textAlign: 'left',
color: TEXT_COLOR_BLACK,
fontWeight: '600',
},
desText: {
backgroundColor: 'transparent',
marginLeft: 5,
marginTop: 2,
marginRight: 5,
marginBottom: 2,
paddingRight: 4,
paddingLeft: 4,
},
dotButton: {
justifyContent: 'flex-end',
width: 50,
height: 30,
resizeMode: 'center',
marginRight: 10,
backgroundColor: 'transparent',
position: 'relative',
},
userPicImage: {
justifyContent: 'center',
left: 20,
top: 5,
position: 'absolute',
overflow: 'hidden',
// top: 155,
elevation: 2,
},
logoImage: {
marginLeft: 10,
justifyContent: 'center',
alignSelf: 'center',
width: 20,
height: 20,
resizeMode: 'stretch',
},
logoImage1: {
width: 20,
height: 20,
resizeMode: 'center',
},
toggleImage: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
width: 34,
height: 34,
},
};
const mapStateToProps = (state) => {
const {
data,
isFetching,
error } = state.post;
return {
data,
isFetching,
error };
};
export default connect(mapStateToProps, {
likePost, followPost,
})(GroupDetailCell);
import React, { Component } from 'react';
import { View,
FlatList,
TouchableOpacity,
Image,
Dimensions,
Text,
ScrollView, AsyncStorage,
} from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { Header } from '../components/Header';
import GroupDetailCell from '../components/GroupDetailCell';
import { groupList } from '../data/group';
import Report from '../components/common/Report';
import { reportList } from '../data/report';
import { backHandler } from '../utils/HoC';
import ImageButton from '../components/common/ImageButton';
import { TEXT_PURPAL, IMAGE_BG_PURPAL, BUTTON_BG_PURPAL } from '../config/colors';
import { FONT_AVENIR_MEDIUM, FONT_AVENIR_BOOK } from '../config/font';
import { profile } from '../data/profile';
import CircleImage from '../components/common/CircleImage';
import {
IC_PLUS,
IC_PROFILE_IMAGE_BG_GRAY_WHOLE,
} from '../icon';
import { getGroupList, report } from '../actions';
const { height, width } = Dimensions.get('window');
let userLoginData = {};
class GroupDetailScreen extends backHandler(Component) {
static navigationOptions = ({ navigation }) => ({
header: (
<Header
title="Group Detail"
onBack={() => { navigation.dispatch(NavigationActions.back()); }}
/>),
});
state ={
modalVisible: false,
seletData: [],
numberOfLines: 2,
arrPostData: [],
isLoadMore: false,
offset: 0,
}
componentDidMount() {
// setInterval(() => {
// this.setState({
// isRefresh: !this.state.isRefresh,
// });
// }, 3000);
try {
AsyncStorage.getItem('userLogin').then((value) => {
userLoginData = JSON.parse(value);
// alert(JSON.stringify(userLoginData));
this.props.getGroupList({
authorization: userLoginData.authorization,
id: userLoginData.id,
offset: this.state.offset,
});
}).done();
} catch (error) {
// Error retrieving data
}
}
onPressPostGroup() {
this.props.navigation.navigate('GroupPostScreen');
}
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
commentPress(item) {
// this.props.navigation.navigate('CommentScreen');
this.props.navigation.navigate('CommentScreen', { item, loginData: userLoginData, type: '4' });
}
reportPress(item) {
console.log(item);
this.state = { ...this.state, seletData: item };
this.setModalVisible(true);
}
likePress(item) {
alert('like');
}
onPressReadMore() {
if (this.state.numberOfLines === 2) {
this.setState({ numberOfLines: 0 });
} else {
this.setState({ numberOfLines: 2 });
}
}
renderReportDialog() {
return (
<Report
visible={this.state.modalVisible}
onPressCancel={() => { this.setModalVisible(false); }}
onPressReport={(data) => {
// alert(JSON.stringify(data));
// console.log(JSON.stringify(data));
let dataGet = {};
for (let i = 0; i < data.length; i += 1) {
const isReport = data[i].reportChecked;
if (isReport === true) {
dataGet = data[i];
break;
}
}
const reportData = {
authorization: userLoginData.authorization,
postId: this.state.seletData.id,
reportId: dataGet.id,
};
// alert(JSON.stringify(reportData));
this.setModalVisible(false);
this.props.report(reportData);
this.setModalVisible(false);
}}
/>);
}
renderItem({ item }) {
return (
<GroupDetailCell
key={item.id}
postList={item}
userData={userLoginData}
onCommentPress={() => { this.commentPress(item); }}
onReportPress={() => { this.reportPress(item); }}
onLikePress={() => { this.likePress(item); }}
/>
);
}
renderCoverPicDisplay(data) {
return (
<View
style={{
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
height: 159,
marginBottom: 50,
}}
>
<View
style={{
backgroundColor: 'transparent',
height: 50,
width: width - 24,
position: 'absolute',
bottom: 0,
marginLeft: 10,
marginRight: 10,
}}
/>
{data.cover_image === '' ? <Image
style={{
backgroundColor: IMAGE_BG_PURPAL,
resizeMode: 'stretch',
width: '100%',
height: '100%',
}}
/> : <Image
source={{ uri: data.cover_image }}
style={{
backgroundColor: IMAGE_BG_PURPAL,
resizeMode: 'stretch',
width: '100%',
height: '100%',
}}
/>}
<Image
source={IC_PROFILE_IMAGE_BG_GRAY_WHOLE}
style={{
width: '100%',
position: 'absolute',
bottom: 0,
}}
/>
</View>
);
}
renderProfilePic(data) {
return (
<View
style={{
top: 159 - 35,
position: 'absolute',
alignSelf: 'center',
backgroundColor: 'transparent',
}}
>
<View >
<View
style={{
height: 35,
width: width - 24,
backgroundColor: 'transparent',
top: 35,
}}
/>
{data.image === '' ? <CircleImage
style={{
position: 'absolute',
alignSelf: 'center',
}}
radius={70}
/> : <CircleImage
style={{
position: 'absolute',
alignSelf: 'center',
}}
source={{ uri: data.image }}
radius={70}
/>}
</View>
<View
style={[{
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
marginLeft: 10,
marginTop: 35,
}, styles.shadowStyle]}
>
<Text
style={styles.textStyle}
>{data.title}</Text>
<Text
style={styles.textStyle}
>{`${data.total_members_count} Members`}</Text>
</View>
</View>
);
}
renderList() {
return (
<View
style={{
height,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
alignSelf: 'center',
}}
><Text
style={{
fontFamily: FONT_AVENIR_MEDIUM,
fontSize: 20,
color: BUTTON_BG_PURPAL,
}}
>There is no data available.</Text>
</View>
);
}
render() {
const roundedCornerSize = 50;
const content = {
data: this.props.data,
isFetching: this.props.isFetching,
error: this.props.error,
loadMoreGroup: this.props.loadMoreGroup,
};
// if (content.isFetching) {
// this.state = { ...this.state, isLoading: true };
// } else {
// this.state = { ...this.state, isLoading: false };
// }
// this.state = { ...this.state, isLoadMore: content.loadMoreGroup };
// alert(this.state.isLoadMore);
// console.log(`Data ${JSON.stringify(content.data.posts)}`);
if (content.data.length !== 0) {
const dataGroup = content.data.posts;
// console.log(`Type Of ${typeof (dataGroup)}`);
// console.log(`Array or not ${dataGroup instanceof Array}`);
const chartArrayFilter = [];
let key;
for (key in dataGroup) {
// console.log(`Parse Data ${JSON.stringify(key)}`);
// console.log(`Parse Data ${JSON.stringify(dataGroup[key])}`);
chartArrayFilter.push(dataGroup[key]);
}
console.log(`chartArrayFilter Data ${JSON.stringify(chartArrayFilter)}`);
console.log(`chartArrayFilter Data length ${chartArrayFilter.length}`);
console.log(`Parse Data ${JSON.stringify(chartArrayFilter)}`);
console.log(`arrPostData length ${this.state.arrPostData.length}`);
if (chartArrayFilter.length !== 0) {
console.log('not equal');
const arrayvar = this.state.arrPostData.slice();
for (let i = 0; i < chartArrayFilter.length; i += 1) {
arrayvar.push(chartArrayFilter[i]);
}
this.state = { ...this.state, arrPostData: arrayvar };
} else if (chartArrayFilter.length === 0) {
console.log('equal');
if (this.state.arrPostData.length === 0) {
console.log('arrPostData equal');
this.state = { ...this.state, arrPostData: chartArrayFilter };
}
}
console.log(`Group Data length ${JSON.stringify(this.state.arrPostData)}`);
}
return (
<View
style={{
flex: 1,
}}
>
{ this.renderReportDialog() }
{this.state.arrPostData.length === 0 ? <View
style={{
height,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
alignSelf: 'center',
}}
><Text
style={{
fontFamily: FONT_AVENIR_MEDIUM,
fontSize: 20,
color: BUTTON_BG_PURPAL,
}}
>There is no group available.</Text>
</View> : <ScrollView
showsVerticalScrollIndicator={false}
style={{
flex: 1,
}}
onMomentumScrollEnd={() => {
// alert(this.state.isLoadMore);
console.log('scroll end');
if (this.state.isLoadMore) {
this.state.offset = this.state.offset + 1;
this.props.getGroupList({
authorization: userLoginData.authorization,
id: userLoginData.id,
offset: this.state.offset,
});
}
}}
>
{this.renderCoverPicDisplay(content.data)}
{this.renderProfilePic(content.data)}
<View
style={{
marginTop: 30,
marginLeft: 10,
marginRight: 10,
}}
>
<Text
style={{
fontFamily: FONT_AVENIR_BOOK,
fontSize: 15,
color: TEXT_PURPAL,
textAlign: 'justify',
}}
numberOfLines={this.state.numberOfLines}
>
{content.data.description}
</Text>
<TouchableOpacity
style={{
height: 20,
backgroundColor: 'transparent',
alignItems: 'flex-end',
justifyContent: 'center',
}}
onPress={this.onPressReadMore.bind(this)}
>
<View
style={{
marginRight: 10,
marginBottom: 0,
flexDirection: 'row',
}}
>
<Text style={styles.replyStyle}>
{this.state.numberOfLines === 2 ? 'Read More' : 'Read Less...'}
</Text>
</View>
</TouchableOpacity>
</View>
<FlatList
style={{
paddingTop: 5,
flex: 1,
}}
scrollEnabled={false}
data={this.state.arrPostData}
ListEmptyComponent={this.renderList.bind(this)}
renderItem={this.renderItem.bind(this)}
ListFooterComponent={this.renderFooter}
onMomentumScrollEnd={() => {
alert(this.state.isLoadMore);
console.log('scroll end');
// if (this.state.isLoadMore) {
// this.state.offset = this.state.offset + 1;
// this.props.getGroupList({
// authorization: userLoginData.authorization,
// id: userLoginData.id,
// offset: this.state.offset,
// });
// }
}}
keyExtractor={(item, index) => index}
/>
</ScrollView>}
<TouchableOpacity
style={{
alignContent: 'center',
position: 'absolute',
height: roundedCornerSize,
width: roundedCornerSize,
borderRadius: roundedCornerSize / 2,
backgroundColor: TEXT_PURPAL,
// left: width - roundedCornerSize - 30,
// top: height - ((roundedCornerSize * 2) + 30),
right: 30,
bottom: 30,
// marginTop: (width - 40),
}}
onPress={this.onPressPostGroup.bind(this)}
>
<View
style={{ height: roundedCornerSize,
width: roundedCornerSize,
backgroundColor: 'transparent',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text
style={{ backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Avenir Medium',
fontSize: 30,
textAlign: 'center',
color: 'white' }}
>+</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = {
imageStyle: {
width: 35,
height: 35,
},
textStyle: {
fontSize: 15,
color: TEXT_PURPAL,
fontFamily: FONT_AVENIR_MEDIUM,
fontWeight: 'bold',
},
replyStyle: {
fontFamily: FONT_AVENIR_BOOK,
fontSize: 13,
fontWeight: '500',
color: 'black',
},
bioStyle: {
justifyContent: 'flex-start',
alignSelf: 'flex-start',
margin: 10,
fontSize: 15,
fontFamily: FONT_AVENIR_BOOK,
textAlign: 'justify',
},
textCreditStyle: {
marginLeft: 10,
fontSize: 15,
fontFamily: FONT_AVENIR_BOOK,
textAlign: 'right',
},
textCreditStaticStyle: {
justifyContent: 'flex-start',
alignSelf: 'flex-start',
marginLeft: 10,
fontSize: 15,
marginTop: 10,
fontFamily: FONT_AVENIR_BOOK,
},
box: {
width: '80%',
backgroundColor: 'white',
},
buttonTextStyle: { fontFamily: FONT_AVENIR_BOOK, fontSize: 15 },
buttonHeightStyle: { height: 35 },
shadowStyle: {
// shadowColor: '#000000',
},
};
const mapStateToProps = (state) => {
const { data, isFetching, loadMoreGroup } = state.group;
return { data, isFetching, loadMoreGroup };
};
export default connect(mapStateToProps, {
getGroupList, report,
})(GroupDetailScreen);
/* <TouchableOpacity
style={{
alignContent: 'center',
position: 'absolute',
height: roundedCornerSize,
width: roundedCornerSize,
borderRadius: roundedCornerSize / 2,
backgroundColor: 'white',
right: 30,
bottom: 30,
}}
onPress={this.onPressPostGroup.bind(this)}
>
<Image
source={IC_PLUS}
style={{ height: roundedCornerSize,
width: roundedCornerSize }}
/>
</TouchableOpacity> */
import React from 'react';
import {
View,
Text,
Image,
TouchableOpacity,
Platform,
} from 'react-native';
import { BG_HEADER, IC_BACK } from '../icon';
import { HEIGHT_HEADER } from '../config/dimen';
// const { width } = Dimensions.get('window');
const HeaderButton = ({ title, onPress }) => (
<TouchableOpacity
onPress={onPress}
style={[styles.buttonStyle]}
>
<Text style={[styles.textStyle]}>
{title}
</Text>
</TouchableOpacity>
);
const HeaderButtonImage = ({ onPress, source }) => (
<TouchableOpacity
onPress={onPress}
style={[styles.buttonStyle]}
>
<Image
source={source}
style={{
width: 20,
height: 20,
resizeMode: 'center',
alignSelf: 'center',
}}
/>
</TouchableOpacity>
);
const Header = props => (
<View>
<Image
style={{
height: HEIGHT_HEADER + (Platform.OS === 'ios' ? 14 : 0),
width: '100%',
position: 'absolute',
// backgroundColor: 'pink',
}}
resizeMode="stretch"
source={BG_HEADER}
/>
{ Platform.OS === 'ios' ? <View style={{ height: 20 }} /> : null}
<View style={styles.containerStyle} >
<Text
style={{
justifyContent: 'center',
backgroundColor: 'transparent',
alignSelf: 'center',
fontFamily: 'Avenir Medium',
fontSize: 20,
fontWeight: '600',
color: 'white',
textAlign: 'center',
position: 'absolute',
width: props.width,
}}
numberOfLines={1}
>{props.title}</Text>
<TouchableOpacity
style={[{
width: 48,
height: 48,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-start',
}]}
onPress={props.onBack}
>
{props.isBackHide === true ? null : <Image
source={IC_BACK}
style={{ width: 20, height: 20, resizeMode: 'center' }}
/>}
</TouchableOpacity>
<View
style={{ alignSelf: 'flex-end',
position: 'absolute',
backgroundColor: 'transparent',
}}
>
{props.children}
</View>
</View>
</View>
);
const styles = {
containerStyle: {
height: Platform.OS === 'ios' ? 44 : HEIGHT_HEADER,
// flex: 1,
// flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
alignSelf: 'center',
fontSize: 20,
color: 'white',
fontFamily: 'Avenir Medium',
},
buttonStyle: {
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10,
marginRight: 10,
height: 48,
width: 48,
alignSelf: 'center',
},
};
export { Header, HeaderButton, HeaderButtonImage };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.