vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Removed drawer related files and renamed navigator for more coherence

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-22 18:36:57 +02:00
parent faa174b8f1
commit 38a5761f23
6 changed files with 5 additions and 420 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
App.js
View file

@ -9,7 +9,7 @@ import {AppLoading} from 'expo';
import type {CustomTheme} from "./src/managers/ThemeManager";
import ThemeManager from './src/managers/ThemeManager';
import {NavigationContainer} from '@react-navigation/native';
import DrawerNavigator from './src/navigation/DrawerNavigator';
import MainNavigator from './src/navigation/MainNavigator';
import {initExpoToken} from "./src/utils/Notifications";
import {Provider as PaperProvider} from 'react-native-paper';
import AprilFoolsManager from "./src/managers/AprilFoolsManager";
@ -156,7 +156,7 @@ export default class App extends React.Component<Props, State> {
*/
onLoadFinished() {
// Only show intro if this is the first time starting the app
this.createDrawerNavigator = () => <DrawerNavigator
this.createDrawerNavigator = () => <MainNavigator
defaultHomeRoute={this.defaultHomeRoute}
defaultHomeData={this.defaultHomeData}
/>;
@ -191,7 +191,7 @@ export default class App extends React.Component<Props, State> {
return (
<PaperProvider theme={this.state.currentTheme}>
<NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
<DrawerNavigator
<MainNavigator
defaultHomeRoute={this.defaultHomeRoute}
defaultHomeData={this.defaultHomeData}
/>

BIN
assets/drawer-cover.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 79 KiB

148
src/components/Sidebar/SideBarSection.js
View file

@ -1,148 +0,0 @@
// @flow
import * as React from 'react';
import {FlatList} from "react-native";
import {Drawer, withTheme} from 'react-native-paper';
import {Linking} from "expo";
import AnimatedAccordion from "../Animations/AnimatedAccordion";
import {StackActions} from '@react-navigation/native';
type Props = {
navigation: Object,
startOpen: boolean,
isLoggedIn: boolean,
sectionName: string,
activeRoute: string,
listKey: string,
listData: Array<Object>,
}
const LIST_ITEM_HEIGHT = 48;
class SideBarSection extends React.PureComponent<Props> {
colors: Object;
accordionRef: {current: null | AnimatedAccordion};
constructor(props) {
super(props);
this.colors = props.theme.colors;
this.accordionRef = React.createRef();
}
/**
* Searches if the current route is contained in the given list data.
* If this is the case and the list is collapsed, we should expand this list.
*
* @return boolean
*/
shouldExpandList() {
for (let i = 0; i < this.props.listData.length; i++) {
if (this.props.listData[i].route === this.props.activeRoute) {
return true;
}
}
return false;
}
/**
* 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
*/
onListItemPress(item: Object) {
if (item.link !== undefined)
Linking.openURL(item.link);
else if (item.action !== undefined)
item.action();
else if (this.props.activeRoute === "main")
this.props.navigation.navigate(item.route);
else {
this.props.navigation.dispatch(
StackActions.replace(item.route)
);
this.props.navigation.closeDrawer();
}
}
/**
* Key extractor for list items
*
* @param item The item to extract the key from
* @return {string} The extracted key
*/
listKeyExtractor = (item: Object) => item.route;
shouldHideItem(item: Object) {
const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
return (onlyWhenLoggedIn && !this.props.isLoggedIn || onlyWhenLoggedOut && this.props.isLoggedIn);
}
/**
* Gets the render item for the given list item
*
* @param item The item to render
* @return {*}
*/
getRenderItem = ({item}: Object) => {
const onListItemPress = this.onListItemPress.bind(this, item);
if (this.shouldHideItem(item))
return null;
return (
<Drawer.Item
label={item.name}
active={this.props.activeRoute === item.route}
icon={item.icon}
onPress={onListItemPress}
style={{
height: LIST_ITEM_HEIGHT,
justifyContent: 'center',
}}
/>
);
};
shouldRenderAccordion() {
let itemsToRender = 0;
for (let i = 0; i < this.props.listData.length; i++) {
if (!this.shouldHideItem(this.props.listData[i]))
itemsToRender += 1;
}
return itemsToRender > 1;
}
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
getFlatList() {
return (
// $FlowFixMe
<FlatList
data={this.props.listData}
extraData={this.props.isLoggedIn.toString() + this.props.activeRoute}
renderItem={this.getRenderItem}
keyExtractor={this.listKeyExtractor}
listKey={this.props.listKey}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={this.itemLayout}
/>
);
}
render() {
if (this.shouldRenderAccordion()) {
return (
<AnimatedAccordion
title={this.props.sectionName}
keepOpen={this.shouldExpandList()}
>
{this.getFlatList()}
</AnimatedAccordion>
);
} else
return this.getFlatList();
}
}
export default withTheme(SideBarSection);

267
src/components/Sidebar/Sidebar.js
View file

@ -1,267 +0,0 @@
// @flow
import * as React from 'react';
import {Dimensions, FlatList, Image, StyleSheet, View,} from 'react-native';
import i18n from "i18n-js";
import {TouchableRipple} from "react-native-paper";
import ConnectionManager from "../../managers/ConnectionManager";
import LogoutDialog from "../Amicale/LogoutDialog";
import SideBarSection from "./SideBarSection";
import {DrawerNavigationProp} from "@react-navigation/drawer";
const deviceWidth = Dimensions.get("window").width;
type Props = {
navigation: DrawerNavigationProp,
state: {[key: string] : any},
theme?: Object,
};
type State = {
isLoggedIn: boolean,
dialogVisible: boolean,
};
/**
* Component used to render the drawer menu content
*/
class SideBar extends React.Component<Props, State> {
dataSet: Array<Object>;
activeRoute: string;
/**
* Generate the dataset
*
* @param props
*/
constructor(props: Props) {
super(props);
this.activeRoute = 'main';
// Dataset used to render the drawer
const mainData = [
{
name: i18n.t('screens.home'),
route: "main",
icon: "home",
},
];
const amicaleData = [
{
name: i18n.t('screens.login'),
route: "login",
icon: "login",
onlyWhenLoggedOut: true,
shouldEmphasis: true,
},
{
name: i18n.t('screens.amicaleAbout'),
route: "amicale-contact",
icon: "information",
},
{
name: i18n.t('screens.profile'),
route: "profile",
icon: "account",
onlyWhenLoggedIn: true,
},
{
name: i18n.t('clubs.clubList'),
route: "club-list",
icon: "account-group",
onlyWhenLoggedIn: true,
},
{
name: i18n.t('screens.vote'),
route: "vote",
icon: "vote",
onlyWhenLoggedIn: true,
},
{
name: i18n.t('screens.logout'),
route: 'disconnect',
action: this.showDisconnectDialog,
icon: "logout",
onlyWhenLoggedIn: true,
},
];
const servicesData = [
{
name: i18n.t('screens.menuSelf'),
route: "self-menu",
icon: "silverware-fork-knife",
},
{
name: i18n.t('screens.availableRooms'),
route: "available-rooms",
icon: "calendar-check",
},
{
name: i18n.t('screens.bib'),
route: "bib",
icon: "book",
},
{
name: i18n.t('screens.bluemind'),
route: "bluemind",
link: "https://etud-mel.insa-toulouse.fr/webmail/",
icon: "email",
},
{
name: i18n.t('screens.ent'),
route: "ent",
link: "https://ent.insa-toulouse.fr/",
icon: "notebook",
},
];
const websitesData = [
{
name: "Amicale",
route: "amicale-website",
icon: "alpha-a-box",
},
{
name: "Élus Étudiants",
route: "elus-etudiants",
icon: "alpha-e-box",
},
{
name: "Wiketud",
route: "wiketud",
icon: "wikipedia",
},
{
name: "Tutor'INSA",
route: "tutorinsa",
icon: "school",
},
];
const othersData = [
{
name: i18n.t('screens.settings'),
route: "settings",
icon: "settings",
},
{
name: i18n.t('screens.about'),
route: "about",
icon: "information",
},
];
this.dataSet = [
{
key: '1',
name: i18n.t('screens.home'),
startOpen: true, // App always starts on Main
data: mainData
},
{
key: '2',
name: i18n.t('sidenav.divider4'),
startOpen: false, // TODO set by user preferences
data: amicaleData
},
{
key: '3',
name: i18n.t('sidenav.divider2'),
startOpen: false,
data: servicesData
},
{
key: '4',
name: i18n.t('sidenav.divider1'),
startOpen: false,
data: websitesData
},
{
key: '5',
name: i18n.t('sidenav.divider3'),
startOpen: false,
data: othersData
},
];
ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
this.state = {
isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
dialogVisible: false,
};
}
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
const nextNavigationState = nextProps.state.routes[0].state;
const nextRoute = nextNavigationState.routes[nextNavigationState.index].name;
let currentRoute = "main";
const currentNavigationState = this.props.state.routes[0].state;
if (currentNavigationState != null) {
currentRoute = currentNavigationState.routes[currentNavigationState.index].name;
}
this.activeRoute = nextRoute;
return (nextState !== this.state)
|| (nextRoute !== currentRoute);
}
showDisconnectDialog = () => this.setState({dialogVisible: true});
hideDisconnectDialog = () => this.setState({dialogVisible: false});
onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
/**
* Gets the render item for the given list item
*
* @param item The item to render
* @return {*}
*/
getRenderItem = ({item}: Object) => {
return <SideBarSection
{...this.props}
listKey={item.key}
activeRoute={this.activeRoute}
isLoggedIn={this.state.isLoggedIn}
sectionName={item.name}
startOpen={item.startOpen}
listData={item.data}
/>
};
render() {
return (
<View style={{height: '100%'}}>
<TouchableRipple
onPress={() => this.props.navigation.navigate("tetris")}
>
<Image
source={require("../../../assets/drawer-cover.png")}
style={styles.drawerCover}
/>
</TouchableRipple>
{/*$FlowFixMe*/}
<FlatList
data={this.dataSet}
extraData={this.state.isLoggedIn.toString() + this.activeRoute}
renderItem={this.getRenderItem}
/>
<LogoutDialog
{...this.props}
visible={this.state.dialogVisible}
onDismiss={this.hideDisconnectDialog}
/>
</View>
);
}
}
const styles = StyleSheet.create({
drawerCover: {
height: deviceWidth / 3,
width: 2 * deviceWidth / 3,
position: "relative",
marginBottom: 10,
marginTop: 20
},
});
export default SideBar;

4
src/navigation/DrawerNavigator.js → src/navigation/MainNavigator.js
View file

@ -7,7 +7,7 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
import DebugScreen from '../screens/About/DebugScreen';
import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
import i18n from "i18n-js";
import TabNavigator from "./MainTabNavigator";
import TabNavigator from "./TabNavigator";
import TetrisScreen from "../screens/Tetris/TetrisScreen";
const defaultScreenOptions = {
@ -76,7 +76,7 @@ type Props = {
defaultHomeData: { [key: string]: any }
}
export default class DrawerNavigator extends React.Component<Props> {
export default class MainNavigator extends React.Component<Props> {
createTabNavigator: () => React.Node;

0
src/navigation/MainTabNavigator.js → src/navigation/TabNavigator.js
View file