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

Improved login flow

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-22 11:49:22 +02:00
parent 92fce1d425
commit fc7754588f
2 changed files with 93 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/screens/Services/ServicesScreen.js
View file

@ -8,8 +8,9 @@ import {withCollapsible} from "../../utils/withCollapsible";
import {Collapsible} from "react-navigation-collapsible";
import {CommonActions} from "@react-navigation/native";
import {Animated, View} from "react-native";
import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
import {Avatar, Button, Card, Divider, List, Title, TouchableRipple, withTheme} from "react-native-paper";
import type {CustomTheme} from "../../managers/ThemeManager";
import ConnectionManager from "../../managers/ConnectionManager";
type Props = {
navigation: Object,
@ -29,14 +30,19 @@ const AMICALE_IMAGE = require("../../../assets/amicale.png");
const EE_IMAGE = "https://etud.insa-toulouse.fr/~eeinsat/wp-content/uploads/2019/09/logo-blanc.png";
const TUTORINSA_IMAGE = "https://www.etud.insa-toulouse.fr/~tutorinsa/public/images/logo-gray.png";
type listItem = {
export type listItem = {
title: string,
description: string,
image: string | number,
shouldLogin: boolean,
content: cardList,
}
class ServicesScreen extends React.Component<Props> {
type State = {
isLoggedIn: boolean,
}
class ServicesScreen extends React.Component<Props, State> {
amicaleDataset: cardList;
studentsDataset: cardList;
@ -148,29 +154,40 @@ class ServicesScreen extends React.Component<Props> {
title: "AMICALE",
description: "LOGIN",
image: AMICALE_IMAGE,
shouldLogin: true,
content: this.amicaleDataset
},
{
title: "STUDENTS",
description: "SERVICES OFFERED BY STUDENTS",
image: 'account-group',
shouldLogin: false,
content: this.studentsDataset
},
{
title: "INSA",
description: "SERVICES OFFERED BY INSA",
image: 'school',
shouldLogin: false,
content: this.insaDataset
},
]
];
this.state = {
isLoggedIn: ConnectionManager.getInstance().isLoggedIn()
}
}
componentDidMount() {
this.props.navigation.addListener('focus', this.handleNavigationParams);
this.props.navigation.addListener('focus', this.onFocus);
}
handleNavigationParams = () => {
onFocus = () => {
this.handleNavigationParams();
this.setState({isLoggedIn: ConnectionManager.getInstance().isLoggedIn()})
}
handleNavigationParams() {
if (this.props.route.params != null) {
if (this.props.route.params.nextScreen != null) {
this.props.navigation.navigate(this.props.route.params.nextScreen);
@ -198,25 +215,57 @@ class ServicesScreen extends React.Component<Props> {
/>
}
getLoginMessage() {
return (
<View>
<Title style={{
marginLeft: 'auto',
marginRight: 'auto',
}}>
NOT LOGGED IN
</Title>
<Button
icon="login"
mode="contained"
onPress={() => this.props.navigation.navigate("login")}
style={{
marginLeft: 'auto',
marginRight: 'auto',
}}>
LOGIN
</Button>
</View>
)
}
renderItem = ({item}: { item: listItem }) => {
const shouldShowLogin = !this.state.isLoggedIn && item.shouldLogin;
return (
<TouchableRipple
style={{
margin: 5,
marginBottom: 20,
}}
onPress={() => this.props.navigation.navigate("services-section", {data: item})}
onPress={shouldShowLogin
? undefined
: () => this.props.navigation.navigate("services-section", {data: item})}
>
<View>
<Card.Title
title={item.title}
left={(props) => this.getAvatar(props, item.image)}
right={(props) => <List.Icon {...props} icon="chevron-right"/>}
/>
<CardList
dataset={item.content}
isHorizontal={true}
right={shouldShowLogin
? undefined
: (props) => <List.Icon {...props} icon="chevron-right"/>}
/>
{
shouldShowLogin
? this.getLoginMessage()
: <CardList
dataset={item.content}
isHorizontal={true}
/>
}
</View>
</TouchableRipple>

49
src/screens/Services/ServicesSectionScreen.js
View file

@ -1,12 +1,15 @@
// @flow
import * as React from 'react';
import type {cardList} from "../../components/Lists/CardList/CardList";
import CardList from "../../components/Lists/CardList/CardList";
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {withCollapsible} from "../../utils/withCollapsible";
import {Collapsible} from "react-navigation-collapsible";
import {CommonActions} from "@react-navigation/native";
import ConnectionManager from "../../managers/ConnectionManager";
import type {listItem} from "./ServicesScreen";
import ErrorView from "../../components/Screens/ErrorView";
import {ERROR_TYPE} from "../../utils/WebData";
type Props = {
navigation: Object,
@ -14,20 +17,29 @@ type Props = {
collapsibleStack: Collapsible,
}
type listItem = {
title: string,
description: string,
image: string | number,
content: cardList,
type State = {
isLoggedIn: boolean,
}
class ServicesSectionScreen extends React.Component<Props> {
class ServicesSectionScreen extends React.Component<Props, State> {
finalDataset: listItem;
constructor(props) {
super(props);
this.handleNavigationParams();
this.state = {
isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
}
}
componentDidMount() {
this.props.navigation.addListener('focus', this.onFocus);
}
onFocus = () => {
this.setState({isLoggedIn: ConnectionManager.getInstance().isLoggedIn()})
}
handleNavigationParams() {
@ -45,16 +57,19 @@ class ServicesSectionScreen extends React.Component<Props> {
render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return <CardList
dataset={this.finalDataset.content}
isHorizontal={false}
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/>
if (!this.state.isLoggedIn && this.finalDataset.shouldLogin)
return <ErrorView {...this.props} errorCode={ERROR_TYPE.BAD_TOKEN}/>;
else
return <CardList
dataset={this.finalDataset.content}
isHorizontal={false}
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/>
}
}