application-amicale/components/Sidebar.js

271 lines
7.9 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
2019-06-25 22:20:24 +02:00
import i18n from "i18n-js";
2020-03-30 17:39:59 +02:00
import {openBrowser} from "../utils/WebBrowser";
import SidebarDivider from "./SidebarDivider";
import SidebarItem from "./SidebarItem";
2020-03-30 17:39:59 +02:00
import {TouchableRipple, withTheme} from "react-native-paper";
2020-03-31 14:21:01 +02:00
import ConnectionManager from "../managers/ConnectionManager";
import LogoutDialog from "./LogoutDialog";
2019-06-25 22:20:24 +02:00
const deviceWidth = Dimensions.get("window").width;
2019-06-25 22:20:24 +02:00
type Props = {
navigation: Object,
state: Object,
2020-03-30 17:39:59 +02:00
theme: Object,
};
type State = {
active: string,
2020-03-31 14:21:01 +02:00
isLoggedIn: boolean,
dialogVisible: boolean,
};
2019-06-29 15:43:57 +02:00
/**
2020-03-29 14:46:44 +02:00
* Component used to render the drawer menu content
2019-06-29 15:43:57 +02:00
*/
2020-03-30 17:39:59 +02:00
class SideBar extends React.PureComponent<Props, State> {
dataSet: Array<Object>;
2019-06-25 22:20:24 +02:00
2020-02-23 18:15:30 +01:00
getRenderItem: Function;
2020-03-30 17:39:59 +02:00
colors: Object;
2020-02-23 18:15:30 +01:00
2019-06-29 15:43:57 +02:00
/**
2020-03-29 14:46:44 +02:00
* Generate the dataset
2019-06-29 15:43:57 +02:00
*
* @param props
*/
constructor(props: Props) {
2019-06-25 22:20:24 +02:00
super(props);
// Dataset used to render the drawer
2019-06-25 22:20:24 +02:00
this.dataSet = [
2020-03-06 09:12:56 +01:00
{
2020-03-08 12:17:04 +01:00
name: i18n.t('screens.home'),
2020-03-06 09:12:56 +01:00
route: "Main",
icon: "home",
},
2020-03-31 14:21:01 +02:00
{
name: "AMICALE",
route: "Divider4"
},
2020-03-29 11:47:27 +02:00
{
2020-03-31 20:40:52 +02:00
name: i18n.t('screens.login'),
2020-03-29 11:47:27 +02:00
route: "LoginScreen",
icon: "login",
2020-03-31 14:21:01 +02:00
onlyWhenLoggedOut: true,
},
{
2020-03-31 20:40:52 +02:00
name: i18n.t('screens.profile'),
2020-03-31 14:21:01 +02:00
route: "ProfileScreen",
2020-03-31 19:00:47 +02:00
icon: "account",
2020-03-31 14:21:01 +02:00
onlyWhenLoggedIn: true,
2020-03-29 11:47:27 +02:00
},
2020-03-31 18:40:06 +02:00
{
2020-03-31 20:40:52 +02:00
name: i18n.t('screens.logout'),
2020-03-31 18:40:06 +02:00
route: 'disconnect',
action: this.showDisconnectDialog,
2020-03-31 18:40:06 +02:00
icon: "logout",
onlyWhenLoggedIn: true,
},
2020-03-06 09:12:56 +01:00
{
name: i18n.t('sidenav.divider2'),
route: "Divider2"
},
{
name: i18n.t('screens.menuSelf'),
route: "SelfMenuScreen",
icon: "silverware-fork-knife",
},
{
name: i18n.t('screens.availableRooms'),
route: "AvailableRoomScreen",
icon: "calendar-check",
},
{
2020-03-08 12:17:04 +01:00
name: i18n.t('screens.bib'),
2020-03-06 09:12:56 +01:00
route: "BibScreen",
icon: "book",
},
{
name: i18n.t('screens.bluemind'),
route: "BlueMindScreen",
link: "https://etud-mel.insa-toulouse.fr/webmail/",
icon: "email",
},
{
name: i18n.t('screens.ent'),
route: "EntScreen",
link: "https://ent.insa-toulouse.fr/",
icon: "notebook",
},
{
name: i18n.t('sidenav.divider1'),
route: "Divider1"
},
2019-07-31 14:43:19 +02:00
{
name: "Amicale",
route: "AmicaleScreen",
2020-03-05 10:40:25 +01:00
link: "https://amicale-insat.fr/",
icon: "alpha-a-box",
},
2020-01-29 13:53:05 +01:00
{
name: "Élus Étudiants",
route: "ElusEtudScreen",
2020-03-05 10:40:25 +01:00
link: "https://etud.insa-toulouse.fr/~eeinsat/",
2020-01-29 13:53:05 +01:00
icon: "alpha-e-box",
},
2019-06-27 10:45:16 +02:00
{
name: "Wiketud",
route: "WiketudScreen",
2020-03-05 10:40:25 +01:00
link: "https://wiki.etud.insa-toulouse.fr",
icon: "wikipedia",
2019-06-27 10:45:16 +02:00
},
2019-09-19 22:33:28 +02:00
{
name: "Tutor'INSA",
route: "TutorInsaScreen",
2020-03-05 10:40:25 +01:00
link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
2019-09-19 22:33:28 +02:00
icon: "school",
},
{
name: i18n.t('sidenav.divider3'),
route: "Divider3"
},
{
name: i18n.t('screens.settings'),
route: "SettingsScreen",
icon: "settings",
},
{
name: i18n.t('screens.about'),
route: "AboutScreen",
icon: "information",
},
2019-06-25 22:20:24 +02:00
];
2020-02-11 01:05:24 +01:00
this.getRenderItem = this.getRenderItem.bind(this);
2020-03-30 17:39:59 +02:00
this.colors = props.theme.colors;
2020-03-31 14:21:01 +02:00
ConnectionManager.getInstance().setLoginCallback((value) => this.onLoginStateChange(value));
2020-03-31 18:40:06 +02:00
this.state = {
active: 'Home',
isLoggedIn: false,
dialogVisible: false,
2020-03-31 18:40:06 +02:00
};
ConnectionManager.getInstance().isLoggedIn().then(data => undefined).catch(error => undefined);
2020-03-31 14:21:01 +02:00
}
showDisconnectDialog = () => this.setState({ dialogVisible: true });
hideDisconnectDialog = () => this.setState({ dialogVisible: false });
2020-03-31 14:21:01 +02:00
onLoginStateChange(isLoggedIn: boolean) {
this.setState({isLoggedIn: isLoggedIn});
2019-06-25 22:20:24 +02:00
}
2020-03-29 14:46:44 +02:00
/**
* Callback when a drawer item is pressed.
* It will either navigate to the associated screen, or open the browser to the associated link
*
* @param item The item pressed
*/
2020-03-05 10:40:25 +01:00
onListItemPress(item: Object) {
2020-03-31 14:21:01 +02:00
if (item.link !== undefined)
2020-03-30 17:39:59 +02:00
openBrowser(item.link, this.colors.primary);
2020-03-31 14:21:01 +02:00
else if (item.action !== undefined)
item.action();
else
this.props.navigation.navigate(item.route);
2020-02-11 01:05:24 +01:00
}
2020-03-29 14:46:44 +02:00
/**
* Key extractor for list items
*
* @param item The item to extract the key from
* @return {string} The extracted key
*/
listKeyExtractor(item: Object): string {
2020-02-11 01:05:24 +01:00
return item.route;
}
2020-03-29 14:46:44 +02:00
/**
* Gets the render item for the given list item
*
* @param item The item to render
* @return {*}
*/
2020-02-11 01:05:24 +01:00
getRenderItem({item}: Object) {
2020-03-05 10:40:25 +01:00
const onListItemPress = this.onListItemPress.bind(this, item);
2020-03-31 14:21:01 +02:00
const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn)
return null;
else if (item.icon !== undefined) {
return (
<SidebarItem
title={item.name}
icon={item.icon}
onPress={onListItemPress}
/>
);
} else {
return (
<SidebarDivider title={item.name}/>
);
}
}
2019-06-25 22:20:24 +02:00
render() {
2020-03-15 18:44:32 +01:00
const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
2019-06-25 22:20:24 +02:00
return (
<View style={{height: '100%'}}>
2020-03-15 18:44:32 +01:00
<TouchableRipple
onPress={onPress}
>
<Image
source={require("../assets/drawer-cover.png")}
style={styles.drawerCover}
/>
</TouchableRipple>
<FlatList
data={this.dataSet}
extraData={this.state}
2020-02-11 01:05:24 +01:00
keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem}
/>
<LogoutDialog
{...this.props}
visible={this.state.dialogVisible}
onDismiss={this.hideDisconnectDialog}
/>
</View>
2019-06-25 22:20:24 +02:00
);
}
}
const styles = StyleSheet.create({
drawerCover: {
height: deviceWidth / 3,
width: 2 * deviceWidth / 3,
2019-06-25 22:20:24 +02:00
position: "relative",
marginBottom: 10,
marginTop: 20
},
text: {
fontWeight: Platform.OS === "ios" ? "500" : "400",
fontSize: 16,
marginLeft: 20
},
badgeText: {
fontSize: Platform.OS === "ios" ? 13 : 11,
fontWeight: "400",
textAlign: "center",
marginTop: Platform.OS === "android" ? -3 : undefined
}
});
2020-03-30 17:39:59 +02:00
export default withTheme(SideBar);