ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Fixed feed item size and display all data on click

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-12 20:45:03 +02:00
parent 3d57361908
commit fa42f09efb
6 changed files with 166 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Home/ActionsDashboardItem.js
View file

@ -21,7 +21,6 @@ class ActionsDashBoardItem extends React.Component<Props> {
gotToSettings = () => this.props.navigation.navigate("settings");
render() {
console.log('render action dashboard');
return (
<Card style={{
...styles.card,

59
src/components/Home/FeedItem.js
View file

@ -8,12 +8,11 @@ import ImageModal from 'react-native-image-modal';
const ICON_AMICALE = require('../../../assets/amicale.png');
type Props = {
navigation: Object,
theme: Object,
title: string,
subtitle: string,
full_picture: string,
message: string,
onOutLinkPress: Function,
height: number,
}
@ -38,42 +37,68 @@ class FeedItem extends React.Component<Props> {
);
}
onPress = () => {
this.props.navigation.navigate('feed-information',
{
data: this.props.item,
date: this.props.subtitle
})
};
render() {
console.log('render feed');
const item = this.props.item;
const hasImage = item.full_picture !== '' && item.full_picture !== undefined;
const cardMargin = 10;
const cardHeight = this.props.height - 2 * cardMargin;
const imageSize = 250;
const titleHeight = 80;
const actionsHeight = 48;
const textHeight = hasImage
? cardHeight - titleHeight - actionsHeight - imageSize
: cardHeight - titleHeight - actionsHeight;
return (
<Card style={{margin: 10}}>
<Card
style={{
margin: cardMargin,
height: cardHeight,
}}
onPress={this.onPress}
>
<Card.Title
title={this.props.title}
subtitle={this.props.subtitle}
left={this.getAvatar}
style={{height: titleHeight}}
/>
{this.props.full_picture !== '' && this.props.full_picture !== undefined ?
{hasImage ?
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={"#000"}
style={{
width: 250,
height: 250,
width: imageSize,
height: imageSize,
}}
source={{
uri: this.props.full_picture,
uri: item.full_picture,
}}
/></View> : <View/>}
/></View> : null}
<Card.Content>
{this.props.message !== undefined ?
{item.message !== undefined ?
<Autolink
text={this.props.message}
text={item.message}
hashtag="facebook"
component={Text}
/> : <View/>
style={{height: textHeight}}
/> : null
}
</Card.Content>
<Card.Actions>
<Card.Actions style={{height: actionsHeight}}>
<Button
color={'#57aeff'}
onPress={this.props.onOutLinkPress}
icon={'facebook'}>
onPress={this.onPress}
icon={'plus'}
style={{marginLeft: 'auto'}}>
{i18n.t('homeScreen.dashboard.seeMore')}
</Button>
</Card.Actions>

10
src/components/Lists/WebSectionList.js
View file

@ -164,7 +164,11 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
*/
hideSnackBar = () => this.setState({snackbarVisible: false});
itemLayout = (data, index) => ({length: this.props.itemHeight, offset: this.props.itemHeight * index, index});
itemLayout = (data: Object, index: number) => ({
length: this.props.itemHeight,
offset: this.props.itemHeight * index,
index
});
render() {
let dataset = [];
@ -197,6 +201,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
errorCode={ERROR_TYPE.CONNECTION_ERROR}
onRefresh={this.onRefresh}/>
}
removeClippedSubviews={true}
getItemLayout={this.props.itemHeight !== null ? this.itemLayout : undefined}
/>
<Snackbar
@ -204,7 +209,8 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
onDismiss={this.hideSnackBar}
action={{
label: 'OK',
onPress: () => {},
onPress: () => {
},
}}
duration={4000}
>

11
src/navigation/MainTabNavigator.js
View file

@ -18,6 +18,7 @@ import i18n from "i18n-js";
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
import ScannerScreen from "../screens/ScannerScreen";
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
import FeedItemScreen from "../screens/FeedItemScreen";
const TAB_ICONS = {
@ -188,6 +189,16 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
};
}}
/>
<HomeStack.Screen
name="feed-information"
component={FeedItemScreen}
options={({navigation}) => {
return {
title: 'FEEEEED',
...TransitionPresets.ModalSlideFromBottomIOS,
};
}}
/>
<HomeStack.Screen
name="scanner"
component={ScannerScreen}

98
src/screens/FeedItemScreen.js Normal file
View file

@ -0,0 +1,98 @@
// @flow
import * as React from 'react';
import {ScrollView, View} from 'react-native';
import {Avatar, Card, Text, withTheme} from 'react-native-paper';
import ImageModal from 'react-native-image-modal';
import Autolink from "react-native-autolink";
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
import {Linking} from "expo";
type Props = {
navigation: Object,
route: Object
};
const ICON_AMICALE = require('../../assets/amicale.png');
const NAME_AMICALE = 'Amicale INSA Toulouse';
/**
* Class defining a planning event information page.
*/
class FeedItemScreen extends React.Component<Props> {
displayData: Object;
date: string;
colors: Object;
constructor(props) {
super(props);
this.colors = props.theme.colors;
this.displayData = this.props.route.params.data;
this.date = this.props.route.params.date;
}
componentDidMount() {
this.props.navigation.setOptions({
headerRight: this.getHeaderButton,
});
}
onOutLinkPress = () => {
Linking.openURL(this.displayData.permalink_url);
};
getHeaderButton = () => {
return <MaterialHeaderButtons>
<Item title="main" iconName={'facebook'} onPress={this.onOutLinkPress}/>
</MaterialHeaderButtons>;
};
getAvatar() {
return (
<Avatar.Image size={48} source={ICON_AMICALE}
style={{backgroundColor: 'transparent'}}/>
);
}
getContent() {
const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture !== undefined;
return (
<ScrollView style={{margin: 5}}>
<Card.Title
title={NAME_AMICALE}
subtitle={this.date}
left={this.getAvatar}
/>
{hasImage ?
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={"#000"}
style={{
width: 250,
height: 250,
}}
source={{
uri: this.displayData.full_picture,
}}
/></View> : null}
<Card.Content>
{this.displayData.message !== undefined ?
<Autolink
text={this.displayData.message}
hashtag="facebook"
component={Text}
/> : null
}
</Card.Content>
</ScrollView>
);
}
render() {
return this.getContent();
}
}
export default withTheme(FeedItemScreen);

13
src/screens/HomeScreen.js
View file

@ -14,12 +14,12 @@ import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
import ConnectionManager from "../managers/ConnectionManager";
import {CommonActions} from '@react-navigation/native';
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
import {Linking} from "expo";
// import DATA from "../dashboard_data.json";
const NAME_AMICALE = 'Amicale INSA Toulouse';
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json";
const FEED_ITEM_HEIGHT = 500;
const SECTIONS_ID = [
'dashboard',
@ -415,14 +415,13 @@ class HomeScreen extends React.Component<Props> {
* @return {*}
*/
getFeedItem(item: Object) {
const onOutLinkPress = () => Linking.openURL(item.permalink_url);
return (
<FeedItem
{...this.props}
item={item}
title={NAME_AMICALE}
subtitle={HomeScreen.getFormattedDate(item.created_time)}
full_picture={item.full_picture}
message={item.message}
onOutLinkPress={onOutLinkPress}
height={FEED_ITEM_HEIGHT}
/>
);
}
@ -452,7 +451,9 @@ class HomeScreen extends React.Component<Props> {
autoRefreshTime={REFRESH_TIME}
refreshOnFocus={true}
fetchUrl={DATA_URL}
renderItem={this.getRenderItem}/>
renderItem={this.getRenderItem}
itemHeight={FEED_ITEM_HEIGHT}
/>
<FAB
style={styles.fab}
icon="qrcode-scan"