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
pull/14/head^2
Tiago Jacobs 3 years ago committed by GitHub
parent d86f9b7a68 713a4a3a4d
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

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

@ -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 (
<>
<ButtonAppStyle onPress={onPress}>
<TextButton>{children}</TextButton>
</ButtonAppStyle>
</>
)
}
children?: object;
onPress?: Function;
};
export const ButtonApp = ({children, onPress}: IButtonApp) => {
return (
<>
<ButtonAppStyle onPress={onPress}>
<TextButton>{children}</TextButton>
</ButtonAppStyle>
</>
);
};

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

@ -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;
`
font-size: 22px;
font-weight: bold;
color: #fff;
`;

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

@ -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 = <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')
}
} catch(e){
console.log('error',e)
}
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');
}
} catch (e) {
console.log('error', e);
}
}
React.useEffect(()=>{getPortals()}, [])
const modalizeRef = useRef<Modalize>(null);
React.useEffect(() => {
getPortals();
}, []);
const onOpen = () => modalizeRef.current?.open();
const modalizeRef = React.useRef<Modalize>(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)=>(
<WrapperItemListText onPress={()=>onPress(namePortal)}>
<ItemList bold>{namePortal}</ItemList>
<ItemList>{url}</ItemList>
</WrapperItemListText>
)
const Item = ({namePortal, url}: IItem) => (
<WrapperItemListText onPress={() => onPress(namePortal)}>
<ItemList bold>{namePortal}</ItemList>
<ItemList>{url}</ItemList>
</WrapperItemListText>
);
return (
<WrapperListContainer>
return (
<WrapperListContainer>
<ButtonOpen onPress={onOpen}>
<TextButtonOpen>
{i18next.t('mobileApp.portals.list.add.button.label')} {icon}
</TextButtonOpen>
</ButtonOpen>
<ButtonOpen onPress={onOpen}>
<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}/>
</WrapperViewAdd>
</Modalize>
<Modalize ref={modalizeRef} adjustToContentHeight={true}>
<WrapperViewAdd>
<StorePortals
modalizeRef={modalizeRef as unknown as IHandles}
navigation={navigation}
/>
</WrapperViewAdd>
</Modalize>
{
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) => (
<DivDelete>
<DivButtonDelete>
<ButtonDelete onPress={()=>DeleteItem(rowData.item as IItemDelete)}>
<FontAwesome5 size={20} color={colors.primary} name={'trash'}/>
</ButtonDelete>
</DivButtonDelete>
</DivDelete>
)}
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)
}}
/>
: <TextWithoutPortal>{i18next.t("mobileApp.portals.list.empty.label")}</TextWithoutPortal>
}
</WrapperListContainer>
)
}
{portals && portals.length != 0 ? (
<SwipeListView
useFlatList={true}
data={portals}
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>
</DivButtonDelete>
</DivDelete>
)}
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);
}}
/>
) : (
<TextWithoutPortal>
{i18next.t('mobileApp.portals.list.empty.label')}
</TextWithoutPortal>
)}
</WrapperListContainer>
);
};

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

@ -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
}
export type IItemDelete = {
name: string;
url: string;
};

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

@ -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 ? (
<TextEmptyFileds>
{i18next.t('mobileApp.portals.addPortalPopup.validation.emptyFilds')}
</TextEmptyFileds>
) : null}
{nameAlreadyUsed ? (
<TextEmptyFileds>
{i18next.t(
'mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists',
)}
</TextEmptyFileds>
) : null}
</>
);;
const textEmptyFields = ()=>(
<>
{
emptyFields ?
<TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.emptyFilds")}</TextEmptyFileds>
: null
}
{
nameAlreadyUsed ?
<TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists")}</TextEmptyFileds>
: null
}
</>
)
return (
<>
<WrapperStoreContainer>
<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")}/>
</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")}/>
</WrapperInput>
<WrapperInput>
<ButtonApp onPress={onPress}><Text>{i18next.t("mobileApp.portals.addPortalPopup.confirm.button.label")}</Text></ButtonApp>
</WrapperInput>
</WrapperStore>
</WrapperStoreContainer>
</>
)
}
return (
<>
<WrapperStoreContainer>
<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')}
/>
</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')}
/>
</WrapperInput>
<WrapperInput>
<ButtonApp onPress={onPress}>
<Text>
{i18next.t(
'mobileApp.portals.addPortalPopup.confirm.button.label',
)}
</Text>
</ButtonApp>
</WrapperInput>
</WrapperStore>
</WrapperStoreContainer>
</>
);;
}

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

@ -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}
`
color: ${colors.danger};
`;

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

@ -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 (
<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
}
</Drawer.Navigator>
</NavigationContainer>
<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}
</Drawer.Navigator>
</NavigationContainer>
);
}
};

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

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

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

@ -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'
}
primary: '#06172A',
secundary: '#F3F6F9',
primary_light: '#176DC8',
white: '#FFF',
danger: '#DF2621',
};

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

@ -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 (
<PortalContextContainer>
<Routes/>
</PortalContextContainer>
)
}
export const Bootstrap = () => {
return (
<PortalContextContainer>
<Routes />
</PortalContextContainer>
);
};

Write Preview
Loading…
Cancel
Save