Merge pull request #35 from gustavo-em/refactor_create_portal

Refactoring in the code of create new portal and bug fix when create demo server

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

@@ -23,7 +23,7 @@ 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';
+import {createNewPortal} from '../utils/createNewPortal';
 
 export const ListPortals = ({navigation}: IListPortalsDTO) => {
   initTranslation();
@@ -85,17 +85,13 @@ export const ListPortals = ({navigation}: IListPortalsDTO) => {
     const nameDemoServer = 'Demo Server';
     const urlDemoServer = 'https://demo-ios.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 listPortals = await createNewPortal({
+      name: nameDemoServer,
+      url: urlDemoServer,
+    });
+
+    setPortals(listPortals);
+    navigation.navigate(nameDemoServer);
   };
 
   const Item = ({namePortal, url}: IItem) => (

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import {InputText} from '../../components/input/text/component';
 import {
@@ -14,8 +15,8 @@ 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';
-import { new_portal_name_and_url } from '../utils/new_portal_name_and_url';
+import {BigBlueButtonMobile} from 'bigbluebutton-mobile-sdk';
+import {createNewPortal} from '../utils/createNewPortal';
 
 export const StorePortals = ({navigation, modalizeRef}: IStore) => {
   initTranslation();
@@ -27,19 +28,20 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
   const [urlInvalid, setUrlInvalid] = React.useState(false);
   const [loadComponent, setLoadComponent] = React.useState(false);
 
-  async function afterValidationsToCreatePortalAddANew(name: string, url: string) {
-    const objPortalsOrError = await new_portal_name_and_url(name, url )
-    if(objPortalsOrError){
-      setPortals(objPortalsOrError);
-      modalizeRef?.current?.close();
-      navigation.navigate(name);
-    } else {
-      return Error("Error to create a new portal")
-    }
+  async function afterValidationsToCreatePortalAddANew(
+    name: string,
+    url: string,
+  ) {
+    const listPortals = await createNewPortal({
+      name,
+      url,
+    });
+    setPortals(listPortals);
+    modalizeRef?.current?.close();
+    navigation.navigate(name);
   }
 
-  const validateAndCreateNewPortal = async ()=>{
-    
+  const validateAndCreateNewPortal = async () => {
     try {
       let portalsFilter = portals.filter(
         (portal: {name: string; url: string}) => {
@@ -58,16 +60,17 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
       afterValidationsToCreatePortalAddANew(name, url);
       return null;
     }
-  }
-  
+  };
 
   async function onPress() {
-    setNameAlreadyUsed(false)
-    setEmptyFields(false)
-    setUrlInvalid(false)
+    setNameAlreadyUsed(false);
+    setEmptyFields(false);
+    setUrlInvalid(false);
     if (!name || !url) return setEmptyFields(true);
-    if(!url.includes('://')) setUrl('https://'+url)
-    setLoadComponent(true)
+    if (!url.includes('://')) {
+      setUrl('https://' + url);
+    }
+    setLoadComponent(true);
   }
 
   const textEmptyFields = () => (
@@ -91,25 +94,24 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
       ) : null}
     </>
   );
-  const onErrorLoadUrl = ()=>{
+  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>
-    );
+  const loadComponentOnValidateUrl = () => {
+    if (!loadComponent)
+      return (
+        <ButtonApp onPress={onPress}>
+          <Text>
+            {i18next.t('mobileApp.portals.addPortalPopup.confirm.button.label')}
+          </Text>
+        </ButtonApp>
+      );
 
     return (
       <View>
-        <ActivityIndicator/>
+        <ActivityIndicator />
         <WrapperWebView>
           <BigBlueButtonMobile
             url={url}
@@ -118,17 +120,16 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
             onSuccess={() => validateAndCreateNewPortal()}
           />
         </WrapperWebView>
-       </View>
-      
-    )
-  }
+      </View>
+    );
+  };
 
   return (
     <>
       <WrapperStoreContainer>
         <WrapperStore>
           {textEmptyFields()}
-          
+
           <WrapperInput>
             <InputText
               autoCapitalize={'none'}
@@ -147,20 +148,20 @@ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
               autoCorrect={false}
               value={url}
               onChangeText={(e: any) => setUrl(e)}
-              placeholder={"https://demo.bigbluebutton.org"}
+              placeholder={'https://demo.bigbluebutton.org'}
               label={i18next.t('mobileApp.portals.fields.url.label')}
             />
           </WrapperInput>
-          <WrapperInput>
-            {loadComponentOnValidateUrl()}                        
-          </WrapperInput>
+          <WrapperInput>{loadComponentOnValidateUrl()}</WrapperInput>
         </WrapperStore>
       </WrapperStoreContainer>
     </>
   );
-}
+};
 
-const styles = StyleSheet.create({bbb: {
-  marginTop: 48,
-  flex: 1,
-},})
+const styles = StyleSheet.create({
+  bbb: {
+    marginTop: 48,
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,46 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {ICreatePortal, IPortal, IPortalProp, IPortalToAdd} from './types';
+
+export async function createNewPortal({
+  name,
+  url,
+}: ICreatePortal): Promise<IPortal[]> {
+  let portalsStorage: IPortalProp = await getPortals();
+
+  if (portalsStorage === null || portalsStorage === '[]')
+    return await createFromEmptyStorage(name, url);
+
+  portalsStorage = parseString(portalsStorage);
+
+  return await addPortalToStorage({portals: portalsStorage, name, url});
+}
+
+async function createFromEmptyStorage(name: string, url: string) {
+  await createStorageEmpty();
+  let portalsStorage = await getPortals();
+  const portalStorage = parseString(portalsStorage!);
+  await addPortalToStorage({portals: portalStorage, name, url});
+  return portalStorage;
+}
+
+async function getPortals(): Promise<string | null> {
+  return await AsyncStorage.getItem('portal');
+}
+
+async function createStorageEmpty() {
+  await AsyncStorage.setItem('portal', JSON.stringify([]));
+}
+
+function parseString(portalsStorage: string): Array<IPortal> {
+  return (portalsStorage = JSON.parse(portalsStorage));
+}
+
+async function addPortalToStorage({
+  portals,
+  name,
+  url,
+}: IPortalToAdd): Promise<IPortal[]> {
+  portals.push({name, url});
+  await AsyncStorage.setItem('portal', JSON.stringify(portals));
+  return portals;
+}

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

@@ -1,15 +0,0 @@
-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")
-    }
-}

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

@@ -0,0 +1,17 @@
+export type ICreatePortal = {
+  name: string;
+  url: string;
+};
+
+export type IPortal = {
+  name: string;
+  url: string;
+};
+
+export type IPortalToAdd = {
+  portals: Array<IPortal>;
+  name: string;
+  url: string;
+};
+
+export type IPortalProp = string | null | IPortal[];