Skip to content

Commit

Permalink
Prevented double clicks and re-rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@grahammendick
grahammendick committed Apr 28, 2017
1 parent 9129b54 commit a4f2b09
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 99 deletions.
77 changes: 43 additions & 34 deletions NavigationReactNative/sample/twitter/Follows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,51 @@ import React from 'react';
import {StyleSheet, Text, Image, ListView, View, TouchableHighlight} from 'react-native';
import Svg, {Path} from 'react-native-svg';

export default ({follows, stateNavigator}) => {
const {url} = stateNavigator.stateContext;
const dataSource = new ListView
.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
.cloneWithRows(follows);
return (
<ListView
dataSource={dataSource}
renderRow={({id, name, logo}) => (
<TouchableHighlight
underlayColor="white"
onPress={() => {
if (url === stateNavigator.stateContext.url)
stateNavigator.navigate('timeline', {id});
}}>
<View style={styles.follow}>
<Svg
style={styles.icon}
height="28"
width="28"
viewBox="0 0 46 72">
<Path
d="M29.986 9c-14.888 0-27 12.112-27 27s12.112 27 27 27 27-12.112 27-27-12.112-27-27-27zM42.09 47H17.882c-.757 0-.917-.93-.917-2.325 0-.975.325-2.052 1.393-2.616l.033-.022c.706-.429 4.002-1.314 6.945-2.012 1.645 1.861 3.465 2.325 4.651 2.325s3.006-.464 4.65-2.325c2.942.698 6.239 1.583 6.945 2.012.011.007.023.014.033.022 1.068.564 1.393 1.641 1.393 2.616C43.007 46.07 42.847 47 42.09 47zM29.986 23c6.147 0 6.284 6.715 6.284 6.715s.993.044.772 1.86c-.208 1.716-1.307 3.001-2.028 3.001 0 0-1.924 5.003-5.028 5.003s-5.028-5.003-5.028-5.003c-.721 0-1.82-1.285-2.028-3.001-.221-1.815.772-1.86.772-1.86s.347-5.331 3.244-5.677c1.025-.924 2.256-1.038 3.04-1.038z"
fill="rgb(29, 161, 242)"/>
</Svg>
<View>
<Image style={styles.logo} source={logo} />
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text>followed you.</Text>
export default class Follows extends React.Component {
constructor(props, context) {
super(props, context);
this.url = props.stateNavigator.stateContext.url;
}
shouldComponentUpdate(props) {
return this.url === props.stateNavigator.stateContext.url;
}
render() {
const {follows, stateNavigator} = this.props;
const dataSource = new ListView
.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
.cloneWithRows(follows);
return (
<ListView
dataSource={dataSource}
renderRow={({id, name, logo}) => (
<TouchableHighlight
underlayColor="white"
onPress={() => {
if (this.url === stateNavigator.stateContext.url)
stateNavigator.navigate('timeline', {id});
}}>
<View style={styles.follow}>
<Svg
style={styles.icon}
height="28"
width="28"
viewBox="0 0 46 72">
<Path
d="M29.986 9c-14.888 0-27 12.112-27 27s12.112 27 27 27 27-12.112 27-27-12.112-27-27-27zM42.09 47H17.882c-.757 0-.917-.93-.917-2.325 0-.975.325-2.052 1.393-2.616l.033-.022c.706-.429 4.002-1.314 6.945-2.012 1.645 1.861 3.465 2.325 4.651 2.325s3.006-.464 4.65-2.325c2.942.698 6.239 1.583 6.945 2.012.011.007.023.014.033.022 1.068.564 1.393 1.641 1.393 2.616C43.007 46.07 42.847 47 42.09 47zM29.986 23c6.147 0 6.284 6.715 6.284 6.715s.993.044.772 1.86c-.208 1.716-1.307 3.001-2.028 3.001 0 0-1.924 5.003-5.028 5.003s-5.028-5.003-5.028-5.003c-.721 0-1.82-1.285-2.028-3.001-.221-1.815.772-1.86.772-1.86s.347-5.331 3.244-5.677c1.025-.924 2.256-1.038 3.04-1.038z"
fill="rgb(29, 161, 242)"/>
</Svg>
<View>
<Image style={styles.logo} source={logo} />
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text>followed you.</Text>
</View>
</View>
</View>
</View>
</TouchableHighlight>
)} />
);
</TouchableHighlight>
)} />
);
}
};

const styles = StyleSheet.create({
Expand Down
73 changes: 41 additions & 32 deletions NavigationReactNative/sample/twitter/Tweet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,49 @@ import {NavigationBackAndroid} from 'navigation-react-native';
import Banner from './Banner';
import Tweets from './Tweets';

export default ({tweet: {account: {id: accountId, name, username, logo},
text, time, retweets, likes, replies}, stateNavigator}) => {
const {url} = stateNavigator.stateContext;
return (
<View style={{flex: 1}}>
<NavigationBackAndroid stateNavigator={stateNavigator} />
<Banner title="Tweet" stateNavigator={stateNavigator} />
<ScrollView style={styles.view}>
<View>
<View style={styles.heading}>
<TouchableHighlight underlayColor="white" onPress={() => {
if (url === stateNavigator.stateContext.url)
stateNavigator.navigate('timeline', {id: accountId});
}}>
<Image style={styles.logo} source={logo} />
</TouchableHighlight>
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text>{username}</Text>
export default class Tweet extends React.Component {
constructor(props, context) {
super(props, context);
this.url = props.stateNavigator.stateContext.url;
}
shouldComponentUpdate(props) {
return this.url === props.stateNavigator.stateContext.url;
}
render() {
const {tweet: {account: {id: accountId, name, username, logo},
text, time, retweets, likes, replies}, stateNavigator} = this.props;
return (
<View style={{flex: 1}}>
<NavigationBackAndroid stateNavigator={stateNavigator} />
<Banner title="Tweet" stateNavigator={stateNavigator} />
<ScrollView style={styles.view}>
<View>
<View style={styles.heading}>
<TouchableHighlight underlayColor="white" onPress={() => {
if (this.url === stateNavigator.stateContext.url)
stateNavigator.navigate('timeline', {id: accountId});
}}>
<Image style={styles.logo} source={logo} />
</TouchableHighlight>
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text>{username}</Text>
</View>
</View>
<Text style={styles.text}>{text}</Text>
<Text style={styles.time}>{time}</Text>
<View style={styles.interactions}>
<Text style={styles.count}>{retweets}</Text>
<Text style={styles.interaction}>RETWEETS</Text>
<Text style={styles.count}>{likes}</Text>
<Text style={styles.interaction}>LIKES</Text>
</View>
</View>
<Text style={styles.text}>{text}</Text>
<Text style={styles.time}>{time}</Text>
<View style={styles.interactions}>
<Text style={styles.count}>{retweets}</Text>
<Text style={styles.interaction}>RETWEETS</Text>
<Text style={styles.count}>{likes}</Text>
<Text style={styles.interaction}>LIKES</Text>
</View>
</View>
<Tweets tweets={replies} stateNavigator={stateNavigator} />
</ScrollView>
</View>
);
<Tweets tweets={replies} stateNavigator={stateNavigator} />
</ScrollView>
</View>
);
}
};

const styles = StyleSheet.create({
Expand Down
75 changes: 42 additions & 33 deletions NavigationReactNative/sample/twitter/Tweets.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,49 @@
import React from 'react';
import {StyleSheet, Text, Image, View, ListView, TouchableHighlight} from 'react-native';

export default ({tweets, onTimeline, stateNavigator}) => {
const {url} = stateNavigator.stateContext;
const dataSource = new ListView
.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
.cloneWithRows(tweets);
return (
<ListView
dataSource={dataSource}
renderRow={({account: {id: accountId, name, logo}, id, text}) => (
<TouchableHighlight
underlayColor="white"
onPress={() => {
if (url === stateNavigator.stateContext.url)
stateNavigator.navigate('tweet', {id});
}}>
<View style={styles.tweet}>
<TouchableHighlight
underlayColor="white"
onPress={() => {
if ((!onTimeline || onTimeline(accountId))
&& url === stateNavigator.stateContext.url) {
stateNavigator.navigate('timeline', {id: accountId});
}
}}>
<Image style={styles.logo} source={logo} />
</TouchableHighlight>
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text>{text}</Text>
export default class Tweets extends React.Component {
constructor(props, context) {
super(props, context);
this.url = props.stateNavigator.stateContext.url;
}
shouldComponentUpdate(props) {
return this.url === props.stateNavigator.stateContext.url;
}
render() {
const {tweets, onTimeline, stateNavigator} = this.props;
const dataSource = new ListView
.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
.cloneWithRows(tweets);
return (
<ListView
dataSource={dataSource}
renderRow={({account: {id: accountId, name, logo}, id, text}) => (
<TouchableHighlight
underlayColor="white"
onPress={() => {
if (this.url === stateNavigator.stateContext.url)
stateNavigator.navigate('tweet', {id});
}}>
<View style={styles.tweet}>
<TouchableHighlight
underlayColor="white"
onPress={() => {
if ((!onTimeline || onTimeline(accountId))
&& this.url === stateNavigator.stateContext.url) {
stateNavigator.navigate('timeline', {id: accountId});
}
}}>
<Image style={styles.logo} source={logo} />
</TouchableHighlight>
<View style={styles.details}>
<Text style={styles.name}>{name}</Text>
<Text>{text}</Text>
</View>
</View>
</View>
</TouchableHighlight>
)} />
);
</TouchableHighlight>
)} />
);
}
};

const styles = StyleSheet.create({
Expand Down

0 comments on commit a4f2b09

Please sign in to comment.