Merge pull request #3 from Crowdhandler/feature/match-on-url

Allow WR matches on URL

Author: carl-wells-crowdhandler

CHReactNativeGatekeeper.tsx

@@ -11,7 +11,7 @@ type CHEvents = {
   onRequestEnd: any,
   navigation: any,
 }
-const API_REDIRECT_ENDPOINT = "http://api.crowdhandler.com/v1/redirect/requests/";
+const API_REDIRECT_ENDPOINT = "https://api.crowdhandler.com/v1/redirect/requests/";
 
 export default class CHReactNativeGatekeeper {
 
@@ -27,6 +27,7 @@ export default class CHReactNativeGatekeeper {
   };
   screen_config: any;
   timeout: number;
+  requestType: string;
 
   constructor(config: { CH_KEY: string }, events: CHEvents, timeout: number, debug: boolean) {
     this.CH_KEY = config.CH_KEY;
@@ -45,8 +46,8 @@ export default class CHReactNativeGatekeeper {
    * @param config 
    * @returns Promise
    */
-  redirectOrWait(config: { slug: string }) {
-    if (!config.slug) {
+  redirectOrWait(config: { slug: string, url: string }) {
+    if (!config.slug && !config.url) {
 
       this.on({
         type: 'onRedirect',
@@ -60,6 +61,11 @@ export default class CHReactNativeGatekeeper {
 
     } else {
 
+      this.requestType = 'slug';
+      if (config.url) {
+        this.requestType = 'url';
+      }
+
       this.screen_config = config;
       this.makeCrowdHandlerRequest();
 
@@ -77,26 +83,23 @@ export default class CHReactNativeGatekeeper {
     this.events.navigation = navigation;
   }
 
-  async fetchWithTimeout (resource: string, options: RequestInit) {
-    
+  async fetchWithTimeout(resource: string, options: RequestInit) {
+
     try {
       const controller = new AbortController();
       const id = setTimeout(() => controller.abort(), this.timeout);
-  
       const response = await fetch(resource, {
         ...options,
-        signal: controller.signal  
-      });      
-  
-      
+        signal: controller.signal
+      });
       clearTimeout(id);
-      
+
       return response;
     } catch (error) {
       return error;
     }
 
-}
+  }
 
   /**
    * 
@@ -116,9 +119,8 @@ export default class CHReactNativeGatekeeper {
     // a URL and config given:
 
     return this.fetchWithTimeout(url, config)
-      .then(async (response) => {        
-
-        if(response.headers) {
+      .then(async (response) => {
+        if (response.headers) {
           return {
             headers: response.headers,
             status: response.status,
@@ -135,31 +137,57 @@ export default class CHReactNativeGatekeeper {
       })
   }
 
+  buildRequestURL() : string {
+    let URL: string;
+    let saved_token :undefined;
+
+    let params: any = [ { name: 'ch-public-key', value: this.CH_KEY } ];
+
+    if (this.requestType === 'slug') {
+      params.push({ name: 'slug', value: this.screen_config.slug });
+      if (this.tokens[this.screen_config.slug]) {
+        saved_token = this.tokens[this.screen_config.slug];
+      }
+    } else {
+      params.push({ name: 'url', value:  encodeURI(this.screen_config.url) });
+      if (this.tokens[encodeURI(this.screen_config.url)]) {
+        saved_token = this.tokens[encodeURI(this.screen_config.url)]
+      }
+    }
+
+    if (!saved_token){
+      URL = API_REDIRECT_ENDPOINT;
+    } else {
+      URL = `${API_REDIRECT_ENDPOINT}${saved_token}`;
+    }
+
+    URL = `${URL}?${params.map((param) => {
+      return `${param.name}=${param.value}`
+    }).join('&')}`
+
+    return URL;
+  }
+
   /**
    * 
    */
   async makeCrowdHandlerRequest() {
     this.on({ type: 'onRequestStart' })
-    let URL = `${API_REDIRECT_ENDPOINT}?ch-public-key=${this.CH_KEY}&slug=${this.screen_config.slug}`;
-    if (this.tokens[this.screen_config.slug]) {
-      URL = `${API_REDIRECT_ENDPOINT}${this.tokens[this.screen_config.slug]}?ch-public-key=${this.CH_KEY}&slug=${this.screen_config.slug}`;
-    }
-
+    const URL : string = this.buildRequestURL();
+    
     try {
       const response = await this.request<CHResponse>(URL, {
         method: 'GET'
-      });      
+      });
 
-      let token: string;
-      if(response && response.url) {
+      let token: any;
+      if (response && response.url) {
         token = this.getToken(response.url);
-        
-        if (token) {
-          this.saveToken(this.screen_config.slug, token);
-        }
-
       }
 
+      if (token) {
+        this.saveToken((this.requestType === 'slug') ? this.screen_config.slug : encodeURI(this.screen_config.url), token);
+      }
 
       if (response && response.status === 200) {
 
@@ -191,7 +219,7 @@ export default class CHReactNativeGatekeeper {
 
       this.on({ type: 'onRequestEnd' })
 
-    } catch (error) {      
+    } catch (error) {
 
       this.on({
         type: 'onRedirect',
@@ -245,7 +273,7 @@ export default class CHReactNativeGatekeeper {
 
     } catch (error) {
       console.log(error);
-      
+
     }
 
     return token;
@@ -257,28 +285,43 @@ export default class CHReactNativeGatekeeper {
 
   }
 
-  handlePostMessage(message: string) {
+  handlePostMessage(message: string) {    
     let parts = message.split('=');
-    let payload = JSON.parse(parts[1]);
 
-    switch (parts[0]) {
-      case 'saveToken':
-        this.saveToken(payload.slug, payload.token)
-        break;
-      case 'promoted':
-        this.on({
-          type: 'onRedirect',
-          payload: {
-            screen_config: this.screen_config,
-            navigation: this.events.navigation,
-            referer: 'waiting_room',
-            status: 200
+    try {
+      let payload = JSON.parse(parts[1]);      
+
+      switch (parts[0]) {
+        case 'saveToken':
+
+          if (this.requestType === 'slug') {
+            this.saveToken(payload.slug, payload.token)
           }
-        });
-        break;
 
-      default:
-        break;
+          if (this.requestType === 'url') {
+            this.saveToken(encodeURI(payload.requestURL), payload.token)
+          }
+
+          break;
+        case 'promoted':
+          this.on({
+            type: 'onRedirect',
+            payload: {
+              screen_config: this.screen_config,
+              navigation: this.events.navigation,
+              referer: 'waiting_room',
+              status: 200
+            }
+          });
+          break;
+
+        default:
+          break;
+      }
+
+    } catch (error) {
+      console.log(error);
+
     }
   }
 }

CHWebView.js

@@ -11,8 +11,25 @@ export const CHWebView = ({ navigation, route }) => {
 
     const appState = useRef(AppState.currentState);
     const [appStateVisible, setAppStateVisible] = useState(appState.current);
+    const isMounted = useRef(true);
     const uri = route.params.uri;
     const crowdhandler_gatekeeper = useCrowdHandler();
+    const ref = useRef();
+    /**
+     * Only load the webview when this screen is mounted
+     */
+    useEffect(() => {
+        const webViewMounted = () => {
+            isMounted.current = true;
+        };
+        webViewMounted();
+
+        return () => {
+            isMounted.current = false;
+        };
+
+    }, []);
+
 
     useEffect(() => {
         const subscription = AppState.addEventListener('change', nextAppState => {
@@ -25,8 +42,9 @@ export const CHWebView = ({ navigation, route }) => {
     }, []);
 
     return (
-        (appStateVisible == 'active') ?
+        (appStateVisible == 'active' && isMounted.current) ?
         <WebView style={styles.container}
+            ref={(instance) => (ref.current = instance)}
             onMessage={(event) => {
                 crowdhandler_gatekeeper.handlePostMessage(event.nativeEvent.data);
             }}