Skip to content

Commit b6546a6

Browse files
jnoleaujnoleau
committed
connect swiper page
1 parent 3ac90ad commit b6546a6

File tree

5 files changed

+118
-43
lines changed

5 files changed

+118
-43
lines changed

‎.eslintrc

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"browser": true,
55
"node": true
66
},
7+
"globals": {
8+
"__DEV__": true
9+
},
710
"plugins": [
811
"react"
912
],

‎App.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
/*
2+
3+
*/
14
import Expo from 'expo';
25
import React from 'react';
3-
import {StyleProvider} from 'native-base';
6+
import {AsyncStorage} from 'react-native';
7+
import {StyleProvider, Root} from 'native-base';
48

59
import App from './js/App';
610
import StoryBook from './storybook';
@@ -19,6 +23,8 @@ class App1 extends React.Component {
1923
}
2024

2125
async componentWillMount() {
26+
if (__DEV__) await AsyncStorage.clear();
27+
2228
await Expo.Font.loadAsync({
2329
Roboto: require('native-base/Fonts/Roboto.ttf'),
2430
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
@@ -35,7 +41,9 @@ class App1 extends React.Component {
3541

3642
return (
3743
<StyleProvider style={getTheme(material)}>
38-
<AppToLoad />
44+
<Root>
45+
<AppToLoad />
46+
</Root>
3947
</StyleProvider>
4048
);
4149
}

‎config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
LATEST_ENDPOINT: 'http://192.168.1.10:3000'
3+
};

‎js/deckswiper/index.js

+77-41
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,94 @@
11
import React from 'react';
2+
import {AsyncStorage} from 'react-native';
3+
import {Toast} from 'native-base';
4+
5+
6+
import config from '../../config';
7+
import Page from '../page';
28
import Swiper from './swiper';
39

4-
import {
5-
Container,
6-
Header,
7-
Title,
8-
Button,
9-
Icon,
10-
Left,
11-
Right,
12-
Body,
13-
Text
14-
} from 'native-base';
15-
16-
class WState extends React.Component {
17-
constructor(props) {
18-
super(props);
19-
20-
this.state = {
21-
posts: []
22-
};
10+
class PageSwiper extends React.Component {
11+
state = {
12+
loading: true,
13+
posts: []
14+
};
15+
session = null;
16+
17+
saveSession = () => {
18+
AsyncStorage.setItem('session', JSON.stringify(this.session));
19+
}
20+
21+
resetSession = (day) => {
22+
this.session = {
23+
day: day,
24+
swiped: [] // not implemented with shift because the order & the number of posts could change
25+
}
26+
27+
this.saveSession()
28+
}
29+
30+
async componentDidMount() {
31+
try {
32+
const fetched = await fetch(config.LATEST_ENDPOINT);
33+
const json = await fetched.json();
34+
const session = await AsyncStorage.getItem('session');
35+
36+
if (!json || !json.posts || json.posts.length === 0) {
37+
throw new Error('No posts');
38+
}
39+
40+
if (session === null) {
41+
this.resetSession(json.posts[0].day);
42+
} else {
43+
this.session = JSON.parse(session);
44+
45+
if (this.session.day !== json.posts[0].day) { // new day => new session
46+
this.resetSession(json.posts[0].day);
47+
}
48+
}
49+
50+
this.setState({
51+
posts: json.posts.filter(p => this.session.swiped.indexOf(p.id) === -1),
52+
loading: false
53+
});
54+
} catch(error) {
55+
Toast.show({
56+
text: 'Verify your internet connection and retry',
57+
position: 'bottom',
58+
buttonText: 'OKAY'
59+
})
60+
}
2361
}
2462

25-
onSwipe = () => {
26-
console.log('swipe');
63+
onSwipe = (o) => {
64+
this.session.swiped.push(o.id);
65+
this.saveSession();
66+
67+
if (this.state.posts.indexOf(o) === this.state.posts.length - 1) {
68+
this.setState({posts: []});
69+
}
70+
}
71+
72+
onSwipeLeft = (o) => {
73+
this.onSwipe(o);
74+
}
75+
76+
onSwipeRight = (o) => {
77+
this.onSwipe(o);
2778
}
2879

2980
render() {
3081
return (
31-
<Container style={{backgroundColor: '#fbfafa'}}>
32-
<Header>
33-
<Left>
34-
<Button
35-
transparent
36-
onPress={() => this.props.navigation.navigate('DrawerOpen')}
37-
>
38-
<Icon name="menu" />
39-
</Button>
40-
</Left>
41-
<Body>
42-
<Title>Deck Swiper</Title>
43-
</Body>
44-
<Right />
45-
</Header>
46-
82+
<Page title="Hunty - Swiper" navigation={this.props.navigation} loading={this.state.loading}>
4783
<Swiper
4884
items={this.state.posts}
49-
onSwipeLeft={this.onSwipe}
50-
onSwipeRight={this.onSwipe}
85+
onSwipeLeft={this.onSwipeLeft}
86+
onSwipeRight={this.onSwipeRight}
5187
/>
52-
</Container>
88+
</Page>
5389
);
5490

5591
}
5692
}
5793

58-
export default WState;
94+
export default PageSwiper;

‎js/page.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import {Container, Header, Title, Button, Icon, Left, Right, Body, Spinner} from 'native-base';
3+
4+
const Page = ({title, children, navigation, loading}) => (
5+
<Container style={{backgroundColor: '#fbfafa'}}>
6+
<Header>
7+
<Left>
8+
<Button
9+
transparent
10+
onPress={() => navigation.navigate('DrawerOpen')}
11+
>
12+
<Icon name="menu" />
13+
</Button>
14+
</Left>
15+
<Body>
16+
<Title>{title}</Title>
17+
</Body>
18+
<Right />
19+
</Header>
20+
21+
{loading ? <Spinner style={{marginTop: 20, flex: 1}} color="#da552f" /> : children}
22+
</Container>
23+
);
24+
25+
export default Page;

0 commit comments

Comments
 (0)