BigBlueButton/bigbluebutton-tablet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #13 from gustavo-em/es_list

Browse Source 
LInt
This commit is contained in:
Tiago Jacobs 2022-03-21 08:33:03 -03:00 committed by GitHub
commit 3633d92c5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 376 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
react-native/app/components/button/component.tsx
View File

@ -1,19 +1,16 @@
import React from 'react' import React from 'react';
import { Text } from 'react-native' import {ButtonAppStyle, TextButton} from './styles';
import { TouchableOpacity } from 'react-native-gesture-handler'
import { ButtonAppStyle, TextButton } from './styles';
type IButtonApp = { type IButtonApp = {
children?: object children?: object;
onPress?: Function onPress?: Function;
} };
export const ButtonApp = ({children, onPress}:IButtonApp)=>{ export const ButtonApp = ({children, onPress}: IButtonApp) => {
return ( return (
<> <>
<ButtonAppStyle onPress={onPress}> <ButtonAppStyle onPress={onPress}>
<TextButton>{children}</TextButton> <TextButton>{children}</TextButton>
</ButtonAppStyle> </ButtonAppStyle>
</>
</> );
) };
}

26
react-native/app/components/button/styles.ts
View File

@ -1,19 +1,17 @@
import styled from 'styled-components/native'; import styled from 'styled-components/native';
import { colors } from '../../styles/colors'; import {colors} from '../../styles/colors';
export const ButtonAppStyle = styled.TouchableHighlight` export const ButtonAppStyle = styled.TouchableHighlight`
height: 50px; height: 50px;
font-size: 22px; font-size: 22px;
background-color: ${colors.primary_light}; background-color: ${colors.primary_light};
border-radius: 5px; border-radius: 5px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
` `;
export const TextButton = styled.Text` export const TextButton = styled.Text`
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
`;
`

245
react-native/app/pages/list_portals/component.tsx
View File

@ -1,120 +1,153 @@
import AsyncStorage from '@react-native-async-storage/async-storage' import AsyncStorage from '@react-native-async-storage/async-storage';
import React, { useRef } from 'react' import React from 'react';
import { ButtonDelete, ButtonOpen, DivButtonDelete, DivDelete, ItemList, TextButtonOpen, TextItem, TextWithoutPortal, WrapperItemListText, WrapperItemListView, WrapperList, WrapperListContainer, WrapperViewAdd } from './styles' import {
import { usePortal } from '../../contexts/portals/hook'; ButtonDelete,
import { Modalize } from 'react-native-modalize'; ButtonOpen,
import { StorePortals } from '../store_portals/component'; 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 FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { colors } from '../../styles/colors'; import {colors} from '../../styles/colors';
import { SwipeListView } from 'react-native-swipe-list-view'; import {SwipeListView} from 'react-native-swipe-list-view';
import { IHandles } from 'react-native-modalize/lib/options'; import {IHandles} from 'react-native-modalize/lib/options';
import { IItem, IItemDelete, IListPortalsDTO } from './types' import {IItem, IItemDelete, IListPortalsDTO} from './types';
import i18next from 'i18next' import i18next from 'i18next';
import { initTranslation } from '../../translations/index'; import {initTranslation} from '../../translations/index';
export const ListPortals = ({ navigation }: IListPortalsDTO)=>{ export const ListPortals = ({navigation}: IListPortalsDTO) => {
initTranslation();
initTranslation() const icon = (
const icon = <FontAwesome5 color={colors.white} solid size={18} name={'plus'} />; <FontAwesome5 color={colors.white} solid size={18} name={'plus'} />
const {portals, setPortals} = usePortal() );
async function getPortals(){ const {portals, setPortals} = usePortal();
try{ async function getPortals() {
let items = await AsyncStorage.getAllKeys() try {
if(items.includes('portal')){ let items = await AsyncStorage.getAllKeys();
if (items.includes('portal')) {
let portalsStorage = await AsyncStorage.getItem('portal') let portalsStorage = await AsyncStorage.getItem('portal');
portalsStorage = JSON.parse(portalsStorage as string) portalsStorage = JSON.parse(portalsStorage as string);
setPortals(portalsStorage) setPortals(portalsStorage);
} else {
} else { console.log('Error: Dont Have Portals Storage');
console.log('Error: Dont Have Portals Storage') }
} } catch (e) {
} catch(e){ console.log('error', 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 onOpen = () => modalizeRef.current?.open();
const DeleteItem = async (item:IItemDelete)=>{ const DeleteItem = async (item: IItemDelete) => {
try{ try {
let items = await AsyncStorage.getAllKeys() let items = await AsyncStorage.getAllKeys();
if(items.includes('portal')){ if (items.includes('portal')) {
let portalsStorage = await AsyncStorage.getItem('portal');
let portalsStorage = await AsyncStorage.getItem('portal') portalsStorage = JSON.parse(portalsStorage as string);
portalsStorage = JSON.parse(portalsStorage as string) const newPortalStorage = portalsStorage?.filter(
const newPortalStorage = portalsStorage?.filter((portalItem: IItemDelete)=>{ (portalItem: IItemDelete) => {
if(item.name == portalItem.name) return false if (item.name == portalItem.name) {
return portalItem return false;
})
await AsyncStorage.setItem('portal', JSON.stringify(newPortalStorage))
setPortals(newPortalStorage)
} else {
console.log('Error: Dont have Portals in Storage')
} }
} catch(e){ return portalItem;
console.log('error',e) },
} );
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)=>( const Item = ({namePortal, url}: IItem) => (
<WrapperItemListText onPress={()=>onPress(namePortal)}> <WrapperItemListText onPress={() => onPress(namePortal)}>
<ItemList bold>{namePortal}</ItemList> <ItemList bold>{namePortal}</ItemList>
<ItemList>{url}</ItemList> <ItemList>{url}</ItemList>
</WrapperItemListText> </WrapperItemListText>
) );
return ( return (
<WrapperListContainer> <WrapperListContainer>
<ButtonOpen onPress={onOpen}>
<TextButtonOpen>
{i18next.t('mobileApp.portals.list.add.button.label')} {icon}
</TextButtonOpen>
</ButtonOpen>
<ButtonOpen onPress={onOpen}> <Modalize ref={modalizeRef} adjustToContentHeight={true}>
<TextButtonOpen>{i18next.t("mobileApp.portals.list.add.button.label")} {icon}</TextButtonOpen> <WrapperViewAdd>
</ButtonOpen> <StorePortals
modalizeRef={modalizeRef as unknown as IHandles}
<Modalize ref={modalizeRef} adjustToContentHeight={true}> navigation={navigation}
<WrapperViewAdd> />
<StorePortals modalizeRef={modalizeRef as unknown as IHandles} navigation={navigation}/> </WrapperViewAdd>
</WrapperViewAdd> </Modalize>
</Modalize>
{ {portals && portals.length != 0 ? (
portals && portals.length != 0 ? <SwipeListView
<SwipeListView useFlatList={true}
useFlatList={true} data={portals}
data={portals} renderItem={rowData => (
renderItem={(rowData, rowMap) => <Item onPress={onPress} key={rowData.index} namePortal={rowData.item.name} url={rowData.item.url}/>} <Item
renderHiddenItem={ (rowData, rowMap) => ( onPress={onPress}
<DivDelete> key={rowData.index}
<DivButtonDelete> namePortal={rowData.item.name}
<ButtonDelete onPress={()=>DeleteItem(rowData.item as IItemDelete)}> url={rowData.item.url}
<FontAwesome5 size={20} color={colors.primary} name={'trash'}/> />
</ButtonDelete> )}
</DivButtonDelete> renderHiddenItem={rowData => (
</DivDelete> <DivDelete>
)} <DivButtonDelete>
leftOpenValue={0} <ButtonDelete
rightOpenValue={-80} onPress={() => DeleteItem(rowData.item as IItemDelete)}>
disableRightSwipe={true} <FontAwesome5
closeOnRowPress={true} size={20}
closeOnRowOpen={true} color={colors.primary}
onRowOpen={(rowKey, rowMap) => { name={'trash'}
//This timeout is recommended https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/migrating-to-flatlist.md />
setTimeout(() => { </ButtonDelete>
if(rowMap[rowKey] != undefined){ </DivButtonDelete>
rowMap[rowKey].closeRow() </DivDelete>
} )}
}, 3000) leftOpenValue={0}
}} rightOpenValue={-80}
/> disableRightSwipe={true}
: <TextWithoutPortal>{i18next.t("mobileApp.portals.list.empty.label")}</TextWithoutPortal> closeOnRowPress={true}
} closeOnRowOpen={true}
</WrapperListContainer> 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);
}}
/>
) : (
<TextWithoutPortal>
{i18next.t('mobileApp.portals.list.empty.label')}
</TextWithoutPortal>
)}
</WrapperListContainer>
);
};

21
react-native/app/pages/list_portals/types.ts
View File

@ -1,14 +1,15 @@
import { DrawerScreenProps } from '@react-navigation/drawer'; import {DrawerScreenProps} from '@react-navigation/drawer';
export type IItem = { export type IItem = {
url: string; url: string;
namePortal: string; namePortal: string;
} onPress?: any;
};
export type IListPortalsDTO = { export type IListPortalsDTO = {
navigation: DrawerScreenProps navigation: DrawerScreenProps;
} };
export type IItemDelete = { export type IItemDelete = {
name: string; name: string;
url: string url: string;
} };

187
react-native/app/pages/store_portals/component.tsx
View File

@ -1,86 +1,115 @@
import React from 'react' import React from 'react';
import { InputText } from '../../components/input/text/component'; import {InputText} from '../../components/input/text/component';
import { TextEmptyFileds, WrapperInput, WrapperStore, WrapperStoreContainer } from './styles'; import {
import { Text } from 'react-native'; TextEmptyFileds,
import { ButtonApp } from '../../components/button/component'; 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 AsyncStorage from '@react-native-async-storage/async-storage';
import { usePortal } from '../../contexts/portals/hook'; import {usePortal} from '../../contexts/portals/hook';
import { IStore } from './types'; import {IStore} from './types';
import { initTranslation } from '../../translations/index'; import {initTranslation} from '../../translations/index';
import i18next from 'i18next'; import i18next from 'i18next';
export const StorePortals = ({navigation, modalizeRef}:IStore)=>{ export const StorePortals = ({navigation, modalizeRef}: IStore) => {
initTranslation() initTranslation();;
const {portals, setPortals} = usePortal() const {portals, setPortals} = usePortal();;
const [name, setName] = React.useState(''); const [name, setName] = React.useState('');
const [url, setUrl] = React.useState(''); const [url, setUrl] = React.useState('');
const [emptyFields, setEmptyFields] = React.useState(false); const [emptyFields, setEmptyFields] = React.useState(false);
const [nameAlreadyUsed, setNameAlreadyUsed] = 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; let portalsStorage;
portalsStorage = await AsyncStorage.getItem('portal') portalsStorage = await AsyncStorage.getItem('portal');
portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null;
portalsStorage.push({name, url}) portalsStorage.push({name, url});;
AsyncStorage.setItem('portal', JSON.stringify(portalsStorage)) AsyncStorage.setItem('portal', JSON.stringify(portalsStorage));;
setPortals(portalsStorage) setPortals(portalsStorage);;
modalizeRef?.current?.close(); modalizeRef?.current?.close();
navigation.navigate(name) 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);
} catch (e) {
console.log('error', e);
await AsyncStorage.setItem('portal', JSON.stringify([]));
newPortal(name, url);
return null;
} }
}
async function onPress(){ const textEmptyFields = () => (
//return false; <>
if(!name || !url) return setEmptyFields(true) {emptyFields ? (
try{ <TextEmptyFileds>
let portalsFilter = portals.filter((portal: {name: string, url: string})=>{ {i18next.t('mobileApp.portals.addPortalPopup.validation.emptyFilds')}
if(portal.name != name ) return false </TextEmptyFileds>
return portal ) : null}
}) {nameAlreadyUsed ? (
if(portalsFilter.length >= 1){ <TextEmptyFileds>
setNameAlreadyUsed(true) {i18next.t(
return false; 'mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists',
} )}
await newPortal(name, url ) </TextEmptyFileds>
) : null}
</>
);;
} catch(e){ return (
console.log('error', e) <>
await AsyncStorage.setItem('portal', JSON.stringify([])) <WrapperStoreContainer>
newPortal(name, url ) <WrapperStore>
return null {textEmptyFields()}
} <WrapperInput>
} <InputText
value={name}
const textEmptyFields = ()=>( onChangeText={(e: any) => setName(e)}
<> placeholder={i18next.t(
{ 'mobileApp.portals.fields.name.placeholder',
emptyFields ? )}
<TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.emptyFilds")}</TextEmptyFileds> label={i18next.t('mobileApp.portals.fields.name.label')}
: null />
} </WrapperInput>
{ <WrapperInput>
nameAlreadyUsed ? <InputText
<TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists")}</TextEmptyFileds> autoCapitalize="none"
: null value={url}
} onChangeText={(e: any) => setUrl(e)}
</> placeholder={i18next.t(
) 'mobileApp.portals.fields.url.placeholder',
)}
return ( label={i18next.t('mobileApp.portals.fields.url.label')}
<> />
<WrapperStoreContainer> </WrapperInput>
<WrapperStore> <WrapperInput>
{textEmptyFields()} <ButtonApp onPress={onPress}>
<WrapperInput> <Text>
<InputText value={name} onChangeText={(e:any)=>setName(e)} placeholder={i18next.t("mobileApp.portals.fields.name.placeholder")} label={i18next.t("mobileApp.portals.fields.name.label")}/> {i18next.t(
</WrapperInput> 'mobileApp.portals.addPortalPopup.confirm.button.label',
<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")}/> </Text>
</WrapperInput> </ButtonApp>
<WrapperInput> </WrapperInput>
<ButtonApp onPress={onPress}><Text>{i18next.t("mobileApp.portals.addPortalPopup.confirm.button.label")}</Text></ButtonApp> </WrapperStore>
</WrapperInput> </WrapperStoreContainer>
</WrapperStore> </>
</WrapperStoreContainer> );;
</> }
)
}

50
react-native/app/pages/store_portals/styles.ts
View File

@ -1,35 +1,31 @@
import styled from 'styled-components/native' import styled from 'styled-components/native';
import { colors } from '../../styles/colors'; import {colors} from '../../styles/colors';
export const WrapperStoreContainer = styled.View` export const WrapperStoreContainer = styled.View`
background-color: ${colors.white}; background-color: ${colors.white};
flex: 1 ; flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
`; `;
export const WrapperStore = styled.View` export const WrapperStore = styled.View`
background-color: ${colors.primary}; background-color: ${colors.primary};
width: 80%; width: 80%;
height: 95%; height: 95%;
border-radius: 10px; border-radius: 10px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
padding: 5px; padding: 5px;
padding-top: 20px; padding-top: 20px;
` `;
export const WrapperInput = styled.View` export const WrapperInput = styled.View`
background-color: transparent; background-color: transparent;
width: 80%; width: 80%;
height: 100px; height: 100px;
margin: 20px; margin: 20px;
`;
`
export const TextEmptyFileds = styled.Text` export const TextEmptyFileds = styled.Text`
color: ${colors.danger} color: ${colors.danger};
` `;

94
react-native/app/routes/component.js vendored
View File

@ -1,58 +1,60 @@
import * as React from 'react'; import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import { ListPortals } from '../pages/list_portals/component'; import {ListPortals} from '../pages/list_portals/component';
import { usePortal } from '../contexts/portals/hook'; import {usePortal} from '../contexts/portals/hook';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import i18next from 'i18next'; import i18next from 'i18next';
import { import {createDrawerNavigator} from '@react-navigation/drawer';
createDrawerNavigator,
} from '@react-navigation/drawer';
import SdkContainer from '../../bootstrap/sdk/container'; import SdkContainer from '../../bootstrap/sdk/container';
import { initTranslation } from '../translations/index'; import {initTranslation} from '../translations/index';
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
export const Routes = ()=>{ export const Routes = () => {
initTranslation() initTranslation();
const {portals, setPortals} = usePortal() const {portals, setPortals} = usePortal();
async function getPortals(){ async function getPortals() {
try{ try {
let items = await AsyncStorage.getAllKeys() let items = await AsyncStorage.getAllKeys();
if(items.includes('portal')){ if (items.includes('portal')) {
let portalsStorage = await AsyncStorage.getItem('portal') let portalsStorage = await AsyncStorage.getItem('portal');
portalsStorage = JSON.parse(portalsStorage) portalsStorage = JSON.parse(portalsStorage);
setPortals(portalsStorage) setPortals(portalsStorage);
} }
} catch(e){ } catch (e) {
console.log('error', e) console.log('error', e);
return null return null;
} }
} }
React.useEffect(()=>{ React.useEffect(() => {
getPortals() getPortals();
}, []) }, []);
return ( return (
<NavigationContainer>
<NavigationContainer> <Drawer.Navigator
<Drawer.Navigator initialRouteName="Portals"
initialRouteName="Portals" screenOptions={{
screenOptions={{ headerShown: false,
headerShown: false }}>
}} <Drawer.Screen
> name={i18next.t('mobileApp.portals.drawerNavigation.button.label')}
component={ListPortals}
<Drawer.Screen name={i18next.t("mobileApp.portals.drawerNavigation.button.label")} component={ListPortals} /> />
{ {portals || portals != 0
portals || portals != 0 ? ? portals.map(item => {
portals.map((item)=>{ return (
return <Drawer.Screen key={item.name} name={item.name} children={()=> (<SdkContainer url={item.url}/>)}/> <Drawer.Screen
}) : null key={item.name}
} name={item.name}
children={() => <SdkContainer url={item.url} />}
</Drawer.Navigator> />
</NavigationContainer> );
})
: null}
</Drawer.Navigator>
</NavigationContainer>
); );
} };

3
react-native/app/routes/styles.ts
View File

@ -1,3 +0,0 @@
import styled from "styled-components/native"
import { colors } from '../styles/colors';

22
react-native/app/styles/colors.ts
View File

@ -1,15 +1,15 @@
interface IColors { interface IColors {
primary: string primary: string;
secundary: string secundary: string;
primary_light: string primary_light: string;
white: string white: string;
danger: string danger: string;
} }
export const colors: IColors = { export const colors: IColors = {
primary: '#06172A', primary: '#06172A',
secundary: '#F3F6F9', secundary: '#F3F6F9',
primary_light: '#176DC8', primary_light: '#176DC8',
white: '#FFF', white: '#FFF',
danger: '#DF2621' danger: '#DF2621',
} };

21
react-native/bootstrap/start/component.js vendored
View File

@ -1,13 +1,12 @@
import React from 'react' import React from 'react';
import { Routes } from '../../app/routes/component'; import {Routes} from '../../app/routes/component';
import { PortalContextContainer } from '../../app/contexts/portals/container'; import {PortalContextContainer} from '../../app/contexts/portals/container';
//This file is used to envolve app in contexts, libs, etc.. //This file is used to envolve app in contexts, libs, etc..
export const Bootstrap = ()=>{ export const Bootstrap = () => {
return ( return (
<PortalContextContainer> <PortalContextContainer>
<Routes/> <Routes />
</PortalContextContainer> </PortalContextContainer>
) );
} };