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

fix es list

Browse Source
pull/13/head
Gustavo Emanuel Farias Rosa 3 years ago
parent d86f9b7a68
commit 713a4a3a4d
10 changed files with 376 additions and 324 deletions
Show Stats Download Patch File Download Diff File

15
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 React from 'react';
import {ButtonAppStyle, TextButton} from './styles';
type IButtonApp = {
children?: object
onPress?: Function
}
children?: object;
onPress?: Function;
};
export const ButtonApp = ({children, onPress}: IButtonApp) => {
return (
<>
<ButtonAppStyle onPress={onPress}>
<TextButton>{children}</TextButton>
</ButtonAppStyle>
</>
)
}
);
};

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

@ -1,7 +1,6 @@
import styled from 'styled-components/native';
import {colors} from '../../styles/colors';
export const ButtonAppStyle = styled.TouchableHighlight`
height: 50px;
font-size: 22px;
@ -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;
`
`;

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

@ -1,6 +1,17 @@
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 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';
@ -8,59 +19,63 @@ 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 {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()
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()
let items = await AsyncStorage.getAllKeys();
if (items.includes('portal')) {
let portalsStorage = await AsyncStorage.getItem('portal')
portalsStorage = JSON.parse(portalsStorage as string)
setPortals(portalsStorage)
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)
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()
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')
console.log('Error: Dont have Portals in Storage');
}
} catch (e) {
console.log('error',e)
}
console.log('error', e);
}
};
const onPress = (namePortal: string) => navigation.navigate(namePortal);
@ -69,32 +84,47 @@ export const ListPortals = ({ navigation }: IListPortalsDTO)=>{
<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>
@ -108,13 +138,16 @@ export const ListPortals = ({ navigation }: IListPortalsDTO)=>{
//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()
rowMap[rowKey].closeRow();
}
}, 3000)
}, 3000);
}}
/>
: <TextWithoutPortal>{i18next.t("mobileApp.portals.list.empty.label")}</TextWithoutPortal>
}
) : (
<TextWithoutPortal>
{i18next.t('mobileApp.portals.list.empty.label')}
</TextWithoutPortal>
)}
</WrapperListContainer>
)
}
);
};

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

@ -2,13 +2,14 @@ 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;
};

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

@ -1,6 +1,11 @@
import React from 'react'
import React from 'react';
import {InputText} from '../../components/input/text/component';
import { TextEmptyFileds, WrapperInput, WrapperStore, WrapperStoreContainer } from './styles';
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';
@ -10,8 +15,8 @@ import { initTranslation } from '../../translations/index';
import i18next from 'i18next';
export const StorePortals = ({navigation, modalizeRef}: IStore) => {
initTranslation()
const {portals, setPortals} = usePortal()
initTranslation();;
const {portals, setPortals} = usePortal();;
const [name, setName] = React.useState('');
const [url, setUrl] = React.useState('');
const [emptyFields, setEmptyFields] = React.useState(false);
@ -19,51 +24,54 @@ export const StorePortals = ({navigation, modalizeRef}:IStore)=>{
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() {
//return false;
if(!name || !url) return setEmptyFields(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
})
let portalsFilter = portals.filter(
(portal: {name: string; url: string}) => {
if (portal.name != name) return false;;
return portal;
},
);
if (portalsFilter.length >= 1) {
setNameAlreadyUsed(true)
setNameAlreadyUsed(true);
return false;
}
await newPortal(name, url )
await newPortal(name, url);
} catch (e) {
console.log('error', e)
await AsyncStorage.setItem('portal', JSON.stringify([]))
newPortal(name, url )
return null
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
}
{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>
</>
)
);;
}

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

@ -1,4 +1,4 @@
import styled from 'styled-components/native'
import styled from 'styled-components/native';
import {colors} from '../../styles/colors';
export const WrapperStoreContainer = styled.View`
@ -8,8 +8,6 @@ export const WrapperStoreContainer = styled.View`
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};
`;

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

@ -5,54 +5,56 @@ 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';
const Drawer = createDrawerNavigator();
export const Routes = () => {
initTranslation()
initTranslation();
const {portals, setPortals} = usePortal()
const {portals, setPortals} = usePortal();
async function getPortals() {
try {
let items = await AsyncStorage.getAllKeys()
let items = await AsyncStorage.getAllKeys();
if (items.includes('portal')) {
let portalsStorage = await AsyncStorage.getItem('portal')
portalsStorage = JSON.parse(portalsStorage)
setPortals(portalsStorage)
let portalsStorage = await AsyncStorage.getItem('portal');
portalsStorage = JSON.parse(portalsStorage);
setPortals(portalsStorage);
}
} catch (e) {
console.log('error', e)
return null
console.log('error', e);
return null;
}
}
React.useEffect(() => {
getPortals()
}, [])
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>
);
}
};

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';

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

@ -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',
};

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

@ -1,13 +1,12 @@
import React from 'react'
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>
)
}
);
};

Write Preview
Loading…
Cancel
Save