validating url when add a new portal

2022-03-31 23:37:31 -03:00 · 2022-03-31 23:37:31 -03:00 · 1089436bb5
commit 1089436bb5
parent 1dd6fef946
8 changed files with 1146 additions and 1124 deletions
--- a/package-lock.json
+++ b/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"
      }
--- a/package.json
+++ b/package.json
@ -16,7 +16,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",
--- a/react-native/app/pages/store_portals/component.tsx
+++ b/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,
+},})
--- a/react-native/app/pages/store_portals/styles.ts
+++ b/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}
+`
--- a/react-native/app/translations/resources/en-US.ts
+++ b/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"
 }
--- a/react-native/app/translations/resources/pt-BR.ts
+++ b/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"
 }
--- a/react-native/bootstrap/sdk/container.tsx
+++ b/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>
    </>
  );
--- a/yarn.lock
+++ b/yarn.lock