Update planning screens to use TypeScript

This commit is contained in:
Arnaud Vergnet 2020-09-22 22:18:05 +02:00
parent 742cb1802d
commit b78357968a
2 changed files with 49 additions and 38 deletions

View file

@ -36,12 +36,12 @@ import type {PlanningEventType} from '../../utils/Planning';
import ImageGalleryButton from '../../components/Media/ImageGalleryButton';
type PropsType = {
navigation: StackNavigationProp,
route: {params: {data: PlanningEventType, id: number, eventId: number}},
navigation: StackNavigationProp<any>;
route: {params: {data: PlanningEventType; id: number; eventId: number}};
};
type StateType = {
loading: boolean,
loading: boolean;
};
const EVENT_INFO_URL = 'event/info';
@ -111,22 +111,23 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
*
* @returns {*}
*/
getContent(): React.Node {
const {navigation} = this.props;
getContent() {
const {displayData} = this;
if (displayData == null) return null;
if (displayData == null) {
return null;
}
let subtitle = getTimeOnlyString(displayData.date_begin);
const dateString = getDateOnlyString(displayData.date_begin);
if (dateString !== null && subtitle != null)
if (dateString !== null && subtitle != null) {
subtitle += ` | ${DateManager.getInstance().getTranslatedDate(
dateString,
)}`;
}
return (
<CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
<Card.Title title={displayData.title} subtitle={subtitle} />
{displayData.logo !== null ? (
<ImageGalleryButton
navigation={navigation}
images={[{url: displayData.logo}]}
style={{
width: 300,
@ -154,9 +155,9 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
*
* @returns {*}
*/
getErrorView(): React.Node {
getErrorView() {
const {navigation} = this.props;
if (this.errorCode === ERROR_TYPE.BAD_INPUT)
if (this.errorCode === ERROR_TYPE.BAD_INPUT) {
return (
<ErrorView
navigation={navigation}
@ -165,6 +166,7 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
icon="calendar-remove"
/>
);
}
return (
<ErrorView
navigation={navigation}
@ -179,15 +181,19 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
*/
fetchData = () => {
this.setState({loading: true});
apiRequest(EVENT_INFO_URL, 'POST', {id: this.eventId})
apiRequest<PlanningEventType>(EVENT_INFO_URL, 'POST', {id: this.eventId})
.then(this.onFetchSuccess)
.catch(this.onFetchError);
};
render(): React.Node {
render() {
const {loading} = this.state;
if (loading) return <BasicLoadingScreen />;
if (this.errorCode === 0) return this.getContent();
if (loading) {
return <BasicLoadingScreen />;
}
if (this.errorCode === 0) {
return this.getContent();
}
return this.getErrorView();
}
}

View file

@ -17,8 +17,6 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
// @flow
import * as React from 'react';
import {BackHandler, View} from 'react-native';
import i18n from 'i18n-js';
@ -26,12 +24,12 @@ import {Agenda, LocaleConfig} from 'react-native-calendars';
import {Avatar, Divider, List} from 'react-native-paper';
import {StackNavigationProp} from '@react-navigation/stack';
import {readData} from '../../utils/WebData';
import type {PlanningEventType} from '../../utils/Planning';
import {
generateEventAgenda,
getCurrentDateString,
getDateOnlyString,
getTimeOnlyString,
PlanningEventType,
} from '../../utils/Planning';
import CustomAgenda from '../../components/Overrides/CustomAgenda';
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
@ -77,17 +75,16 @@ LocaleConfig.locales.fr = {
'Samedi',
],
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: "Aujourd'hui",
};
type PropsType = {
navigation: StackNavigationProp,
navigation: StackNavigationProp<any>;
};
type StateType = {
refreshing: boolean,
agendaItems: {[key: string]: Array<PlanningEventType>},
calendarShowing: boolean,
refreshing: boolean;
agendaItems: {[key: string]: Array<PlanningEventType>};
calendarShowing: boolean;
};
const FETCH_URL = 'https://www.amicale-insat.fr/api/event/list';
@ -97,19 +94,22 @@ const AGENDA_MONTH_SPAN = 3;
* Class defining the app's planning screen
*/
class PlanningScreen extends React.Component<PropsType, StateType> {
agendaRef: null | Agenda;
agendaRef: null | Agenda<any>;
lastRefresh: Date;
lastRefresh: Date | null;
minTimeBetweenRefresh = 60;
currentDate = getDateOnlyString(getCurrentDateString());
currentDate: string | null;
constructor(props: PropsType) {
super(props);
if (i18n.currentLocale().startsWith('fr')) {
LocaleConfig.defaultLocale = 'fr';
}
this.agendaRef = null;
this.currentDate = getDateOnlyString(getCurrentDateString());
this.lastRefresh = null;
this.state = {
refreshing: false,
agendaItems: {},
@ -145,6 +145,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
onBackButtonPressAndroid = (): boolean => {
const {calendarShowing} = this.state;
if (calendarShowing && this.agendaRef != null) {
// @ts-ignore
this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
return true;
}
@ -156,11 +157,13 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
*/
onRefresh = () => {
let canRefresh;
if (this.lastRefresh !== undefined)
if (this.lastRefresh) {
canRefresh =
(new Date().getTime() - this.lastRefresh.getTime()) / 1000 >
this.minTimeBetweenRefresh;
else canRefresh = true;
} else {
canRefresh = true;
}
if (canRefresh) {
this.setState({refreshing: true});
@ -185,7 +188,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
*
* @param ref
*/
onAgendaRef = (ref: Agenda) => {
onAgendaRef = (ref: Agenda<any>) => {
this.agendaRef = ref;
};
@ -204,23 +207,24 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
* @param item The current event to render
* @return {*}
*/
getRenderItem = (item: PlanningEventType): React.Node => {
getRenderItem = (item: PlanningEventType) => {
const {navigation} = this.props;
const onPress = () => {
navigation.navigate('planning-information', {
data: item,
});
};
if (item.logo !== null) {
const logo = item.logo;
if (logo) {
return (
<View>
<Divider />
<List.Item
title={item.title}
description={getTimeOnlyString(item.date_begin)}
left={(): React.Node => (
left={() => (
<Avatar.Image
source={{uri: item.logo}}
source={{uri: logo}}
style={{backgroundColor: 'transparent'}}
/>
)}
@ -246,23 +250,22 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
*
* @return {*}
*/
getRenderEmptyDate = (): React.Node => <Divider />;
getRenderEmptyDate = () => <Divider />;
render(): React.Node {
render() {
const {state, props} = this;
return (
<View style={{flex: 1}}>
<CustomAgenda
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={state.agendaItems}
// initially selected day
selected={this.currentDate}
selected={this.currentDate ? this.currentDate : undefined}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={this.currentDate}
minDate={this.currentDate ? this.currentDate : undefined}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={1}
// Max amount of months allowed to scroll to the future. Default = 50
@ -279,6 +282,9 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
firstDay={1}
// ref to this agenda in order to handle back button event
onRef={this.onAgendaRef}
rowHasChanged={(r1: PlanningEventType, r2: PlanningEventType) =>
r1.id !== r2.id
}
/>
<MascotPopup
prefKey={AsyncStorageManager.PREFERENCES.eventsShowMascot.key}
@ -286,7 +292,6 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
message={i18n.t('screens.planning.mascotDialog.message')}
icon="party-popper"
buttons={{
action: null,
cancel: {
message: i18n.t('screens.planning.mascotDialog.button'),
icon: 'check',