diff --git a/react-native/app/components/button/component.tsx b/react-native/app/components/button/component.tsx index 16bfbd2..c1baf66 100644 --- 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)=>{ - return ( - <> - - {children} - - - - ) -} \ No newline at end of file + children?: object; + onPress?: Function; +}; +export const ButtonApp = ({children, onPress}: IButtonApp) => { + return ( + <> + + {children} + + + ); +}; diff --git a/react-native/app/components/button/styles.ts b/react-native/app/components/button/styles.ts index 1da892c..ccbd915 100644 --- a/react-native/app/components/button/styles.ts +++ b/react-native/app/components/button/styles.ts @@ -1,19 +1,17 @@ import styled from 'styled-components/native'; -import { colors } from '../../styles/colors'; - +import {colors} from '../../styles/colors'; export const ButtonAppStyle = styled.TouchableHighlight` - height: 50px; - font-size: 22px; - background-color: ${colors.primary_light}; - border-radius: 5px; - align-items: center; - justify-content: center; -` + height: 50px; + font-size: 22px; + background-color: ${colors.primary_light}; + border-radius: 5px; + align-items: center; + justify-content: center; +`; export const TextButton = styled.Text` - font-size: 22px; - font-weight: bold; - color: #fff; - -` \ No newline at end of file + font-size: 22px; + font-weight: bold; + color: #fff; +`; diff --git a/react-native/app/pages/list_portals/component.tsx b/react-native/app/pages/list_portals/component.tsx index c6fab7c..f6cf8d7 100644 --- a/react-native/app/pages/list_portals/component.tsx +++ b/react-native/app/pages/list_portals/component.tsx @@ -1,120 +1,153 @@ -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'; +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 = ; - 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') - } - } catch(e){ - console.log('error',e) - } +export const ListPortals = ({navigation}: IListPortalsDTO) => { + initTranslation(); + const icon = ( + + ); + 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'); + } + } catch (e) { + console.log('error', e); } + } - React.useEffect(()=>{getPortals()}, []) - - const modalizeRef = useRef(null); + React.useEffect(() => { + getPortals(); + }, []); - const onOpen = () => modalizeRef.current?.open(); + const modalizeRef = React.useRef(null); - 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 - }) + const onOpen = () => modalizeRef.current?.open(); - await AsyncStorage.setItem('portal', JSON.stringify(newPortalStorage)) - setPortals(newPortalStorage) - } else { - console.log('Error: Dont have Portals in Storage') + 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; } - } catch(e){ - console.log('error',e) - } + return portalItem; + }, + ); + + await AsyncStorage.setItem('portal', JSON.stringify(newPortalStorage)); + setPortals(newPortalStorage); + } else { + 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)=>( - onPress(namePortal)}> - {namePortal} - {url} - - ) + const Item = ({namePortal, url}: IItem) => ( + onPress(namePortal)}> + {namePortal} + {url} + + ); - return ( - + return ( + + + + {i18next.t('mobileApp.portals.list.add.button.label')} {icon} + + - - {i18next.t("mobileApp.portals.list.add.button.label")} {icon} - - - - - - - + + + + + - { - portals && portals.length != 0 ? - } - renderHiddenItem={ (rowData, rowMap) => ( - - - DeleteItem(rowData.item as IItemDelete)}> - - - - - )} - leftOpenValue={0} - rightOpenValue={-80} - disableRightSwipe={true} - closeOnRowPress={true} - closeOnRowOpen={true} - 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() - } - }, 3000) - }} - /> - : {i18next.t("mobileApp.portals.list.empty.label")} - } - - ) -} \ No newline at end of file + {portals && portals.length != 0 ? ( + ( + + )} + renderHiddenItem={rowData => ( + + + DeleteItem(rowData.item as IItemDelete)}> + + + + + )} + leftOpenValue={0} + rightOpenValue={-80} + disableRightSwipe={true} + closeOnRowPress={true} + closeOnRowOpen={true} + 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(); + } + }, 3000); + }} + /> + ) : ( + + {i18next.t('mobileApp.portals.list.empty.label')} + + )} + + ); +}; diff --git a/react-native/app/pages/list_portals/types.ts b/react-native/app/pages/list_portals/types.ts index 721fdf8..b3cf2a5 100644 --- 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; -} + url: string; + namePortal: string; + onPress?: any; +}; export type IListPortalsDTO = { - navigation: DrawerScreenProps -} + navigation: DrawerScreenProps; +}; -export type IItemDelete = { - name: string; - url: string -} \ No newline at end of file +export type IItemDelete = { + name: string; + url: string; +}; diff --git a/react-native/app/pages/store_portals/component.tsx b/react-native/app/pages/store_portals/component.tsx index a4611d6..fd33807 100644 --- a/react-native/app/pages/store_portals/component.tsx +++ b/react-native/app/pages/store_portals/component.tsx @@ -1,86 +1,115 @@ -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() - const [name, setName] = React.useState(''); - const [url, setUrl] = React.useState(''); - const [emptyFields, setEmptyFields] = React.useState(false); - const [nameAlreadyUsed, setNameAlreadyUsed] = React.useState(false); +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){ - 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) - modalizeRef?.current?.close(); - navigation.navigate(name) - } - - 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) - return false; - } - await newPortal(name, url ) + 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);; + modalizeRef?.current?.close(); + navigation.navigate(name);; + } - } catch(e){ - console.log('error', e) - await AsyncStorage.setItem('portal', JSON.stringify([])) - newPortal(name, url ) - return null - } + 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); + return false; + } + await newPortal(name, url); + } catch (e) { + console.log('error', e); + await AsyncStorage.setItem('portal', JSON.stringify([])); + newPortal(name, url); + return null; } + } + + const textEmptyFields = () => ( + <> + {emptyFields ? ( + + {i18next.t('mobileApp.portals.addPortalPopup.validation.emptyFilds')} + + ) : null} + {nameAlreadyUsed ? ( + + {i18next.t( + 'mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists', + )} + + ) : null} + + );; - const textEmptyFields = ()=>( - <> - { - emptyFields ? - {i18next.t("mobileApp.portals.addPortalPopup.validation.emptyFilds")} - : null - } - { - nameAlreadyUsed ? - {i18next.t("mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists")} - : null - } - - ) - - return ( - <> - - - {textEmptyFields()} - - setName(e)} placeholder={i18next.t("mobileApp.portals.fields.name.placeholder")} label={i18next.t("mobileApp.portals.fields.name.label")}/> - - - setUrl(e)} placeholder={i18next.t("mobileApp.portals.fields.url.placeholder")} label={i18next.t("mobileApp.portals.fields.url.label")}/> - - - {i18next.t("mobileApp.portals.addPortalPopup.confirm.button.label")} - - - - - ) -} \ No newline at end of file + return ( + <> + + + {textEmptyFields()} + + setName(e)} + placeholder={i18next.t( + 'mobileApp.portals.fields.name.placeholder', + )} + label={i18next.t('mobileApp.portals.fields.name.label')} + /> + + + setUrl(e)} + placeholder={i18next.t( + 'mobileApp.portals.fields.url.placeholder', + )} + label={i18next.t('mobileApp.portals.fields.url.label')} + /> + + + + + {i18next.t( + 'mobileApp.portals.addPortalPopup.confirm.button.label', + )} + + + + + + + );; +} diff --git a/react-native/app/pages/store_portals/styles.ts b/react-native/app/pages/store_portals/styles.ts index ed708d6..6cde5a6 100644 --- a/react-native/app/pages/store_portals/styles.ts +++ b/react-native/app/pages/store_portals/styles.ts @@ -1,35 +1,31 @@ -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 ; - justify-content: center; - align-items: center; + background-color: ${colors.white}; + flex: 1; + justify-content: center; + align-items: center; `; - - export const WrapperStore = styled.View` - background-color: ${colors.primary}; - width: 80%; - height: 95%; - border-radius: 10px; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 5px; - padding-top: 20px; -` - + background-color: ${colors.primary}; + width: 80%; + height: 95%; + border-radius: 10px; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 5px; + padding-top: 20px; +`; export const WrapperInput = styled.View` - background-color: transparent; - width: 80%; - height: 100px; - margin: 20px; - -` + background-color: transparent; + width: 80%; + height: 100px; + margin: 20px; +`; export const TextEmptyFileds = styled.Text` - color: ${colors.danger} -` \ No newline at end of file + color: ${colors.danger}; +`; diff --git a/react-native/app/routes/component.js b/react-native/app/routes/component.js index 961df83..22ddeca 100644 --- 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() - - 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 - } +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); + } + } catch (e) { + console.log('error', e); + return null; + } } - React.useEffect(()=>{ - getPortals() - }, []) + React.useEffect(() => { + getPortals(); + }, []); return ( - - - - - - { - portals || portals != 0 ? - portals.map((item)=>{ - return ()}/> - }) : null - } - - - + + + + {portals || portals != 0 + ? portals.map(item => { + return ( + } + /> + ); + }) + : null} + + ); -} \ No newline at end of file +}; diff --git a/react-native/app/routes/styles.ts b/react-native/app/routes/styles.ts index 7e52db3..e69de29 100644 --- 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'; - diff --git a/react-native/app/styles/colors.ts b/react-native/app/styles/colors.ts index 3a211ed..3a05403 100644 --- a/react-native/app/styles/colors.ts +++ b/react-native/app/styles/colors.ts @@ -1,15 +1,15 @@ 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 = { - primary: '#06172A', - secundary: '#F3F6F9', - primary_light: '#176DC8', - white: '#FFF', - danger: '#DF2621' -} \ No newline at end of file + primary: '#06172A', + secundary: '#F3F6F9', + primary_light: '#176DC8', + white: '#FFF', + danger: '#DF2621', +}; diff --git a/react-native/bootstrap/start/component.js b/react-native/bootstrap/start/component.js index e54da00..c18c306 100644 --- 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 = ()=>{ - return ( - - - - ) -} \ No newline at end of file +export const Bootstrap = () => { + return ( + + + + ); +};