Merge pull request #17 from gustavo-em/validate_url

validating url when add a new portal

package-lock.json

@@ -14,7 +14,7 @@
         "@react-navigation/native": "^6.0.8",
         "@react-navigation/native-stack": "^6.5.0",
         "@types/styled-components-react-native": "^5.1.3",
-        "bigbluebutton-mobile-sdk": "^0.1.8",
+        "bigbluebutton-mobile-sdk": "^0.1.10",
         "i18next": "^21.6.12",
         "i18next-browser-languagedetector": "^6.1.3",
         "react": "17.0.2",
@@ -5200,9 +5200,9 @@
       }
     },
     "node_modules/bigbluebutton-mobile-sdk": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/bigbluebutton-mobile-sdk/-/bigbluebutton-mobile-sdk-0.1.8.tgz",
-      "integrity": "sha512-fGzM4taZRgA2U/nTVVCU7g657zLKb2E74h6SQ0eCGJCz1Bi2BiiT+Dg8bYO244IpCUEs4nL+ma3ZGWLYrFZ7vQ==",
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/bigbluebutton-mobile-sdk/-/bigbluebutton-mobile-sdk-0.1.10.tgz",
+      "integrity": "sha512-nqIfPco7IsMQgRqc4QXybdesjHXJsnOmd6G6L+wt5yHiKw0aDzhmBRlfzk9Q8FGTRlTTkPbJdN4R/SZrRpgdnw==",
       "dependencies": {
         "react-native-webview": "^11.17.2"
       },
@@ -18770,9 +18770,9 @@
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
     },
     "bigbluebutton-mobile-sdk": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/bigbluebutton-mobile-sdk/-/bigbluebutton-mobile-sdk-0.1.8.tgz",
-      "integrity": "sha512-fGzM4taZRgA2U/nTVVCU7g657zLKb2E74h6SQ0eCGJCz1Bi2BiiT+Dg8bYO244IpCUEs4nL+ma3ZGWLYrFZ7vQ==",
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/bigbluebutton-mobile-sdk/-/bigbluebutton-mobile-sdk-0.1.10.tgz",
+      "integrity": "sha512-nqIfPco7IsMQgRqc4QXybdesjHXJsnOmd6G6L+wt5yHiKw0aDzhmBRlfzk9Q8FGTRlTTkPbJdN4R/SZrRpgdnw==",
       "requires": {
         "react-native-webview": "^11.17.2"
       }

react-native/app/pages/store_portals/component.tsx

@@ -5,14 +5,16 @@ import {
   WrapperInput,
   WrapperStore,
   WrapperStoreContainer,
+  WrapperWebView,
 } from './styles';
-import {Text} from 'react-native';
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
 import {ButtonApp} from '../../components/button/component';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {usePortal} from '../../contexts/portals/hook';
 import {IStore} from './types';
 import {initTranslation} from '../../translations/index';
 import i18next from 'i18next';
+import { BigBlueButtonMobile } from 'bigbluebutton-mobile-sdk';
 
 export const StorePortals = ({navigation, modalizeRef}: IStore) => {
   initTranslation();
@@ -21,6 +23,8 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
   const [url, setUrl] = React.useState('');
   const [emptyFields, setEmptyFields] = React.useState(false);
   const [nameAlreadyUsed, setNameAlreadyUsed] = React.useState(false);
+  const [urlInvalid, setUrlInvalid] = React.useState(false);
+  const [loadComponent, setLoadComponent] = React.useState(false);
 
   async function newPortal(name: string, url: string) {
     let portalsStorage;
@@ -33,9 +37,8 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
     navigation.navigate(name);
   }
 
-  async function onPress() {
-    //return false;
-    if (!name || !url) return setEmptyFields(true);
+  const validateAndCreateNewPortal = async ()=>{
+    
     try {
       let portalsFilter = portals.filter(
         (portal: {name: string; url: string}) => {
@@ -56,6 +59,16 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
     }
   }
   
+
+  async function onPress() {
+    setNameAlreadyUsed(false)
+    setEmptyFields(false)
+    setUrlInvalid(false)
+    if (!name || !url) return setEmptyFields(true);
+    if(!url.includes('://')) setUrl('https://www.'+url)
+    setLoadComponent(true)
+  }
+
   const textEmptyFields = () => (
     <>
       {emptyFields ? (
@@ -63,6 +76,11 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
           {i18next.t('mobileApp.portals.addPortalPopup.validation.emptyFilds')}
         </TextEmptyFileds>
       ) : null}
+      {urlInvalid ? (
+        <TextEmptyFileds>
+          {i18next.t('mobileApp.portals.addPortalPopup.validation.urlInvalid')}
+        </TextEmptyFileds>
+      ) : null}
       {nameAlreadyUsed ? (
         <TextEmptyFileds>
           {i18next.t(
@@ -72,12 +90,44 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
       ) : null}
     </>
   );
+  const onErrorLoadUrl = ()=>{
+    setUrlInvalid(true);
+    setLoadComponent(false);
+  }
+
+  const loadComponentOnValidateUrl = ()=>{
+    if(!loadComponent) return (
+      <ButtonApp onPress={onPress}>
+        <Text>
+          {i18next.t(
+            'mobileApp.portals.addPortalPopup.confirm.button.label',
+          )}
+        </Text>
+      </ButtonApp>
+    );
+
+    return (
+      <View>
+        <ActivityIndicator/>
+        <WrapperWebView>
+          <BigBlueButtonMobile
+            url={url}
+            style={styles.bbb}
+            onError={(content: any) => onErrorLoadUrl()}
+            onSuccess={() => validateAndCreateNewPortal()}
+          />
+        </WrapperWebView>
+       </View>
+      
+    )
+  }
 
   return (
     <>
       <WrapperStoreContainer>
         <WrapperStore>
           {textEmptyFields()}
+          
           <WrapperInput>
             <InputText
               autoCapitalize={'none'}
@@ -103,16 +153,15 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
             />
           </WrapperInput>
           <WrapperInput>
-            <ButtonApp onPress={onPress}>
-              <Text>
-                {i18next.t(
-                  'mobileApp.portals.addPortalPopup.confirm.button.label',
-                )}
-              </Text>
-            </ButtonApp>
+            {loadComponentOnValidateUrl()}                        
           </WrapperInput>
         </WrapperStore>
       </WrapperStoreContainer>
     </>
   );
 }
+
+const styles = StyleSheet.create({bbb: {
+  marginTop: 48,
+  flex: 1,
+},})

react-native/app/pages/store_portals/styles.ts

@@ -29,3 +29,11 @@ export const WrapperInput = styled.View`
 export const TextEmptyFileds = styled.Text`
   color: ${colors.danger};
 `;
+
+export const WrapperWebView = styled.View`
+  width: 10px;
+`;
+
+export const TextTest = styled.Text`
+  color: ${colors.white}
+`

react-native/app/translations/resources/en-US.ts

@@ -8,5 +8,6 @@ export default {
         "mobileApp.portals.addPortalPopup.confirm.button.label": "Add Portal",
         "mobileApp.portals.drawerNavigation.button.label": "Portals",
         "mobileApp.portals.addPortalPopup.validation.emptyFilds": "Empty Fields",
-        "mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists": "Name Already Exists"
+        "mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists": "Name Already Exists",
+        "mobileApp.portals.addPortalPopup.validation.urlInvalid": "Error trying to load the page - check if address is correct and your network is connected"
 }

react-native/app/translations/resources/pt-BR.ts

@@ -8,5 +8,6 @@ export default {
         "mobileApp.portals.addPortalPopup.confirm.button.label": "Adicionar Portal",
         "mobileApp.portals.drawerNavigation.button.label": "Portais",
         "mobileApp.portals.addPortalPopup.validation.emptyFilds": "Campos Vazios",
-        "mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists": "Nome Já Existe"
+        "mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists": "Nome Já Existe",
+        "mobileApp.portals.addPortalPopup.validation.urlInvalid": "Erro ao testar carregar a página, cheque se o endereço esta correto ou se sua internet esta conectada"
 }

react-native/bootstrap/sdk/container.tsx

@@ -1,4 +1,4 @@
-import {BigbluebuttonMobile} from 'bigbluebutton-mobile-sdk';
+import {BigBlueButtonMobile} from 'bigbluebutton-mobile-sdk';
 import React from 'react';
 import {StyleSheet, View, Platform} from 'react-native';
 import { SdkContainerDiv } from './styles';
@@ -10,7 +10,7 @@ export default function SdkContainer({url}: ISdkContainer) {
   return (
     <>
       <SdkContainerDiv>
-        <BigbluebuttonMobile url={url} style={styles.bbb} />
+        <BigBlueButtonMobile url={url} style={styles.bbb} onError={()=>console.log('error')} onSuccess={()=>console.log('success')}/>
       </SdkContainerDiv>
     </>
   );