demo server url implementing

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

@@ -22,6 +22,8 @@ import {IHandles} from 'react-native-modalize/lib/options';
 import {IItem, IItemDelete, IListPortalsDTO} from './types';
 import i18next from 'i18next';
 import {initTranslation} from '../../translations/index';
+import { TouchableOpacity } from 'react-native';
+import { new_portal_name_and_url } from '../utils/new_portal_name_and_url';
 
 export const ListPortals = ({navigation}: IListPortalsDTO) => {
   initTranslation();
@@ -78,6 +80,20 @@ export const ListPortals = ({navigation}: IListPortalsDTO) => {
   };
 
   const onPress = (namePortal: string) => navigation.navigate(namePortal);
+  
+  const onPressTextCreateDemoServer = async ()=>{
+    const nameDemoServer = "Demo Server";
+    const urlDemoServer = "https://bigbluebutton.org"
+
+    const createDemoServerOrError = await new_portal_name_and_url(nameDemoServer, urlDemoServer)
+    console.log(createDemoServerOrError)
+    if(createDemoServerOrError){
+      setPortals(createDemoServerOrError);
+      navigation.navigate(nameDemoServer);
+    } else {
+      console.log("error when go create demo server")
+    }
+  }
 
   const Item = ({namePortal, url}: IItem) => (
     <WrapperItemListText onPress={() => onPress(namePortal)}>
@@ -144,9 +160,16 @@ export const ListPortals = ({navigation}: IListPortalsDTO) => {
           }}
         />
       ) : (
-        <TextWithoutPortal>
+        <>
-          {i18next.t('mobileApp.portals.list.empty.label')}
+          <TextWithoutPortal>
-        </TextWithoutPortal>
+            {i18next.t('mobileApp.portals.list.empty.addFirstPortal.label')}        
+          </TextWithoutPortal>
+          <TouchableOpacity onPress={()=>onPressTextCreateDemoServer()}>
+            <TextWithoutPortal color={true}>
+              {i18next.t('mobileApp.portals.list.empty.orUseOurDemoServer.label')}
+            </TextWithoutPortal>
+          </TouchableOpacity>
+        </>
       )}
     </WrapperListContainer>
   );

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

@@ -85,9 +85,9 @@ export const TextButtonOpen = styled.Text`
 
 
 export const TextWithoutPortal = styled.Text`
-    color: ${colors.primary};
+    color: ${(props)=> (props.color ? colors.primary_light:  colors.primary)};
     font-size: 20px;
-
+    text-align: center;
 `
 
 export const ButtonDelete = styled.TouchableOpacity`

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

@@ -15,6 +15,7 @@ import {IStore} from './types';
 import {initTranslation} from '../../translations/index';
 import i18next from 'i18next';
 import { BigBlueButtonMobile } from 'bigbluebutton-mobile-sdk';
+import { new_portal_name_and_url } from '../utils/new_portal_name_and_url';
 
 export const StorePortals = ({navigation, modalizeRef}: IStore) => {
   initTranslation();
@@ -26,15 +27,15 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
   const [urlInvalid, setUrlInvalid] = React.useState(false);
   const [loadComponent, setLoadComponent] = React.useState(false);
 
-  async function newPortal(name: string, url: string) {
+  async function afterValidationsToCreatePortalAddANew(name: string, url: string) {
-    let portalsStorage;
+    const objPortalsOrError = await new_portal_name_and_url(name, url )
-    portalsStorage = await AsyncStorage.getItem('portal');
+    if(objPortalsOrError){
-    portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null;
+      setPortals(objPortalsOrError);
-    portalsStorage.push({name, url});
+      modalizeRef?.current?.close();
-    AsyncStorage.setItem('portal', JSON.stringify(portalsStorage));
+      navigation.navigate(name);
-    setPortals(portalsStorage);
+    } else {
-    modalizeRef?.current?.close();
+      return Error("Error to create a new portal")
-    navigation.navigate(name);
+    }
   }
 
   const validateAndCreateNewPortal = async ()=>{
@@ -50,11 +51,11 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
         setNameAlreadyUsed(true);
         return false;
       }
-      await newPortal(name, url);
+      await afterValidationsToCreatePortalAddANew(name, url);
     } catch (e) {
       console.log('error', e);
       await AsyncStorage.setItem('portal', JSON.stringify([]));
-      newPortal(name, url);
+      afterValidationsToCreatePortalAddANew(name, url);
       return null;
     }
   }
@@ -146,9 +147,7 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
               autoCorrect={false}
               value={url}
               onChangeText={(e: any) => setUrl(e)}
-              placeholder={i18next.t(
+              placeholder={"https://demo.bigbluebutton.org"}
-                'mobileApp.portals.fields.url.placeholder',
-              )}
               label={i18next.t('mobileApp.portals.fields.url.label')}
             />
           </WrapperInput>

react-native/app/pages/utils/new_portal_name_and_url.ts

@@ -0,0 +1,15 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { usePortal } from "../../contexts/portals/hook";
+
+export async function new_portal_name_and_url(name: string, url: string): Promise<object | Error> {
+    try{
+        let portalsStorage;
+        portalsStorage = await AsyncStorage.getItem('portal');
+        portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null;
+        portalsStorage.push({name, url});
+        AsyncStorage.setItem('portal', JSON.stringify(portalsStorage));        
+        return portalsStorage
+    } catch(error){
+        return Error("Error when try create a new portal")
+    }
+}