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

Update clubs screens to use TypeScript

Browse source
This commit is contained in:
Arnaud Vergnet 2020-09-22 19:08:44 +02:00
parent f7e767748a
commit 5977ce257b
5 changed files with 158 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Lists/Clubs/ClubListItem.tsx
View file

@ -27,7 +27,7 @@ import type {
type PropsType = { type PropsType = {
onPress: () => void; onPress: () => void;
categoryTranslator: (id: number) => ClubCategoryType; categoryTranslator: (id: number) => ClubCategoryType | null;
item: ClubType; item: ClubType;
height: number; height: number;
theme: ReactNativePaper.Theme; theme: ReactNativePaper.Theme;
@ -50,14 +50,16 @@ class ClubListItem extends React.Component<PropsType> {
const final: Array<React.ReactNode> = []; const final: Array<React.ReactNode> = [];
categories.forEach((cat: number | null) => { categories.forEach((cat: number | null) => {
if (cat != null) { if (cat != null) {
const category: ClubCategoryType = props.categoryTranslator(cat); const category = props.categoryTranslator(cat);
final.push( if (category) {
<Chip final.push(
style={{marginRight: 5, marginBottom: 5}} <Chip
key={`${props.item.id}:${category.id}`}> style={{marginRight: 5, marginBottom: 5}}
{category.name} key={`${props.item.id}:${category.id}`}>
</Chip>, {category.name}
); </Chip>,
);
}
} }
}); });
return <View style={{flexDirection: 'row'}}>{final}</View>; return <View style={{flexDirection: 'row'}}>{final}</View>;

72
src/screens/Amicale/Clubs/ClubAboutScreen.js
View file

@ -1,72 +0,0 @@
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
// @flow
import * as React from 'react';
import {Image, View} from 'react-native';
import {Card, Avatar, Text, withTheme} from 'react-native-paper';
import i18n from 'i18n-js';
import Autolink from 'react-native-autolink';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
import AMICALE_ICON from '../../../../assets/amicale.png';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
const CONTACT_LINK = 'clubs@amicale-insat.fr';
// eslint-disable-next-line react/prefer-stateless-function
class ClubAboutScreen extends React.Component<null> {
render(): React.Node {
return (
<CollapsibleScrollView style={{padding: 5}}>
<View
style={{
width: '100%',
height: 100,
marginTop: 20,
marginBottom: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={AMICALE_ICON}
style={{flex: 1, resizeMode: 'contain'}}
resizeMode="contain"
/>
</View>
<Text>{i18n.t('screens.clubs.about.text')}</Text>
<Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.clubs.about.title')}
subtitle={i18n.t('screens.clubs.about.subtitle')}
left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="information" />
)}
/>
<Card.Content>
<Text>{i18n.t('screens.clubs.about.message')}</Text>
<Autolink text={CONTACT_LINK} component={Text} />
</Card.Content>
</Card>
</CollapsibleScrollView>
);
}
}
export default withTheme(ClubAboutScreen);

66
src/screens/Amicale/Clubs/ClubAboutScreen.tsx Normal file
View file

@ -0,0 +1,66 @@
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import {Image, View} from 'react-native';
import {Card, Avatar, Text} from 'react-native-paper';
import i18n from 'i18n-js';
import Autolink from 'react-native-autolink';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
const AMICALE_ICON = require('../../../../assets/amicale.png');
const CONTACT_LINK = 'clubs@amicale-insat.fr';
function ClubAboutScreen() {
return (
<CollapsibleScrollView style={{padding: 5}}>
<View
style={{
width: '100%',
height: 100,
marginTop: 20,
marginBottom: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={AMICALE_ICON}
style={{flex: 1, resizeMode: 'contain'}}
resizeMode="contain"
/>
</View>
<Text>{i18n.t('screens.clubs.about.text')}</Text>
<Card style={{margin: 5}}>
<Card.Title
title={i18n.t('screens.clubs.about.title')}
subtitle={i18n.t('screens.clubs.about.subtitle')}
left={(iconProps) => (
<Avatar.Icon size={iconProps.size} icon="information" />
)}
/>
<Card.Content>
<Text>{i18n.t('screens.clubs.about.message')}</Text>
<Autolink<typeof Text> text={CONTACT_LINK} component={Text} />
</Card.Content>
</Card>
</CollapsibleScrollView>
);
}
export default ClubAboutScreen;

88
src/screens/Amicale/Clubs/ClubDisplayScreen.js → src/screens/Amicale/Clubs/ClubDisplayScreen.tsx
View file

@ -17,8 +17,6 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @flow
import * as React from 'react'; import * as React from 'react';
import {Linking, View} from 'react-native'; import {Linking, View} from 'react-native';
import { import {
@ -35,24 +33,20 @@ import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen
import CustomHTML from '../../../components/Overrides/CustomHTML'; import CustomHTML from '../../../components/Overrides/CustomHTML';
import CustomTabBar from '../../../components/Tabbar/CustomTabBar'; import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
import type {ClubCategoryType, ClubType} from './ClubListScreen'; import type {ClubCategoryType, ClubType} from './ClubListScreen';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import {ERROR_TYPE} from '../../../utils/WebData'; import {ERROR_TYPE} from '../../../utils/WebData';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView'; import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
import type {ApiGenericDataType} from '../../../utils/WebData';
import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
import ImageGalleryButton from '../../../components/Media/ImageGalleryButton'; import ImageGalleryButton from '../../../components/Media/ImageGalleryButton';
type PropsType = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp<any>;
route: { route: {
params?: { params?: {
data?: ClubType, data?: ClubType;
categories?: Array<ClubCategoryType>, categories?: Array<ClubCategoryType>;
clubId?: number, clubId?: number;
}, };
... };
}, theme: ReactNativePaper.Theme;
theme: CustomThemeType,
}; };
const AMICALE_MAIL = 'clubs@amicale-insat.fr'; const AMICALE_MAIL = 'clubs@amicale-insat.fr';
@ -73,21 +67,20 @@ class ClubDisplayScreen extends React.Component<PropsType> {
constructor(props: PropsType) { constructor(props: PropsType) {
super(props); super(props);
if (props.route.params != null) { this.displayData = null;
if ( this.categories = null;
props.route.params.data != null && this.clubId = props.route.params?.clubId ? props.route.params.clubId : 0;
props.route.params.categories != null this.shouldFetchData = true;
) {
this.displayData = props.route.params.data; if (
this.categories = props.route.params.categories; props.route.params &&
this.clubId = props.route.params.data.id; props.route.params.data &&
this.shouldFetchData = false; props.route.params.categories
} else if (props.route.params.clubId != null) { ) {
this.displayData = null; this.displayData = props.route.params.data;
this.categories = null; this.categories = props.route.params.categories;
this.clubId = props.route.params.clubId; this.clubId = props.route.params.data.id;
this.shouldFetchData = true; this.shouldFetchData = false;
}
} }
} }
@ -101,7 +94,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
let categoryName = ''; let categoryName = '';
if (this.categories !== null) { if (this.categories !== null) {
this.categories.forEach((item: ClubCategoryType) => { this.categories.forEach((item: ClubCategoryType) => {
if (id === item.id) categoryName = item.name; if (id === item.id) {
categoryName = item.name;
}
}); });
} }
return categoryName; return categoryName;
@ -113,10 +108,12 @@ class ClubDisplayScreen extends React.Component<PropsType> {
* @param categories The categories to display (max 2) * @param categories The categories to display (max 2)
* @returns {null|*} * @returns {null|*}
*/ */
getCategoriesRender(categories: Array<number | null>): React.Node { getCategoriesRender(categories: Array<number | null>) {
if (this.categories == null) return null; if (this.categories == null) {
return null;
}
const final = []; const final: Array<React.ReactNode> = [];
categories.forEach((cat: number | null) => { categories.forEach((cat: number | null) => {
if (cat != null) { if (cat != null) {
final.push( final.push(
@ -136,9 +133,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
* @param email The club contact email * @param email The club contact email
* @returns {*} * @returns {*}
*/ */
getManagersRender(managers: Array<string>, email: string | null): React.Node { getManagersRender(managers: Array<string>, email: string | null) {
const {props} = this; const {props} = this;
const managersListView = []; const managersListView: Array<React.ReactNode> = [];
managers.forEach((item: string) => { managers.forEach((item: string) => {
managersListView.push(<Paragraph key={item}>{item}</Paragraph>); managersListView.push(<Paragraph key={item}>{item}</Paragraph>);
}); });
@ -153,7 +150,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
? i18n.t('screens.clubs.managersSubtitle') ? i18n.t('screens.clubs.managersSubtitle')
: i18n.t('screens.clubs.managersUnavailable') : i18n.t('screens.clubs.managersUnavailable')
} }
left={(iconProps: CardTitleIconPropsType): React.Node => ( left={(iconProps) => (
<Avatar.Icon <Avatar.Icon
size={iconProps.size} size={iconProps.size}
style={{backgroundColor: 'transparent'}} style={{backgroundColor: 'transparent'}}
@ -181,10 +178,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
* @param hasManagers True if the club has managers * @param hasManagers True if the club has managers
* @returns {*} * @returns {*}
*/ */
static getEmailButton( static getEmailButton(email: string | null, hasManagers: boolean) {
email: string | null,
hasManagers: boolean,
): React.Node {
const destinationEmail = const destinationEmail =
email != null && hasManagers ? email : AMICALE_MAIL; email != null && hasManagers ? email : AMICALE_MAIL;
const text = const text =
@ -206,20 +200,15 @@ class ClubDisplayScreen extends React.Component<PropsType> {
); );
} }
getScreen = (response: Array<ApiGenericDataType | null>): React.Node => { getScreen = (response: Array<ClubType | null>) => {
const {navigation} = this.props; let data: ClubType | null = response[0];
let data: ClubType | null = null;
if (response[0] != null) {
[data] = response;
this.updateHeaderTitle(data);
}
if (data != null) { if (data != null) {
this.updateHeaderTitle(data);
return ( return (
<CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab> <CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
{this.getCategoriesRender(data.category)} {this.getCategoriesRender(data.category)}
{data.logo !== null ? ( {data.logo !== null ? (
<ImageGalleryButton <ImageGalleryButton
navigation={navigation}
images={[{url: data.logo}]} images={[{url: data.logo}]}
style={{ style={{
width: 300, width: 300,
@ -259,9 +248,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
props.navigation.setOptions({title: data.name}); props.navigation.setOptions({title: data.name});
} }
render(): React.Node { render() {
const {props} = this; const {props} = this;
if (this.shouldFetchData) if (this.shouldFetchData) {
return ( return (
<AuthenticatedScreen <AuthenticatedScreen
navigation={props.navigation} navigation={props.navigation}
@ -283,6 +272,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
]} ]}
/> />
); );
}
return this.getScreen([this.displayData]); return this.getScreen([this.displayData]);
} }
} }

76
src/screens/Amicale/Clubs/ClubListScreen.js → src/screens/Amicale/Clubs/ClubListScreen.tsx
View file

@ -17,8 +17,6 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @flow
import * as React from 'react'; import * as React from 'react';
import {Platform} from 'react-native'; import {Platform} from 'react-native';
import {Searchbar} from 'react-native-paper'; import {Searchbar} from 'react-native-paper';
@ -34,27 +32,27 @@ import MaterialHeaderButtons, {
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList'; import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
export type ClubCategoryType = { export type ClubCategoryType = {
id: number, id: number;
name: string, name: string;
}; };
export type ClubType = { export type ClubType = {
id: number, id: number;
name: string, name: string;
description: string, description: string;
logo: string, logo: string;
email: string | null, email: string | null;
category: Array<number | null>, category: Array<number | null>;
responsibles: Array<string>, responsibles: Array<string>;
}; };
type PropsType = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp<any>;
}; };
type StateType = { type StateType = {
currentlySelectedCategories: Array<number>, currentlySelectedCategories: Array<number>;
currentSearchString: string, currentSearchString: string;
}; };
const LIST_ITEM_HEIGHT = 96; const LIST_ITEM_HEIGHT = 96;
@ -62,8 +60,9 @@ const LIST_ITEM_HEIGHT = 96;
class ClubListScreen extends React.Component<PropsType, StateType> { class ClubListScreen extends React.Component<PropsType, StateType> {
categories: Array<ClubCategoryType>; categories: Array<ClubCategoryType>;
constructor() { constructor(props: PropsType) {
super(); super(props);
this.categories = [];
this.state = { this.state = {
currentlySelectedCategories: [], currentlySelectedCategories: [],
currentSearchString: '', currentSearchString: '',
@ -114,7 +113,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
* *
* @return {*} * @return {*}
*/ */
getSearchBar = (): React.Node => { getSearchBar = () => {
return ( return (
<Searchbar <Searchbar
placeholder={i18n.t('screens.proximo.search')} placeholder={i18n.t('screens.proximo.search')}
@ -131,7 +130,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
* Gets the header button * Gets the header button
* @return {*} * @return {*}
*/ */
getHeaderButtons = (): React.Node => { getHeaderButtons = () => {
const onPress = () => { const onPress = () => {
const {props} = this; const {props} = this;
props.navigation.navigate('club-about'); props.navigation.navigate('club-about');
@ -145,12 +144,12 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
getScreen = ( getScreen = (
data: Array<{ data: Array<{
categories: Array<ClubCategoryType>, categories: Array<ClubCategoryType>;
clubs: Array<ClubType>, clubs: Array<ClubType>;
} | null>, } | null>,
): React.Node => { ) => {
let categoryList = []; let categoryList: Array<ClubCategoryType> = [];
let clubList = []; let clubList: Array<ClubType> = [];
if (data[0] != null) { if (data[0] != null) {
categoryList = data[0].categories; categoryList = data[0].categories;
clubList = data[0].clubs; clubList = data[0].clubs;
@ -174,7 +173,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
* *
* @returns {*} * @returns {*}
*/ */
getListHeader(): React.Node { getListHeader() {
const {state} = this; const {state} = this;
return ( return (
<ClubListHeader <ClubListHeader
@ -194,12 +193,14 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
getCategoryOfId = (id: number): ClubCategoryType | null => { getCategoryOfId = (id: number): ClubCategoryType | null => {
let cat = null; let cat = null;
this.categories.forEach((item: ClubCategoryType) => { this.categories.forEach((item: ClubCategoryType) => {
if (id === item.id) cat = item; if (id === item.id) {
cat = item;
}
}); });
return cat; return cat;
}; };
getRenderItem = ({item}: {item: ClubType}): React.Node => { getRenderItem = ({item}: {item: ClubType}) => {
const onPress = () => { const onPress = () => {
this.onListItemPress(item); this.onListItemPress(item);
}; };
@ -219,9 +220,9 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
keyExtractor = (item: ClubType): string => item.id.toString(); keyExtractor = (item: ClubType): string => item.id.toString();
itemLayout = ( itemLayout = (
data: {...}, data: Array<ClubType> | null | undefined,
index: number, index: number,
): {length: number, offset: number, index: number} => ({ ): {length: number; offset: number; index: number} => ({
length: LIST_ITEM_HEIGHT, length: LIST_ITEM_HEIGHT,
offset: LIST_ITEM_HEIGHT * index, offset: LIST_ITEM_HEIGHT * index,
index, index,
@ -240,17 +241,23 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
const {state} = this; const {state} = this;
const newCategoriesState = [...state.currentlySelectedCategories]; const newCategoriesState = [...state.currentlySelectedCategories];
let newStrState = state.currentSearchString; let newStrState = state.currentSearchString;
if (filterStr !== null) newStrState = filterStr; if (filterStr !== null) {
newStrState = filterStr;
}
if (categoryId !== null) { if (categoryId !== null) {
const index = newCategoriesState.indexOf(categoryId); const index = newCategoriesState.indexOf(categoryId);
if (index === -1) newCategoriesState.push(categoryId); if (index === -1) {
else newCategoriesState.splice(index, 1); newCategoriesState.push(categoryId);
} else {
newCategoriesState.splice(index, 1);
}
} }
if (filterStr !== null || categoryId !== null) if (filterStr !== null || categoryId !== null) {
this.setState({ this.setState({
currentSearchString: newStrState, currentSearchString: newStrState,
currentlySelectedCategories: newCategoriesState, currentlySelectedCategories: newCategoriesState,
}); });
}
} }
/** /**
@ -264,12 +271,13 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
let shouldRender = let shouldRender =
state.currentlySelectedCategories.length === 0 || state.currentlySelectedCategories.length === 0 ||
isItemInCategoryFilter(state.currentlySelectedCategories, item.category); isItemInCategoryFilter(state.currentlySelectedCategories, item.category);
if (shouldRender) if (shouldRender) {
shouldRender = stringMatchQuery(item.name, state.currentSearchString); shouldRender = stringMatchQuery(item.name, state.currentSearchString);
}
return shouldRender; return shouldRender;
} }
render(): React.Node { render() {
const {props} = this; const {props} = this;
return ( return (
<AuthenticatedScreen <AuthenticatedScreen