Merge pull request #2528 from ecency/nt/inapp-web

Nt/inapp web

src/components/informationArea/view/informationAreaView.js

@@ -1,43 +0,0 @@
-import React, { PureComponent } from 'react';
-import { View, Text, TouchableOpacity, Linking } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-
-// Constants
-
-// Components
-
-// Styles
-import styles from './informationAreaStyles';
-
-class FormInputView extends PureComponent {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { string }     description       - Description texts.
-   *   @prop { string }     iconName          - For icon render name.
-   *
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-
-  render() {
-    const { description, iconName, bold, link } = this.props;
-
-    return (
-      <TouchableOpacity onPress={() => Linking.openURL(link)}>
-        <View style={styles.container}>
-          <Ionicons color="#c1c5c7" style={styles.infoIcon} name={iconName} />
-          <Text style={[styles.infoText, bold && styles.bold]}>{description}</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
-
-export default FormInputView;

src/components/informationArea/view/informationAreaView.tsx

@@ -0,0 +1,39 @@
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import ROUTES from '../../../constants/routeNames';
+
+// Constants
+
+// Components
+
+// Styles
+import styles from './informationAreaStyles';
+
+const FormInputView = ({ description, iconName, bold, link }) => {
+
+  const navigation = useNavigation();
+
+  const _onPress = () => {
+    navigation.navigate({
+      name: ROUTES.SCREENS.WEB_BROWSER,
+      params: {
+        url: link
+      },
+      key: link
+    })
+  }
+
+  return (
+    <TouchableOpacity onPress={_onPress}>
+      <View style={styles.container}>
+        <Ionicons color="#c1c5c7" style={styles.infoIcon} name={iconName} />
+        <Text style={[styles.infoText, bold && styles.bold]}>{description}</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+
+export default FormInputView;

src/components/postElements/body/view/commentBodyView.tsx

@@ -98,18 +98,12 @@ const CommentBody = ({
     if (ind === 1) {
       // open link
       if (selectedLink) {
-        Linking.canOpenURL(selectedLink).then((supported) => {
-          if (supported) {
-            Linking.openURL(selectedLink);
-          } else {
-            dispatch(
-              toastNotification(
-                intl.formatMessage({
-                  id: 'alert.failed_to_open',
-                }),
-              ),
-            );
-          }
+        RootNavigation.navigate({
+          name: ROUTES.SCREENS.WEB_BROWSER,
+          params: {
+            url:selectedLink,
+          },
+          key: selectedLink,
         });
       }
     }

src/components/postElements/body/view/postBodyView.js

@@ -93,18 +93,12 @@ const PostBody = ({ body, dispatch, onLoadEnd, width }) => {
     if (ind === 1) {
       // open link
       if (selectedLink) {
-        Linking.canOpenURL(selectedLink).then((supported) => {
-          if (supported) {
-            Linking.openURL(selectedLink);
-          } else {
-            dispatch(
-              toastNotification(
-                intl.formatMessage({
-                  id: 'alert.failed_to_open',
-                }),
-              ),
-            );
-          }
+        navigation.navigate({
+          name: ROUTES.SCREENS.WEB_BROWSER,
+          params: {
+            url:selectedLink,
+          },
+          key: selectedLink,
         });
       }
     }

src/config/ecencyApi.ts

@@ -7,6 +7,8 @@ import { getDigitPinCode } from '../providers/hive/dhive';
 import { decryptKey } from '../utils/crypto';
 import bugsnagInstance from './bugsnag';
 
+export const ECENCY_TERMS_URL = `${Config.ECENCY_BACKEND_API}/terms-of-service`;
+
 const api = axios.create({
   baseURL: Config.ECENCY_BACKEND_API,
   headers: {

src/config/locales/en-US.json

@@ -491,7 +491,7 @@
     "connection_fail": "Connection Failed!",
     "connection_success": "Successfully connected!",
     "checking": "Checking...",
-    "external_link": "Open in Browser",
+    "external_link": "Open external link",
     "not_existing_post": "The post does not exist! Please check permlink and author.",
     "google_play_version": "We noticed that your device has old version of Google Play. Please update Google Play services and try again!",
     "rc_down": "Not enough resource credits to perform an action! \n\nBoost your account to continue enjoy the experience. Do you want to boost your account, now?",

src/navigation/stackNavigator.tsx

@@ -56,7 +56,6 @@ const MainStackNavigator = () => {
       <MainStack.Screen name={ROUTES.SCREENS.ACCOUNT_BOOST} component={AccountBoost} />
       <MainStack.Screen name={ROUTES.SCREENS.COMMUNITY} component={Community} />
       <MainStack.Screen name={ROUTES.SCREENS.COMMUNITIES} component={Communities} />
-      <MainStack.Screen name={ROUTES.SCREENS.WEB_BROWSER} component={WebBrowser} />
       <MainStack.Screen name={ROUTES.SCREENS.REFER} component={ReferScreen} />
       <MainStack.Screen name={ROUTES.SCREENS.COIN_DETAILS} component={CoinDetails} />
       <MainStack.Screen name={ROUTES.SCREENS.EDIT_HISTORY} component={EditHistoryScreen} />
@@ -67,6 +66,7 @@ const MainStackNavigator = () => {
         <MainStack.Screen name={ROUTES.SCREENS.FOLLOWS} component={Follows} />
         <MainStack.Screen name={ROUTES.SCREENS.TRANSFER} component={Transfer} />
         <MainStack.Screen name={ROUTES.SCREENS.EDITOR} component={Editor} />
+
       </MainStack.Group>
     </MainStack.Navigator>
   );
@@ -83,6 +83,7 @@ export const StackNavigator = ({ initRoute }) => {
       <RootStack.Screen name={ROUTES.SCREENS.REGISTER} component={Register} />
       <RootStack.Screen name={ROUTES.SCREENS.LOGIN} component={Login} />
       <RootStack.Screen name={ROUTES.SCREENS.WELCOME} component={WelcomeScreen} />
+      <MainStack.Screen name={ROUTES.SCREENS.WEB_BROWSER} component={WebBrowser} />
       <RootStack.Screen
         name={ROUTES.SCREENS.PINCODE}
         options={{ gestureEnabled: false }}

src/screens/login/screen/loginScreen.js

@@ -27,6 +27,7 @@ import styles from './loginStyles';
 import globalStyles from '../../../globalStyles';
 
 import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
+import { ECENCY_TERMS_URL } from '../../../config/ecencyApi';
 
 class LoginScreen extends PureComponent {
   constructor(props) {
@@ -154,7 +155,7 @@ class LoginScreen extends PureComponent {
                 description={intl.formatMessage({
                   id: 'login.description',
                 })}
-                link="https://ecency.com/terms-of-service"
+                link={ECENCY_TERMS_URL}
                 iconName="ios-information-circle-outline"
               />
             </KeyboardAwareScrollView>

src/screens/register/registerScreen.js

@@ -26,6 +26,7 @@ import styles from './registerStyles';
 import ESTEEM_LOGO from '../../assets/like_new.png';
 import ESTEEM_SMALL_LOGO from '../../assets/ecency_logo_transparent.png';
 import getWindowDimensions from '../../utils/getWindowDimensions';
+import { ECENCY_TERMS_URL } from '../../config/ecencyApi';
 
 const RegisterScreen = ({ navigation, route }) => {
   const intl = useIntl();
@@ -167,7 +168,7 @@ const RegisterScreen = ({ navigation, route }) => {
               <InformationArea
                 description={intl.formatMessage({ id: 'register.form_description' })}
                 iconName="ios-information-circle-outline"
-                link="https://ecency.com/terms-of-service"
+                link={ECENCY_TERMS_URL}
               />
             </View>
             <View style={styles.footerButtons}>

src/screens/webBrowser/screen/webBrowser.tsx

@@ -1,11 +1,13 @@
-import React, { useMemo } from 'react';
-import { Alert, StatusBar, View, Text } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Alert, ActivityIndicator, Share, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import styles from './webBrowserStyles';
-import { IconButton } from '../../../components';
+import { BasicHeader } from '../../../components';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { useIntl } from 'react-intl';
 
 export interface WebBrowserParams {
   url: string;
@@ -22,40 +24,64 @@ interface Props {
 
 const WebBrowser = ({ navigation, route }: Props) => {
   const url = useMemo(() => route.params?.url, []);
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(true);
+
 
   if (!url) {
     Alert.alert('DEV: url parameter cannot be empty');
+    navigation.goBack();
+    return null;
   }
 
-  const _onBackPress = () => {
-    navigation.goBack();
-  };
+  const urlObj = new URL(url);
+  const title = `${urlObj.host || urlObj.hostname}...`
 
-  const _renderHeader = () => {
-    return (
-      <View style={styles.header}>
-        <View style={styles.titleContainer}>
-          <Text style={styles.title}>ECENCY</Text>
-        </View>
-        <IconButton
-          iconStyle={styles.backIcon}
-          iconType="MaterialIcons"
-          name="arrow-back"
-          onPress={_onBackPress}
-        />
-      </View>
-    );
-  };
+  const _handleRightIconPress = () => {
+    Share.share({
+      message: url,
+    });
+  }
+
+  const _onError = () => {
+    Alert.alert(
+      intl.formatMessage({ id: 'alert.fail' }),
+    )
+  }
 
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar barStyle="dark-content" />
-      {_renderHeader()}
-      <WebView
-        source={{
-          uri: url,
-        }}
+    <SafeAreaView style={styles.container} >
+      <BasicHeader
+        title={title}
+        backIconName='close'
+        rightIconName='share'
+        iconType='MaterialIcons'
+        handleRightIconPress={_handleRightIconPress}
       />
+
+
+      <View style={styles.container}>
+        <WebView
+          style={styles.webView}
+          onLoadEnd={() => {
+            setIsLoading(false);
+          }}
+          onError={_onError}
+          source={{
+            uri: url,
+          }}
+        />
+        {isLoading && (
+          <ActivityIndicator
+            style={styles.loading}
+            color={EStyleSheet.value('$primaryDarkGray')}
+            size="large"
+          />
+        )}
+      </View>
+
+
     </SafeAreaView>
   );
 };

src/screens/webBrowser/screen/webBrowserStyles.ts

@@ -3,31 +3,17 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 export default EStyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '$primaryBackgroundColor'
   },
-  backIcon: {
-    fontSize: 24,
-    color: '#c1c5c7', // avoiding dark theme based color for web browser
+  webView: {
+    flex: 1,
+    width: '100%'
   },
-  header: {
-    padding: 16,
-    paddingVertical: 12,
-    alignItems: 'center',
-    flexDirection: 'row',
-    borderBottomWidth: EStyleSheet.hairlineWidth,
-    borderColor: '#c1c5c7',
-  },
-  titleContainer: {
-    position: 'absolute',
+  loading: {
+    position: "absolute",
+    top: 16,
     left: 0,
     right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    color: '#c1c5c7',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
+    alignItems: 'center'
+  }
 });

src/screens/welcome/screen/WelcomeScreen.tsx

@@ -1,13 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { Text, Image, View, SafeAreaView, TouchableOpacity, Linking } from 'react-native';
+import { Text, Image, View, SafeAreaView, TouchableOpacity } from 'react-native';
 
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { gestureHandlerRootHOC, ScrollView } from 'react-native-gesture-handler';
 import VersionNumber from 'react-native-version-number';
 
 import { CheckBox, Icon, MainButton } from '../../../components';
+import { ECENCY_TERMS_URL } from '../../../config/ecencyApi';
 import ROUTES from '../../../constants/routeNames';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import { setLastAppVersion, setIsTermsAccepted } from '../../../redux/actions/applicationActions';
@@ -47,6 +48,17 @@ const WelcomeScreen = () => {
     setIsConsentChecked(isCheck);
   };
 
+  const _onTermsPress = () => {
+    const url = ECENCY_TERMS_URL;
+    navigation.navigate({
+      name:ROUTES.SCREENS.WEB_BROWSER,
+      params:{
+        url
+      },
+      key:url
+    })
+  }
+
   const _renderInfo = (iconName, headingIntlId, bodyIntlId) => (
     <View style={styles.sectionRow}>
       <Icon
@@ -65,7 +77,7 @@ const WelcomeScreen = () => {
   const _renderConsent = () => (
     <View style={styles.consentContainer}>
       <CheckBox isChecked={isConsentChecked} clicked={_onCheckPress} style={styles.checkStyle} />
-      <TouchableOpacity onPress={() => Linking.openURL('https://ecency.com/terms-of-service')}>
+      <TouchableOpacity onPress={_onTermsPress}>
         <View style={styles.consentTextContainer}>
           <Text style={styles.termsDescText}>
             {intl.formatMessage({