Merge pull request #13 from gustavo-em/es_list

LInt
2022-03-21 08:33:03 -03:00 · 2022-03-21 08:33:03 -03:00 · 3633d92c5d
commit 3633d92c5d
parent d86f9b7a68 713a4a3a4d
10 changed files with 376 additions and 324 deletions
--- a/react-native/app/components/button/component.tsx
+++ b/react-native/app/components/button/component.tsx
@ -1,19 +1,16 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { TouchableOpacity } from 'react-native-gesture-handler'
-import { ButtonAppStyle, TextButton } from './styles';
+import React from 'react';
+import {ButtonAppStyle, TextButton} from './styles';

 type IButtonApp = {
-    children?: object
-    onPress?: Function
-}
-export const ButtonApp = ({children, onPress}:IButtonApp)=>{
+  children?: object;
+  onPress?: Function;
+};
+export const ButtonApp = ({children, onPress}: IButtonApp) => {
  return (
    <>
      <ButtonAppStyle onPress={onPress}>
        <TextButton>{children}</TextButton>
      </ButtonAppStyle>
-            
    </>
-    )
-}
+  );
+};
--- a/react-native/app/components/button/styles.ts
+++ b/react-native/app/components/button/styles.ts
@ -1,6 +1,5 @@
 import styled from 'styled-components/native';
-import { colors } from '../../styles/colors';
-
+import {colors} from '../../styles/colors';

 export const ButtonAppStyle = styled.TouchableHighlight`
  height: 50px;
@ -9,11 +8,10 @@ export const ButtonAppStyle = styled.TouchableHighlight`
  border-radius: 5px;
  align-items: center;
  justify-content: center;
-`
+`;

 export const TextButton = styled.Text`
  font-size: 22px;
  font-weight: bold;
  color: #fff;
-
-`
+`;
--- a/react-native/app/pages/list_portals/component.tsx
+++ b/react-native/app/pages/list_portals/component.tsx
@ -1,100 +1,130 @@
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import React, { useRef } from 'react'
-import { ButtonDelete, ButtonOpen, DivButtonDelete, DivDelete, ItemList, TextButtonOpen, TextItem, TextWithoutPortal, WrapperItemListText, WrapperItemListView, WrapperList, WrapperListContainer, WrapperViewAdd } from './styles'
-import { usePortal } from '../../contexts/portals/hook';
-import { Modalize } from 'react-native-modalize';
-import { StorePortals } from '../store_portals/component';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React from 'react';
+import {
+  ButtonDelete,
+  ButtonOpen,
+  DivButtonDelete,
+  DivDelete,
+  ItemList,
+  TextButtonOpen,
+  TextWithoutPortal,
+  WrapperItemListText,
+  WrapperListContainer,
+  WrapperViewAdd,
+} from './styles';
+import {usePortal} from '../../contexts/portals/hook';
+import {Modalize} from 'react-native-modalize';
+import {StorePortals} from '../store_portals/component';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-import { colors } from '../../styles/colors';
-import { SwipeListView } from 'react-native-swipe-list-view';
-import { IHandles } from 'react-native-modalize/lib/options';
-import { IItem, IItemDelete, IListPortalsDTO } from './types'
-import i18next from 'i18next'
-import { initTranslation } from '../../translations/index';
-
-export const ListPortals = ({ navigation }: IListPortalsDTO)=>{
-
-    initTranslation()
-    const icon = <FontAwesome5 color={colors.white} solid size={18} name={'plus'} />;
-    const {portals, setPortals} = usePortal()
-    async function getPortals(){
-        try{            
-            let items = await AsyncStorage.getAllKeys()
-            if(items.includes('portal')){
-                
-                let portalsStorage = await AsyncStorage.getItem('portal')
-                portalsStorage = JSON.parse(portalsStorage as string)
-                setPortals(portalsStorage)
+import {colors} from '../../styles/colors';
+import {SwipeListView} from 'react-native-swipe-list-view';
+import {IHandles} from 'react-native-modalize/lib/options';
+import {IItem, IItemDelete, IListPortalsDTO} from './types';
+import i18next from 'i18next';
+import {initTranslation} from '../../translations/index';

+export const ListPortals = ({navigation}: IListPortalsDTO) => {
+  initTranslation();
+  const icon = (
+    <FontAwesome5 color={colors.white} solid size={18} name={'plus'} />
+  );
+  const {portals, setPortals} = usePortal();
+  async function getPortals() {
+    try {
+      let items = await AsyncStorage.getAllKeys();
+      if (items.includes('portal')) {
+        let portalsStorage = await AsyncStorage.getItem('portal');
+        portalsStorage = JSON.parse(portalsStorage as string);
+        setPortals(portalsStorage);
      } else {
-                console.log('Error: Dont Have Portals Storage')
+        console.log('Error: Dont Have Portals Storage');
      }
-        } catch(e){
-            console.log('error',e)
+    } catch (e) {
+      console.log('error', e);
    }
  }

-    React.useEffect(()=>{getPortals()}, [])            
+  React.useEffect(() => {
+    getPortals();
+  }, []);

-    const modalizeRef = useRef<Modalize>(null);
+  const modalizeRef = React.useRef<Modalize>(null);

  const onOpen = () => modalizeRef.current?.open();

-    const DeleteItem = async (item:IItemDelete)=>{  
-        try{            
-            let items = await AsyncStorage.getAllKeys()
-            if(items.includes('portal')){
+  const DeleteItem = async (item: IItemDelete) => {
+    try {
+      let items = await AsyncStorage.getAllKeys();
+      if (items.includes('portal')) {
+        let portalsStorage = await AsyncStorage.getItem('portal');
+        portalsStorage = JSON.parse(portalsStorage as string);
+        const newPortalStorage = portalsStorage?.filter(
+          (portalItem: IItemDelete) => {
+            if (item.name == portalItem.name) {
+              return false;
+            }
+            return portalItem;
+          },
+        );

-                let portalsStorage = await AsyncStorage.getItem('portal')
-                portalsStorage = JSON.parse(portalsStorage as string)
-                const newPortalStorage = portalsStorage?.filter((portalItem: IItemDelete)=>{
-                    if(item.name == portalItem.name) return false                  
-                    return portalItem
-                })
-
-                await AsyncStorage.setItem('portal', JSON.stringify(newPortalStorage))
-                setPortals(newPortalStorage)                                           
+        await AsyncStorage.setItem('portal', JSON.stringify(newPortalStorage));
+        setPortals(newPortalStorage);
      } else {
-                console.log('Error: Dont have Portals in Storage')
-            }
-        } catch(e){
-            console.log('error',e)
+        console.log('Error: Dont have Portals in Storage');
      }
+    } catch (e) {
+      console.log('error', e);
    }
+  };

-    const onPress = (namePortal:string) => navigation.navigate(namePortal);
+  const onPress = (namePortal: string) => navigation.navigate(namePortal);

-    const Item = ({namePortal, url}: IItem)=>(                
-        <WrapperItemListText onPress={()=>onPress(namePortal)}>              
+  const Item = ({namePortal, url}: IItem) => (
+    <WrapperItemListText onPress={() => onPress(namePortal)}>
      <ItemList bold>{namePortal}</ItemList>
      <ItemList>{url}</ItemList>
    </WrapperItemListText>
-    )
+  );

  return (
    <WrapperListContainer>
-
      <ButtonOpen onPress={onOpen}>
-                <TextButtonOpen>{i18next.t("mobileApp.portals.list.add.button.label")} {icon}</TextButtonOpen>
+        <TextButtonOpen>
+          {i18next.t('mobileApp.portals.list.add.button.label')} {icon}
+        </TextButtonOpen>
      </ButtonOpen>

      <Modalize ref={modalizeRef} adjustToContentHeight={true}>
        <WrapperViewAdd>
-                    <StorePortals modalizeRef={modalizeRef as unknown as IHandles} navigation={navigation}/>
+          <StorePortals
+            modalizeRef={modalizeRef as unknown as IHandles}
+            navigation={navigation}
+          />
        </WrapperViewAdd>
      </Modalize>

-            {
-                portals && portals.length != 0 ?
+      {portals && portals.length != 0 ? (
        <SwipeListView
          useFlatList={true}
          data={portals}
-                    renderItem={(rowData, rowMap) => <Item onPress={onPress} key={rowData.index} namePortal={rowData.item.name} url={rowData.item.url}/>}
-                    renderHiddenItem={ (rowData, rowMap) => (
+          renderItem={rowData => (
+            <Item
+              onPress={onPress}
+              key={rowData.index}
+              namePortal={rowData.item.name}
+              url={rowData.item.url}
+            />
+          )}
+          renderHiddenItem={rowData => (
            <DivDelete>
              <DivButtonDelete>
-                                <ButtonDelete onPress={()=>DeleteItem(rowData.item as IItemDelete)}>
-                                    <FontAwesome5 size={20} color={colors.primary} name={'trash'}/>
+                <ButtonDelete
+                  onPress={() => DeleteItem(rowData.item as IItemDelete)}>
+                  <FontAwesome5
+                    size={20}
+                    color={colors.primary}
+                    name={'trash'}
+                  />
                </ButtonDelete>
              </DivButtonDelete>
            </DivDelete>
@ -107,14 +137,17 @@ export const ListPortals = ({ navigation }: IListPortalsDTO)=>{
          onRowOpen={(rowKey, rowMap) => {
            //This timeout is recommended https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/migrating-to-flatlist.md
            setTimeout(() => {
-                            if(rowMap[rowKey] != undefined){
-                                rowMap[rowKey].closeRow()
+              if (rowMap[rowKey] != undefined) {
+                rowMap[rowKey].closeRow();
              }
-                        }, 3000)                                                    
+            }, 3000);
          }}
        />
-                : <TextWithoutPortal>{i18next.t("mobileApp.portals.list.empty.label")}</TextWithoutPortal>
-            }
+      ) : (
+        <TextWithoutPortal>
+          {i18next.t('mobileApp.portals.list.empty.label')}
+        </TextWithoutPortal>
+      )}
    </WrapperListContainer>
-    )
-}
+  );
+};
--- a/react-native/app/pages/list_portals/types.ts
+++ b/react-native/app/pages/list_portals/types.ts
@ -1,14 +1,15 @@
-import { DrawerScreenProps } from '@react-navigation/drawer';
+import {DrawerScreenProps} from '@react-navigation/drawer';
 export type IItem = {
  url: string;
  namePortal: string;
-}
+  onPress?: any;
+};

 export type IListPortalsDTO = {
-    navigation: DrawerScreenProps
-}
+  navigation: DrawerScreenProps;
+};

 export type IItemDelete = {
  name: string;
-    url: string
-}
+  url: string;
+};
--- a/react-native/app/pages/store_portals/component.tsx
+++ b/react-native/app/pages/store_portals/component.tsx
@ -1,69 +1,77 @@
-import React from 'react'
-import { InputText } from '../../components/input/text/component';
-import { TextEmptyFileds, WrapperInput, WrapperStore, WrapperStoreContainer } from './styles';
-import { Text } from 'react-native';
-import { ButtonApp } from '../../components/button/component';
+import React from 'react';
+import {InputText} from '../../components/input/text/component';
+import {
+  TextEmptyFileds,
+  WrapperInput,
+  WrapperStore,
+  WrapperStoreContainer,
+} from './styles';
+import {Text} 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 {usePortal} from '../../contexts/portals/hook';
+import {IStore} from './types';
+import {initTranslation} from '../../translations/index';
 import i18next from 'i18next';

-export const StorePortals = ({navigation, modalizeRef}:IStore)=>{
-    initTranslation()
-    const {portals, setPortals} = usePortal()
+export const StorePortals = ({navigation, modalizeRef}: IStore) => {
+  initTranslation();;
+  const {portals, setPortals} = usePortal();;
  const [name, setName] = React.useState('');
  const [url, setUrl] = React.useState('');
  const [emptyFields, setEmptyFields] = React.useState(false);
  const [nameAlreadyUsed, setNameAlreadyUsed] = React.useState(false);

-    async function newPortal(name:string, url:string){
+  async function newPortal(name: string, url: string) {
    let portalsStorage;
-        portalsStorage = await AsyncStorage.getItem('portal')            
-        portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null            
-        portalsStorage.push({name, url})
-        AsyncStorage.setItem('portal', JSON.stringify(portalsStorage))
-        setPortals(portalsStorage)
+    portalsStorage = await AsyncStorage.getItem('portal');
+    portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null;
+    portalsStorage.push({name, url});;
+    AsyncStorage.setItem('portal', JSON.stringify(portalsStorage));;
+    setPortals(portalsStorage);;
    modalizeRef?.current?.close();
-        navigation.navigate(name)
+    navigation.navigate(name);;
  }

-    async function onPress(){
+  async function onPress() {
    //return false;
-        if(!name || !url) return setEmptyFields(true)
-        try{
-            let portalsFilter = portals.filter((portal: {name: string, url: string})=>{
-                if(portal.name != name ) return false
-                return portal                  
-            })
-            if(portalsFilter.length >= 1){
-                setNameAlreadyUsed(true)
+    if (!name || !url) return setEmptyFields(true);;
+    try {
+      let portalsFilter = portals.filter(
+        (portal: {name: string; url: string}) => {
+          if (portal.name != name) return false;;
+          return portal;
+        },
+      );
+      if (portalsFilter.length >= 1) {
+        setNameAlreadyUsed(true);
        return false;
      }
-            await newPortal(name, url )
-
-        } catch(e){
-            console.log('error', e)
-            await AsyncStorage.setItem('portal', JSON.stringify([]))
-            newPortal(name, url )
-            return null
+      await newPortal(name, url);
+    } catch (e) {
+      console.log('error', e);
+      await AsyncStorage.setItem('portal', JSON.stringify([]));
+      newPortal(name, url);
+      return null;
    }
  }

-    const textEmptyFields = ()=>(
+  const textEmptyFields = () => (
    <>
-            {   
-                emptyFields ?
-                <TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.emptyFilds")}</TextEmptyFileds>
-                : null
-            }
-            {   
-                nameAlreadyUsed ?
-                <TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists")}</TextEmptyFileds>
-                : null
-            }
+      {emptyFields ? (
+        <TextEmptyFileds>
+          {i18next.t('mobileApp.portals.addPortalPopup.validation.emptyFilds')}
+        </TextEmptyFileds>
+      ) : null}
+      {nameAlreadyUsed ? (
+        <TextEmptyFileds>
+          {i18next.t(
+            'mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists',
+          )}
+        </TextEmptyFileds>
+      ) : null}
    </>
-    )
+  );;

  return (
    <>
@ -71,16 +79,37 @@ export const StorePortals = ({navigation, modalizeRef}:IStore)=>{
        <WrapperStore>
          {textEmptyFields()}
          <WrapperInput>
-                        <InputText value={name} onChangeText={(e:any)=>setName(e)} placeholder={i18next.t("mobileApp.portals.fields.name.placeholder")} label={i18next.t("mobileApp.portals.fields.name.label")}/>                       
+            <InputText
+              value={name}
+              onChangeText={(e: any) => setName(e)}
+              placeholder={i18next.t(
+                'mobileApp.portals.fields.name.placeholder',
+              )}
+              label={i18next.t('mobileApp.portals.fields.name.label')}
+            />
          </WrapperInput>
          <WrapperInput>
-                        <InputText autoCapitalize='none' value={url} onChangeText={(e:any)=>setUrl(e)} placeholder={i18next.t("mobileApp.portals.fields.url.placeholder")} label={i18next.t("mobileApp.portals.fields.url.label")}/>                       
+            <InputText
+              autoCapitalize="none"
+              value={url}
+              onChangeText={(e: any) => setUrl(e)}
+              placeholder={i18next.t(
+                'mobileApp.portals.fields.url.placeholder',
+              )}
+              label={i18next.t('mobileApp.portals.fields.url.label')}
+            />
          </WrapperInput>
          <WrapperInput>
-                        <ButtonApp onPress={onPress}><Text>{i18next.t("mobileApp.portals.addPortalPopup.confirm.button.label")}</Text></ButtonApp>
+            <ButtonApp onPress={onPress}>
+              <Text>
+                {i18next.t(
+                  'mobileApp.portals.addPortalPopup.confirm.button.label',
+                )}
+              </Text>
+            </ButtonApp>
          </WrapperInput>
        </WrapperStore>
      </WrapperStoreContainer>
    </>
-    )
+  );;
 }
--- a/react-native/app/pages/store_portals/styles.ts
+++ b/react-native/app/pages/store_portals/styles.ts
@ -1,15 +1,13 @@
-import styled from 'styled-components/native'
-import { colors } from '../../styles/colors';
+import styled from 'styled-components/native';
+import {colors} from '../../styles/colors';

 export const WrapperStoreContainer = styled.View`
  background-color: ${colors.white};
-    flex: 1 ;
+  flex: 1;
  justify-content: center;
  align-items: center;
 `;

-
-
 export const WrapperStore = styled.View`
  background-color: ${colors.primary};
  width: 80%;
@ -20,16 +18,14 @@ export const WrapperStore = styled.View`
  flex-direction: column;
  padding: 5px;
  padding-top: 20px;
-`
-
+`;

 export const WrapperInput = styled.View`
  background-color: transparent;
  width: 80%;
  height: 100px;
  margin: 20px;
-
-`
+`;
 export const TextEmptyFileds = styled.Text`
-    color: ${colors.danger}
-`
+  color: ${colors.danger};
+`;
--- a/react-native/app/routes/component.js
+++ b/react-native/app/routes/component.js
@ -1,58 +1,60 @@
 import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { ListPortals } from '../pages/list_portals/component';
-import { usePortal } from '../contexts/portals/hook';
+import {NavigationContainer} from '@react-navigation/native';
+import {ListPortals} from '../pages/list_portals/component';
+import {usePortal} from '../contexts/portals/hook';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import i18next from 'i18next';

-import {
-  createDrawerNavigator,
-} from '@react-navigation/drawer';
+import {createDrawerNavigator} from '@react-navigation/drawer';
 import SdkContainer from '../../bootstrap/sdk/container';
-import { initTranslation } from '../translations/index';
+import {initTranslation} from '../translations/index';

 const Drawer = createDrawerNavigator();
-export const Routes = ()=>{
-  initTranslation()
+export const Routes = () => {
+  initTranslation();

-  const {portals, setPortals} = usePortal()
-  async function getPortals(){
-      try{          
-          let items = await AsyncStorage.getAllKeys()
-          if(items.includes('portal')){              
-              let portalsStorage = await AsyncStorage.getItem('portal')
-              portalsStorage = JSON.parse(portalsStorage)
-              setPortals(portalsStorage)
+  const {portals, setPortals} = usePortal();
+  async function getPortals() {
+    try {
+      let items = await AsyncStorage.getAllKeys();
+      if (items.includes('portal')) {
+        let portalsStorage = await AsyncStorage.getItem('portal');
+        portalsStorage = JSON.parse(portalsStorage);
+        setPortals(portalsStorage);
      }
-      } catch(e){
-          console.log('error', e)
-          return null
+    } catch (e) {
+      console.log('error', e);
+      return null;
    }
  }

-  React.useEffect(()=>{   
-    getPortals()
-  }, [])
+  React.useEffect(() => {
+    getPortals();
+  }, []);

  return (
-      
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Portals"
        screenOptions={{
-              headerShown: false
-          }}
-        >
-          
-          <Drawer.Screen name={i18next.t("mobileApp.portals.drawerNavigation.button.label")} component={ListPortals} />         
-          { 
-            portals || portals != 0 ?
-            portals.map((item)=>{
-              return <Drawer.Screen key={item.name} name={item.name} children={()=> (<SdkContainer url={item.url}/>)}/>
-            }) : null
-          }
-
+          headerShown: false,
+        }}>
+        <Drawer.Screen
+          name={i18next.t('mobileApp.portals.drawerNavigation.button.label')}
+          component={ListPortals}
+        />
+        {portals || portals != 0
+          ? portals.map(item => {
+              return (
+                <Drawer.Screen
+                  key={item.name}
+                  name={item.name}
+                  children={() => <SdkContainer url={item.url} />}
+                />
+              );
+            })
+          : null}
      </Drawer.Navigator>
    </NavigationContainer>
  );
-}
+};
--- a/react-native/app/routes/styles.ts
+++ b/react-native/app/routes/styles.ts
@ -1,3 +0,0 @@
-import styled from "styled-components/native"
-import { colors } from '../styles/colors';
-
--- a/react-native/app/styles/colors.ts
+++ b/react-native/app/styles/colors.ts
@ -1,9 +1,9 @@
 interface IColors {
-    primary: string
-    secundary: string
-    primary_light: string
-    white: string
-    danger: string
+  primary: string;
+  secundary: string;
+  primary_light: string;
+  white: string;
+  danger: string;
 }

 export const colors: IColors = {
@ -11,5 +11,5 @@ export const colors: IColors = {
  secundary: '#F3F6F9',
  primary_light: '#176DC8',
  white: '#FFF',
-    danger: '#DF2621'
-}
+  danger: '#DF2621',
+};
--- a/react-native/bootstrap/start/component.js
+++ b/react-native/bootstrap/start/component.js
@ -1,13 +1,12 @@
-import React from 'react'
-import { Routes } from '../../app/routes/component';
-import { PortalContextContainer } from '../../app/contexts/portals/container';
-
+import React from 'react';
+import {Routes} from '../../app/routes/component';
+import {PortalContextContainer} from '../../app/contexts/portals/container';

 //This file is used to envolve app in contexts, libs, etc..
-export const Bootstrap = ()=>{
+export const Bootstrap = () => {
  return (
    <PortalContextContainer>
-            <Routes/>
+      <Routes />
    </PortalContextContainer>
-    )
-}
+  );
+};