simplify example app

Author: andresilveirah

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": { "project": ["./tsconfig.json"] },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/strict-boolean-expressions": [
+            2,
+            {
+                "allowString" : false,
+                "allowNumber" : false
+            }
+        ]
+    },
+    "ignorePatterns": []
+}

README.md

@@ -9,11 +9,64 @@ npm install react-native-sourcepoint-cmp
 ## Usage
 
 ```js
-import { multiply } from "react-native-sourcepoint-cmp";
+//...
 
-// ...
+import { SPConsentManager } from 'react-native-sourcepoint-cmp';
 
-const result = await multiply(3, 7);
+const config = {
+  accountId: 22,
+  propertyId: 999,
+  propertyName: "mobile.multicampaign.demo",
+  gdprPMId: "488393",
+  ccpaPMId: "509688"
+}
+
+const consentManager = new SPConsentManager(
+  config.accountId,
+  config.propertyId,
+  config.propertyName
+);
+
+export default function App() {
+  const [userData, setUserData] = React.useState<{}>({});
+
+  React.useEffect(() => {
+    // it's important to wrap `onFinished` and `loadMessage` in a 
+    // useEffect hook so they only get called once.
+    consentManager.onFinished(() => {
+      consentManager.getUserData().then(setUserData);
+    })
+    consentManager.loadMessage();
+    consentManager.getUserData().then(setUserData);
+  }, []);
+
+  return (
+    <SafeAreaView>
+      <View>
+        <Button title="Load Messages" onPress={() => {
+          consentManager.loadMessage();
+        }}/>
+        <Button title="Load GDPR PM" onPress={() => {
+          consentManager.loadGDPRPrivacyManager(config.gdprPMId);
+        }}/>
+        <Button title="Load CCPA PM" onPress={() => {
+          consentManager.loadCCPAPrivacyManager(config.ccpaPMId);
+        }}/>
+        <Button title="Clear All" onPress={() => {
+          consentManager.clearLocalData()
+          consentManager.getUserData().then(setUserData)
+        }}/>
+      </View>
+      <ScrollView>
+        <ScrollView horizontal={true}>
+          <Text>
+            {JSON.stringify(userData, undefined, ' ')}
+          </Text>
+        </ScrollView>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
 ```
 
 ## Contributing

example/index.tsx

@@ -1,23 +1,4 @@
-import * as React from 'react';
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 
-import { SPConsentManager } from 'react-native-sourcepoint-cmp';
-
-const SPConfig = {
-  accountId: 22,
-  propertyId: 999,
-  propertyName: "mobile.multicampaign.demo",
-  gdprPMId: "488393",
-  ccpaPMId: "509688"
-}
-
-const manager = new SPConsentManager(
-  SPConfig.accountId,
-  SPConfig.propertyId,
-  SPConfig.propertyName
-);
-
-const PrivacyCompliantApp = () => <App consentManager={manager} config={SPConfig} />
-
-AppRegistry.registerComponent('main', () => PrivacyCompliantApp);
+AppRegistry.registerComponent('main', () => App);

example/src/App.tsx

@@ -1,9 +1,24 @@
 import * as React from 'react';
-import { StyleSheet, View, ScrollView, SafeAreaView, Button, Text } from 'react-native';
-import JSONTree from 'react-native-json-tree';
+import { View, ScrollView, SafeAreaView, Button, Text } from 'react-native';
 
-export default function App({ consentManager, config }) {
-  const [userData, setUserData] = React.useState<{}>({});
+import { SPConsentManager } from 'react-native-sourcepoint-cmp';
+
+const config = {
+  accountId: 22,
+  propertyId: 999,
+  propertyName: 'mobile.multicampaign.demo',
+  gdprPMId: '488393',
+  ccpaPMId: '509688',
+};
+
+const consentManager = new SPConsentManager(
+  config.accountId,
+  config.propertyId,
+  config.propertyName,
+);
+
+export default function App() {
+  const [userData, setUserData] = React.useState<Record<string, unknown>>({});
 
   React.useEffect(() => {
     consentManager.onFinished(() => {
@@ -14,51 +29,29 @@ export default function App({ consentManager, config }) {
   }, []);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.buttonsContainer}>
-        <Button title="Load Messages" onPress={() => {
+    <SafeAreaView>
+      <View>
+        <Button title='Load Messages' onPress={() => {
           consentManager.loadMessage();
         }}/>
-        <Button title="Load GDPR PM" onPress={() => {
+        <Button title='Load GDPR PM' onPress={() => {
           consentManager.loadGDPRPrivacyManager(config.gdprPMId);
         }}/>
-        <Button title="Load CCPA PM" onPress={() => {
+        <Button title='Load CCPA PM' onPress={() => {
           consentManager.loadCCPAPrivacyManager(config.ccpaPMId);
         }}/>
-        <Button title="Clear All" onPress={() => {
+        <Button title='Clear All' onPress={() => {
           consentManager.clearLocalData()
           consentManager.getUserData().then(setUserData)
         }}/>
       </View>
-      <ScrollView style={styles.dataContainer} horizontal={true} >
-        <ScrollView>
-          <JSONTree
-            data={userData}
-            labelRenderer={([key, ..._]) => <Text style={{ fontWeight: 'bold', fontSize: 16 }}>{key}</Text>}
-            valueRenderer={raw => <Text style={{ fontStyle: 'italic', fontSize: 16 }}>{raw}</Text>}
-          />
+      <ScrollView>
+        <ScrollView horizontal={true}>
+          <Text>
+            {JSON.stringify(userData, undefined, ' ')}
+          </Text>
         </ScrollView>
       </ScrollView>
     </SafeAreaView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    padding: 20,
-  },
-  buttonsContainer: {
-    flex: 1,
-    alignItems: 'center',
-    width: '100%',
-    minHeight: 160,
-    flexGrow: 0
-  },
-  dataContainer: {
-    flex: 1,
-    width: '100%',
-    flexGrow: 1
-  }
-});

src/index.tsx

@@ -6,14 +6,13 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo managed workflow\n';
 
-const SourcepointCmp = NativeModules.SourcepointCmp ? NativeModules.SourcepointCmp  : new Proxy(
-      {},
-      {
-        get() {
-          throw new Error(LINKING_ERROR);
-        },
-      }
-    );
+const SourcepointCmp = NativeModules.SourcepointCmp !== undefined ?
+  NativeModules.SourcepointCmp :
+  new Proxy({}, {
+    get() {
+      throw new Error(LINKING_ERROR);
+    },
+  });
 export class SPConsentManager {
   accountId: number;
   propId: number;
@@ -28,12 +27,12 @@ export class SPConsentManager {
     this.propName = propName;
   }
 
-  onFinished(callback: () => any) {
+  onFinished(callback: () => void) {
     this.emitter.removeAllListeners('onSPFinished')
     this.emitter.addListener('onSPFinished', callback);
   }
 
-  getUserData(): Promise<Object> {
+  getUserData(): Promise<Record<string, unknown>> {
     return SourcepointCmp.getUserData();
   }