-
-
Save adamchel/6db456c1a851ed7dd20b54f6db3a6759 to your computer and use it in GitHub Desktop.
E2E test for React Native EventSource implementation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* | |
* @format | |
* @flow | |
*/ | |
import { Stitch, AnonymousCredential, RemoteMongoClient } from 'mongodb-stitch-react-native-sdk'; | |
import React, {Component, Fragment} from 'react'; | |
import { | |
SafeAreaView, | |
StyleSheet, | |
ScrollView, | |
View, | |
Text, | |
StatusBar, | |
} from 'react-native'; | |
import { | |
Colors, | |
} from 'react-native/Libraries/NewAppScreen'; | |
class App extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
stitchStatus: "logged out", | |
latestEvent: "no recent events", | |
} | |
} | |
componentDidMount() { | |
Stitch.initializeAppClient("<stitch-app-id>").then(client => { | |
const mongodb = client.getServiceClient(RemoteMongoClient.factory, "mongodb-atlas"); | |
const testCollection = mongodb.db("skunk").collection("works"); | |
client.auth.loginWithCredential(new AnonymousCredential()).then(user => { | |
this.setState({stitchStatus: `logged in anonymously as user ${user.id}`}); | |
testCollection.watch().then(stream => { | |
stream.onNext((event) => { | |
this.setState({latestEvent: JSON.stringify(event)}); | |
}); | |
}) | |
}); | |
}); | |
} | |
render() { | |
return ( | |
<Fragment> | |
<StatusBar barStyle="dark-content" /> | |
<SafeAreaView> | |
<ScrollView | |
contentInsetAdjustmentBehavior="automatic" | |
style={styles.scrollView}> | |
<View style={styles.body}> | |
<View style={styles.sectionContainer}> | |
<Text style={styles.sectionTitle}>Stitch Status</Text> | |
<Text style={styles.sectionDescription}> | |
{this.state.stitchStatus} | |
</Text> | |
</View> | |
<View style={styles.sectionContainer}> | |
<Text style={styles.sectionTitle}>Latest Event</Text> | |
<Text style={styles.sectionDescription}> | |
{this.state.latestEvent} | |
</Text> | |
</View> | |
</View> | |
</ScrollView> | |
</SafeAreaView> | |
</Fragment> | |
); | |
} | |
} | |
const styles = StyleSheet.create({ | |
scrollView: { | |
backgroundColor: Colors.lighter, | |
}, | |
engine: { | |
position: 'absolute', | |
right: 0, | |
}, | |
body: { | |
backgroundColor: Colors.white, | |
}, | |
sectionContainer: { | |
marginTop: 32, | |
paddingHorizontal: 24, | |
}, | |
sectionTitle: { | |
fontSize: 24, | |
fontWeight: '600', | |
color: Colors.black, | |
}, | |
sectionDescription: { | |
marginTop: 8, | |
fontSize: 18, | |
fontWeight: '400', | |
color: Colors.dark, | |
}, | |
highlight: { | |
fontWeight: '700', | |
}, | |
footer: { | |
color: Colors.dark, | |
fontSize: 12, | |
fontWeight: '600', | |
padding: 4, | |
paddingRight: 12, | |
textAlign: 'right', | |
}, | |
}); | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment