@ -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 } ) = > {
@ -55,6 +58,16 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
return null ;
}
}
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 = ( ) = > (
< >
@ -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 ,
} , } )