From 252638e39b842a39a13de21a3c96524e7179c116 Mon Sep 17 00:00:00 2001 From: Peter Obiechina Date: Tue, 17 Jan 2023 16:16:54 +0100 Subject: [PATCH 1/4] switching to component class --- CountlyRNExample/App.tsx | 799 +++++++++++++++++++++++++++++---------- 1 file changed, 608 insertions(+), 191 deletions(-) diff --git a/CountlyRNExample/App.tsx b/CountlyRNExample/App.tsx index 67988e7..e25576a 100644 --- a/CountlyRNExample/App.tsx +++ b/CountlyRNExample/App.tsx @@ -13,52 +13,56 @@ import { Button, StyleSheet, Text, - useColorScheme, View, Image, TextInput, } from 'react-native'; -import {Colors} from 'react-native/Libraries/NewAppScreen'; - type SectionProps = PropsWithChildren<{ title: string; }>; -function Section({children, title}: SectionProps): JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - return ( - - - {title} - - - {children} - - - ); -} - -function App(): JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; +class Example extends React.Component { + constructor(props) { + super(props); + this.state = {ratingId: '61eac4627b8ad224e37bb3f5'}; + this.config = {}; + + this.onInit = this.onInit.bind(this); + this.onStart = this.onStart.bind(this); + this.basicEvent = this.basicEvent.bind(this); + this.eventWithSum = this.eventWithSum.bind(this); + this.eventWithSegment = this.eventWithSegment.bind(this); + this.eventWithSumAndSegment = this.eventWithSumAndSegment.bind(this); + this.startEvent = this.startEvent.bind(this); + this.test = this.test.bind(this); + this.onSendUserData = this.onSendUserData.bind(this); + this.onSendUserDataBulk = this.onSendUserDataBulk.bind(this); + this.onSetUserProperties = this.onSetUserProperties.bind(this); + this.onUpdateUserData = this.onUpdateUserData.bind(this); + this.userData_setProperty = this.userData_setProperty.bind(this); + this.userData_increment = this.userData_increment.bind(this); + this.userData_multiply = this.userData_multiply.bind(this); + this.userData_saveMax = this.userData_saveMax.bind(this); + this.userData_saveMin = this.userData_saveMin.bind(this); + this.userData_setOnce = this.userData_setOnce.bind(this); + this.changeDeviceId = this.changeDeviceId.bind(this); + this.askForNotificationPermission = + this.askForNotificationPermission.bind(this); + + this.startTrace = this.startTrace.bind(this); + this.endTrace = this.endTrace.bind(this); + this.recordNetworkTraceSuccess = this.recordNetworkTraceSuccess.bind(this); + this.recordNetworkTraceFailure = this.recordNetworkTraceFailure.bind(this); + this.random = this.random.bind(this); + this.setCustomCrashSegments = this.setCustomCrashSegments.bind(this); + this.presentRatingWidgetUsingEditBox = + this.presentRatingWidgetUsingEditBox.bind(this); + } - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, + componentDidMount = () => { + // this.onInit(); }; - var successCodes = [100, 101, 200, 201, 202, 205, 300, 301, 303, 305]; - var failureCodes = [400, 402, 405, 408, 500, 501, 502, 505]; onInit = async () => { // if(!await Countly.isInitialized()) { @@ -68,23 +72,19 @@ function App(): JSX.Element { // Countly.setRequiresConsent(true); // Set that consent should be required for features to work. // Countly.giveConsentInit(["location", "sessions", "attribution", "push", "events", "views", "crashes", "users", "push", "star-rating", "apm", "feedback", "remote-config"]); // give conset for specific features before init. // Countly.setLocationInit("TR", "Istanbul", "41.0082,28.9784", "10.2.33.12"); // Set user initial location. - // /** Optional settings for Countly initialisation */ // Countly.enableParameterTamperingProtection("salt"); // Set the optional salt to be used for calculating the checksum of requested data which will be sent with each request // // Countly.pinnedCertificates("count.ly.cer"); // It will ensure that connection is made with one of the public keys specified // // Countly.setHttpPostForced(false); // Set to "true" if you want HTTP POST to be used for all requests // Countly.enableApm(); // Enable APM features, which includes the recording of app start time. // Countly.pushTokenType(Countly.messagingMode.DEVELOPMENT, "ChannelName", "ChannelDescription"); // Set messaging mode for push notifications - // if (Platform.OS.match("ios")) { // Countly.recordAttributionID("ADVERTISING_ID"); // } // else { // Countly.enableAttribution(); // Enable to measure your marketing campaign performance by attributing installs from specific campaigns. // } - // Countly.configureIntentRedirectionCheck(["MainActivity"], ["com.countly.demo"]); - // Countly.setStarRatingDialogTexts("Title", "Message", "Dismiss"); // await Countly.init("https://try.count.ly", "YOUR_APP_KEY"); // Initialize the countly SDK. // Countly.appLoadingFinished(); @@ -98,7 +98,6 @@ function App(): JSX.Element { // alert('theNotification: ' + jsonString); // }); // Set callback to receive push notifications // Countly.askForNotificationPermission("android.resource://com.countly.demo/raw/notif_sample"); // This method will ask for permission, enables push notification and send push token to countly server. - // } }; @@ -136,13 +135,10 @@ function App(): JSX.Element { // options.picturePath = ""; // options.gender = "Male"; // options.byear = 1989; - // // Custom User Properties // options.customeValueA = "Custom value A"; // options.customeValueB = "Custom value B"; - // Countly.userDataBulk.setUserProperties(options); - // Countly.userDataBulk.save(); }; @@ -166,7 +162,6 @@ function App(): JSX.Element { // // We need to call the "save" in then block else it will cause a race condition and "save" may call before all the user profiles calls are completed // Countly.userDataBulk.save(); // }) - }; onUpdateUserData = () => { @@ -391,7 +386,6 @@ function App(): JSX.Element { // var latitude = "29.634933"; // var longitude = "-95.220255"; // var ipAddress = "103.238.105.167"; - // Countly.setLocation(countryCode, city, latitude + "," + longitude, ipAddress); }; disableLocation = () => { @@ -422,7 +416,7 @@ function App(): JSX.Element { // }); }; - presentRatingWidgetUsingEditBox = function() { + presentRatingWidgetUsingEditBox = function () { // Countly.presentRatingWidgetWithID(this.state.ratingId, "Submit", (error) => { // if (error != null) { // console.log("presentRatingWidgetUsingEditBox : " + error); @@ -511,7 +505,7 @@ function App(): JSX.Element { // Countly.endTrace(traceKey, customMetric); }; random = (number) => { - // return Math.floor(Math.random() * number); + return Math.floor(Math.random() * number); }; recordNetworkTraceSuccess = () => { // var networkTraceKey = "api/endpoint.1"; @@ -551,14 +545,11 @@ function App(): JSX.Element { test = () => { // this.onInit(); // this.onStart(); - // this.basicEvent(); // this.eventWithSum(); // this.eventWithSegment(); // this.eventWithSumAndSegment(); - // this.startEvent(); - // this.onSendUserData(); // this.onSendUserDataBulk(); // this.onSetUserProperties(); @@ -570,7 +561,6 @@ function App(): JSX.Element { // this.userData_saveMax(); // this.userData_saveMin(); // this.userData_setOnce(); - // // Note: Crash test for setLocation method. // // Countly.setLocation(null, city, latitude + "," + longitude, ipAddress); // // Countly.setLocation(null, null, latitude + "," + longitude, ipAddress); @@ -585,11 +575,9 @@ function App(): JSX.Element { // // Countly.setLocation(countryCode, city, "abcd", ipAddress); }; - return ( - - + render() { + return ( + - < Button onPress = { this.test } title = "Test" color = "#1b1c1d"> - < Button onPress = { this.onInit } title = "Init"> - < Button onPress = { this.onStart } title = "Start" color = "#5bbd72"> - < Button onPress = { this.onStop } title = "Stop" color = "#d95c5c"> - - . - Events Start - - < Button onPress = { this.basicEvent } title = "Basic Events" color = "#e0e0e0"> - < Button onPress = { this.eventWithSum } title = "Event with Sum" color = "#e0e0e0"> - < Button onPress = { this.eventWithSegment } title = "Event with Segment" color = "#e0e0e0"> - < Button onPress = { this.eventWithSumAndSegment } title = "Even with Sum and Segment" color = "#841584"> - < Button onPress = { this.startEvent } title = "Timed event" color = "#e0e0e0"> - < Button onPress = { this.timedEventWithSum } title = "Timed events with Sum" color = "#e0e0e0"> - < Button onPress = { this.timedEventWithSegment } title = "Timed events with Segment" color = "#e0e0e0"> - < Button onPress = { this.timedEventWithSumAndSegment } title = "Timed events with Sum and Segment" color = "#e0e0e0"> - Events End - . - 2017 - User Methods Start - < Button onPress = { this.onSendUserData } title = "Send Users Data" color = "#00b5ad"> - < Button onPress = { this.onUpdateUserData } title = "Update Users Data" color = "#00b5ad"> - < Button onPress = { this.userData_setProperty } title = "UserData.setProperty" color = "#00b5ad"> - < Button onPress = { this.userData_increment } title = "UserData.increment" color = "#00b5ad"> - < Button onPress = { this.userData_incrementBy } title = "UserData.incrementBy" color = "#00b5ad"> - < Button onPress = { this.userData_multiply } title = "UserData.multiply" color = "#00b5ad"> - < Button onPress = { this.userData_saveMax } title = "UserData.saveMax" color = "#00b5ad"> - < Button onPress = { this.userData_saveMin } title = "UserData.saveMin" color = "#00b5ad"> - < Button onPress = { this.userData_setOnce } title = "UserData.setOnce" color = "#00b5ad"> - < Button onPress = { this.userData_pushUniqueValue } title = "UserData.pushUniqueValue" color = "#00b5ad"> - < Button onPress = { this.userData_pushValue } title = "UserData.pushValue" color = "#00b5ad"> - < Button onPress = { this.userData_pullValue } title = "UserData.pullValue" color = "#00b5ad"> - < Button onPress = { this.onSetUserProperties } title = "Set Users Properties" color = "#00b5ad"> - < Button onPress = { this.onSendUserDataBulk } title = "Send Users Data Bulk" color = "#00b5ad"> - User Methods End - . - Other Methods Start - < Button onPress = { () => {Countly.recordView("HomePage")} } title = "Record View: 'HomePage'" color = "#e0e0e0"> - < Button onPress = { () => {Countly.recordView("Dashboard")} } title = "Record View: 'Dashboard'" color = "#e0e0e0"> - < Button onPress = { () => {Countly.recordView("HomePage", {"version": "1.0", "_facebook_version": "0.0.1"})} } title = "Record View: 'HomePage' with Segment" color = "#e0e0e0"> - < Button onPress = { this.setLocation } title = "Set Location" color = "#00b5ad"> - < Button onPress = { this.disableLocation } title = "Disable Location" color = "#00b5ad"> - < Button onPress = { this.showStarRating } title = "Show Star Rating Model" color = "#00b5ad"> - < Button onPress = { this.presentRatingWidget } title = "Show FeedBack Model" color = "#00b5ad"> - this.setState({ ratingId })} - onSubmitEditing={(ratingId) => this.setState({ ratingId })} - // value={this.state.ratingId} - /> - < Button - // disabled={!this.state.ratingId} - onPress = { this.presentRatingWidgetUsingEditBox } title = "Show Feedback using EditBox" color = "#00b5ad"> - < Button onPress = { this.showSurvey } title = "Show Survey" color = "#00b5ad"> - < Button onPress = { this.showNPS } title = "Show NPS" color = "#00b5ad"> - < Button onPress = { this.eventSendThreshold } title = "Set Event Threshold" color = "#00b5ad"> - < Button onPress = { this.setCustomCrashSegments } title = "Set Custom Crash Segment" color = "#00b5ad"> - < Button onPress = { this.setCustomMetrics } title = "Set Custom Metrics" color = "#00b5ad"> - Other Methods End - . - < Text style={[{ textAlign: 'center' }]}>Push Notification Start - < Button onPress={this.askForNotificationPermission} title='askForNotificationPermission' color='#00b5ad' /> - < Button onPress={this.changeDeviceId} title='Change Device ID' color='#00b5ad' /> - < Text style={[{ textAlign: 'center' }]}>Push Notification End - . - < Text style={[{ textAlign: 'center' }]}>Consent Start - < Button onPress = { this.giveAllConsent } title = "Give all Consent" color = "#00b5ad"> - < Button onPress = { this.removeAllConsent } title = "Remove all Consent" color = "#00b5ad"> - {/* Give Consent */} - < Button onPress = { ()=>{ this.giveConsent("sessions") } } title = "Give sessions" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("events") } } title = "Give events" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("views") } } title = "Give views" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("location") } } title = "Give location" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("crashes") } } title = "Give crashes" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("attribution") } } title = "Give attribution" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("users") } } title = "Give users" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("push") } } title = "Give push" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("star-rating") } } title = "Give star-rating" color = "#00b5ad"> - < Button onPress = { ()=>{ this.giveConsent("apm") } } title = "Give APM" color = "#00b5ad"> - {/* Remove Consent */} - < Button onPress = { ()=>{ this.removeConsent("sessions") } } title = "Remove sessions" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("events") } } title = "Remove events" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("views") } } title = "Remove views" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("location") } } title = "Remove location" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("crashes") } } title = "Remove crashes" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("attribution") } } title = "Remove attribution" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("users") } } title = "Remove users" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("push") } } title = "Remove push" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("star-rating") } } title = "Remove star-rating" color = "#00b5ad"> - < Button onPress = { ()=>{ this.removeConsent("apm") } } title = "Remove APM" color = "#00b5ad"> - < Button onPress = { this.giveMultipleConsent } title = "Give multiple consent" color = "#00b5ad"> - < Button onPress = { this.removeMultipleConsent } title = "Remove multiple consent" color = "#00b5ad"> - < Text style={[{ textAlign: 'center' }]}>Consent End - . - < Text style={[{ textAlign: 'center' }]}>Remote Config Start - < Button onPress = { this.remoteConfigUpdate } title = "Update Remote Config" color = "#00b5ad"> - < Button onPress = { this.updateRemoteConfigForKeysOnly } title = "Update Remote Config with Keys Only" color = "#00b5ad"> - < Button onPress = { this.updateRemoteConfigExceptKeys } title = "Update Remote Config Except Keys" color = "#00b5ad"> - < Button onPress = { this.getRemoteConfigValueForKeyBoolean } title = "Boolean Test" color = "#00b5ad"> - < Button onPress = { this.getRemoteConfigValueForKeyFloat } title = "Float Test" color = "#00b5ad"> - < Button onPress = { this.getRemoteConfigValueForKeyInteger } title = "Integer Test" color = "#00b5ad"> - < Button onPress = { this.getRemoteConfigValueForKeyString } title = "String Test" color = "#00b5ad"> - < Button onPress = { this.getRemoteConfigValueForKeyJSON } title = "JSON Test" color = "#00b5ad"> - < Button onPress = { this.remoteConfigClearValues } title = "Clear remote config cache" color = "#00b5ad"> - < Text style={[{ textAlign: 'center' }]}>Remote Config End - . - Crash Event start - < Button onPress = { this.addCrashLog } title = "Add Crash Log" color = "#00b5ad"> - Crash Event End - . - - APM Example Start - - - - - APM Example Start - . - {/* - < Button onPress = { this.testCrash } title = "Test Native Crash" color = "crimson"> - */} + + + + + + + . + Events Start + + + + + + + + + + + Events End + . + + 2017 + User Methods Start + + + + + + + + + + + + + + + + + + User Methods End + . + + Other Methods Start + + + + + + + + this.setState({ratingId})} + onSubmitEditing={ratingId => this.setState({ratingId})} + value={this.state.ratingId} + /> + + + + + + + Other Methods End + . + + Push Notification Start + + + + {/* Give Consent */} + + + + + + + + + + + + {/* Remove Consent */} + + + + + + + + + + + + + + + + Consent End + . + + Remote Config Start + + + + + + + + + + + Remote Config End + . + + Crash Event start + + Crash Event End + . + + APM Example Start + + + + + APM Example Start + . + + {/* + < Button onPress = { this.testCrash } title = "Test Native Crash" color = "crimson"> + */} + ); + } +} + +function App(): JSX.Element { + return ( + + ); } const styles = StyleSheet.create({ - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - }, - highlight: { - fontWeight: '700', + inputRoundedBorder: { + margin: 5, + backgroundColor: 'white', + borderWidth: 1, + borderRadius: 10, + borderColor: 'grey', + padding: 10, + fontSize: 20, }, }); From badf39268d398459cdd989b1bc1548703e82d0ec Mon Sep 17 00:00:00 2001 From: Peter Obiechina Date: Tue, 17 Jan 2023 17:13:22 +0100 Subject: [PATCH 2/4] undo formatter and add lifecycle methods with comments --- CountlyRNExample/App.tsx | 623 ++++++++------------------------------- 1 file changed, 116 insertions(+), 507 deletions(-) diff --git a/CountlyRNExample/App.tsx b/CountlyRNExample/App.tsx index e25576a..4260304 100644 --- a/CountlyRNExample/App.tsx +++ b/CountlyRNExample/App.tsx @@ -61,9 +61,18 @@ class Example extends React.Component { } componentDidMount = () => { + console.log('component did mount'); // this.onInit(); }; + componentDidUpdate(prevProps, prevState) { + console.log('componentDidUpdate'); + } + + componentWillUnmount() { + console.log('componentWillUnmount'); + } + onInit = async () => { // if(!await Countly.isInitialized()) { // /** Recommended settings for Countly initialisation */ @@ -590,64 +599,24 @@ class Example extends React.Component { - - - - + - - - - - - - + - - - - - - - - - - - - - - + - - - - - - - this.setState({ratingId})} - onSubmitEditing={ratingId => this.setState({ratingId})} - value={this.state.ratingId} - /> - - - - - - + - + + Consent Start + - - - - - - - - - + - - - - - - - - - - - - - - Consent End + - - - - - - - - - - Remote Config End + + + + + + + + + Remote Config Start + + - - - + +