mychips-react-sdk/lib/module/view/MCOfferwallView.js

MyChips Offerwall

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { Linking, BackHandler, View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import UriBuilderService from '../services/UriBuilderService';
import { UserService } from '../services/UserService';
import { RateLimitService } from '../services/RatelimitService';
import NetInfo from '@react-native-community/netinfo';
export function MCOfferwallView({
  adunitId
}) {
  //about:blank url will break compilation on ios
  const [currentUrl, setCurrentUrl] = React.useState(''); // State for the current URL
  const [isConnected, setIsConnected] = React.useState(true);
  const [isLoading, setIsLoading] = React.useState(true);
  const mychipsDomain = 'mychips.io';
  const webViewRef = React.useRef(null);
  const currentUrlRef = React.useRef(currentUrl); // Ref to keep track of the current URL

  const getUserData = async () => {
    const userService = new UserService();
    const userId = await userService.getOrCreateId();
    const advertisingId = await userService.getAdvertisingId();
    const age = await userService.getAge();
    const gender = await userService.getGender();
    const totalVirtualCurrency = await userService.getCurrentTotalCurrency();
    return {
      userId,
      advertisingId,
      age,
      gender,
      totalVirtualCurrency
    };
  };
  const buildUrl = async () => {
    const userData = await getUserData();
    const uriBuilderService = new UriBuilderService();
    return uriBuilderService.buildOfferwallUrl(adunitId, userData.userId, userData.advertisingId, userData.gender, userData.age, userData.totalVirtualCurrency);
  };
  const fetchUserDataAndBuildUrl = async () => {
    try {
      const url = await buildUrl();
      setCurrentUrl(url);
    } catch (error) {
      console.error('Failed to build offerwall URL', error);
    }
  };

  ///get the current navigation url and keep it updated
  const onNavigationStateChange = navState => {
    const {
      url
    } = navState;
    if (url !== currentUrl) {
      setCurrentUrl(url); // Update the state with the new URL
      currentUrlRef.current = url;
      console.log("onNavigationStateChange:" + url);
    }
  };

  ///handle logic for specific link
  const onShouldStartLoadWithRequest = request => {
    const {
      url
    } = request;
    console.log("onShouldStartLoadWithRequest:" + url);
    if (url.includes('blank') || url.includes('file:')) {
      return false;
    }
    if (url.includes('/redirect')) {
      Linking.openURL(url).catch(err => console.error("Couldn't load page", err));
      return false; // Prevent the WebView from loading the URL
    }
    if (url.includes('mychips://')) {
      return false;
    }
    return true; // Allow the WebView to load the URL
  };
  const onLoadStart = () => {
    //console.log("WebView Load Started");
  };
  const onLoad = () => {
    //console.log("WebView Loaded");
  };
  const onLoadEnd = () => {
    if (currentUrl == '' || currentUrl == 'about:blank') {
      fetchUserDataAndBuildUrl();
      console.log("onLoadEnd: fetchUserDataAndBuildUrl");
    }
    console.log("WebView Load Ended");
    if (isLoading && currentUrl.includes(mychipsDomain)) {
      setIsLoading(false);
    }
  };
  const onError = error => {
    console.error("WebView Error: ", error);
  };

  //handle navigation logic
  const onBackPress = () => {
    const url = currentUrlRef.current; // Use 

    if (url.includes('page=home') || !url.includes('page=')) {
      return false; // Allow default back button behavior if URL contains 'page=home'
    } else {
      var _webViewRef$current;
      (_webViewRef$current = webViewRef.current) === null || _webViewRef$current === void 0 || _webViewRef$current.goBack();
      return true; // Prevent default back button behavior
    }
  };
  React.useEffect(() => {
    RateLimitService.enableRequest();
    setTimeout(() => {
      if (currentUrlRef.current == 'about:blank' || currentUrlRef.current == '') {
        fetchUserDataAndBuildUrl();
        console.log("01");
      }
    }, 1000); // Delay to ensure WebView is ready

    setTimeout(() => {
      if (isLoading) setIsLoading(false);
    }, 5000);
    const unsubscribeNetInfo = NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected);
    });
    BackHandler.addEventListener('hardwareBackPress', onBackPress);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', onBackPress);
      unsubscribeNetInfo();
    };
  }, []);
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(WebView
  // key={currentUrl} // Use URL as key to force re-render
  , {
    ref: webViewRef,
    source: {
      uri: currentUrl
    },
    onNavigationStateChange: onNavigationStateChange,
    onShouldStartLoadWithRequest: onShouldStartLoadWithRequest,
    onLoadStart: onLoadStart,
    onLoad: onLoad,
    onLoadEnd: onLoadEnd,
    onError: onError
  }), isLoading && /*#__PURE__*/React.createElement(View, {
    style: styles.loaderContainer
  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: "large",
    style: styles.loader
  })), !isConnected && /*#__PURE__*/React.createElement(View, {
    style: styles.offlineContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.offlineText
  }, "No Internet Connection")));
}
const styles = StyleSheet.create({
  offlineContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#b52424',
    zIndex: 1 // Ensure the offline message is on top
  },
  offlineText: {
    color: '#fff'
  },
  loaderContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 1,
    // Ensures loader is above other content
    backgroundColor: 'rgba(255, 255, 255, 0.8)' // Optional: Adds a semi-transparent background
  },
  loader: {
    // Additional styles if needed
  }
});
//# sourceMappingURL=MCOfferwallView.js.map