Added club list

This commit is contained in:
Arnaud Vergnet 2020-04-02 19:19:30 +02:00
parent 754c43a81a
commit a42d743aeb
4 changed files with 264 additions and 0 deletions

View file

@ -64,6 +64,12 @@ class SideBar extends React.PureComponent<Props, State> {
icon: "account", icon: "account",
onlyWhenLoggedIn: true, onlyWhenLoggedIn: true,
}, },
{
name: "CLUBS",
route: "ClubListScreen",
icon: "account-group",
onlyWhenLoggedIn: true,
},
{ {
name: i18n.t('screens.logout'), name: i18n.t('screens.logout'),
route: 'disconnect', route: 'disconnect',

View file

@ -17,6 +17,8 @@ import HeaderButton from "../components/Custom/HeaderButton";
import i18n from "i18n-js"; import i18n from "i18n-js";
import LoginScreen from "../screens/Amicale/LoginScreen"; import LoginScreen from "../screens/Amicale/LoginScreen";
import ProfileScreen from "../screens/Amicale/ProfileScreen"; import ProfileScreen from "../screens/Amicale/ProfileScreen";
import ClubListScreen from "../screens/Amicale/ClubListScreen";
import ClubDisplayScreen from "../screens/Amicale/ClubDisplayScreen";
const defaultScreenOptions = { const defaultScreenOptions = {
gestureEnabled: true, gestureEnabled: true,
@ -236,6 +238,43 @@ function ProfileStackComponent() {
); );
} }
const ClubStack = createStackNavigator();
function ClubStackComponent() {
return (
<ClubStack.Navigator
initialRouteName="ClubListScreen"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<ClubStack.Screen
name="ClubListScreen"
component={ClubListScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: "CLUBS LIST",
headerLeft: openDrawer
};
}}
/>
<ClubStack.Screen
name="ClubDisplayScreen"
component={ClubDisplayScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: "CLUBS DISPLAY",
headerLeft: openDrawer,
...TransitionPresets.ModalSlideFromBottomIOS,
};
}}
/>
</ClubStack.Navigator>
);
}
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
function getDrawerContent(props) { function getDrawerContent(props) {
@ -289,6 +328,10 @@ export default function DrawerNavigator() {
name="ProfileScreen" name="ProfileScreen"
component={ProfileStackComponent} component={ProfileStackComponent}
/> />
<Drawer.Screen
name="ClubListScreen"
component={ClubStackComponent}
/>
</Drawer.Navigator> </Drawer.Navigator>
); );
} }

View file

@ -0,0 +1,113 @@
// @flow
import * as React from 'react';
import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
import HTML from "react-native-render-html";
import {Linking} from "expo";
import {Avatar, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
import ImageView from "react-native-image-viewing";
type Props = {
navigation: Object,
route: Object
};
type State = {
imageModalVisible: boolean,
};
function openWebLink(event, link) {
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
}
/**
* Class defining a planning event information page.
*/
class ClubDisplayScreen extends React.Component<Props, State> {
displayData = this.props.route.params['data'];
colors: Object;
state = {
imageModalVisible: false,
};
constructor(props) {
super(props);
this.colors = props.theme.colors;
}
componentDidMount(): * {
this.props.navigation.setOptions({title: this.displayData.name})
}
showImageModal = () => {
this.setState({imageModalVisible: true});
};
hideImageModal = () => {
this.setState({imageModalVisible: false});
};
getResponsiblesRender(resp: Array<string>) {
let final = [];
for (let i = 0; i < resp.length; i++) {
final.push(<Paragraph>{resp[i]}</Paragraph>)
}
return (
<Card style={{marginTop: 10, marginBottom: 10}}>
<Card.Title
title={"RESPO"}
subtitle={"CONTACTS"}
left={(props) => <Avatar.Icon
style={{backgroundColor: 'transparent'}}
{...props}
icon="account-tie" />}
/>
<Card.Content>
{final}
</Card.Content>
</Card>
);
}
render() {
return (
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
{this.displayData.logo !== null ?
<TouchableOpacity
onPress={this.showImageModal}
style={{width: '100%', height: 300, marginBottom: 10}}>
<Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.displayData.logo}}/>
</TouchableOpacity>
: <View/>}
{this.displayData.description !== null ?
// Surround description with div to allow text styling if the description is not html
<Card.Content>
<HTML html={"<div>" + this.displayData.description + "</div>"}
tagsStyles={{
p: {color: this.colors.text,},
div: {color: this.colors.text}
}}
onLinkPress={openWebLink}/>
</Card.Content>
: <View/>}
{this.getResponsiblesRender(this.displayData.responsibles)}
<Portal>
<ImageView
images={[{uri: this.displayData.logo}]}
imageIndex={0}
presentationStyle={"fullScreen"}
visible={this.state.imageModalVisible}
onRequestClose={this.hideImageModal}
/>
</Portal>
</ScrollView>
);
}
}
export default withTheme(ClubDisplayScreen);

View file

@ -0,0 +1,102 @@
// @flow
import * as React from 'react';
import {View} from "react-native";
import {Avatar, Chip, List, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import PureFlatList from "../../components/Lists/PureFlatList";
type Props = {
navigation: Object,
theme: Object,
}
type State = {}
class ClubListScreen extends React.Component<Props, State> {
state = {};
colors: Object;
getRenderItem: Function;
categories: Array<Object>;
constructor(props) {
super(props);
this.colors = props.theme.colors;
}
keyExtractor = (item: Object) => {
return item.name + item.logo;
};
getScreen = (data: Object) => {
this.categories = data.categories;
return (
<PureFlatList
data={data.clubs}
keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem}
updateData={0}
/>
)
};
getCategoryName(id: number) {
for (let i = 0; i < this.categories.length; i++) {
if (id === this.categories[i].id)
return this.categories[i].name;
}
return "";
}
getCategoriesRender(categories: Array<number|null>) {
let final = [];
for (let i = 0; i < categories.length; i++) {
if (categories[i] !== null)
final.push(<Chip style={{marginRight: 5}}>{this.getCategoryName(categories[i])}</Chip>);
}
return <View style={{flexDirection: 'row'}}>{final}</View>;
}
getRenderItem = ({item}: Object) => {
const onPress = this.onListItemPress.bind(this, item);
const categoriesRender = this.getCategoriesRender.bind(this, item.category);
return (
<List.Item
title={item.name}
description={categoriesRender}
onPress={onPress}
left={(props) => <Avatar.Image
{...props}
style={{backgroundColor: 'transparent'}}
size={64}
source={{uri: item.logo}}/>}
/>
);
};
/**
* Callback used when clicking an article in the list.
* It opens the modal to show detailed information about the article
*
* @param item The article pressed
*/
onListItemPress(item: Object) {
this.props.navigation.navigate("ClubDisplayScreen", {data: item});
}
render() {
return (
<AuthenticatedScreen
{...this.props}
link={'https://www.amicale-insat.fr/api/clubs/list'}
renderFunction={this.getScreen}
/>
);
}
}
export default withTheme(ClubListScreen);