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

Improved overall performance by remove FlatList extraData and adding keys

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-04 21:36:58 +02:00
parent ab554cae94
commit 8723765e43
12 changed files with 48 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/Lists/WebSectionList.js
View file

@ -172,6 +172,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
{/*$FlowFixMe*/}
<SectionList
sections={dataset}
extraData={this.props.updateData}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}

5
components/Sidebar/Sidebar.js
View file

@ -19,7 +19,6 @@ type Props = {
};
type State = {
active: string,
isLoggedIn: boolean,
dialogVisible: boolean,
};
@ -156,7 +155,6 @@ class SideBar extends React.PureComponent<Props, State> {
this.colors = props.theme.colors;
ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
this.state = {
active: 'Home',
isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
dialogVisible: false,
};
@ -238,9 +236,10 @@ class SideBar extends React.PureComponent<Props, State> {
style={styles.drawerCover}
/>
</TouchableRipple>
{/*$FlowFixMe*/}
<FlatList
data={this.dataSet}
extraData={this.state}
extraData={this.state.isLoggedIn}
keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem}
/>

20
screens/About/AboutScreen.js
View file

@ -244,9 +244,7 @@ class AboutScreen extends React.Component<Props, State> {
<Card.Content>
<FlatList
data={this.appData}
extraData={this.state}
keyExtractor={this.keyExtractor}
listKey={"app"}
renderItem={this.getCardItem}
/>
</Card.Content>
@ -269,17 +267,15 @@ class AboutScreen extends React.Component<Props, State> {
<Title>{i18n.t('aboutScreen.author')}</Title>
<FlatList
data={this.authorData}
extraData={this.state}
keyExtractor={this.keyExtractor}
listKey={"team1"}
listKey={"1"}
renderItem={this.getCardItem}
/>
<Title>{i18n.t('aboutScreen.additionalDev')}</Title>
<FlatList
data={this.additionalDevData}
extraData={this.state}
keyExtractor={this.keyExtractor}
listKey={"team2"}
listKey={"2"}
renderItem={this.getCardItem}
/>
</Card.Content>
@ -299,9 +295,7 @@ class AboutScreen extends React.Component<Props, State> {
<Title>{i18n.t('aboutScreen.technologies')}</Title>
<FlatList
data={this.technoData}
extraData={this.state}
keyExtractor={this.keyExtractor}
listKey={"techno"}
renderItem={this.getCardItem}
/>
</Card.Content>
@ -404,28 +398,24 @@ class AboutScreen extends React.Component<Props, State> {
<Button
icon="email"
mode="contained"
dark={true}
color={this.colors.primary}
style={{
marginTop: 20,
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={this.onPressMail}>
<Text>{i18n.t('aboutScreen.bugsMail')}</Text>
{i18n.t('aboutScreen.bugsMail')}
</Button>
<Button
icon="git"
mode="contained"
dark={true}
color={this.colors.primary}
style={{
marginTop: 20,
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={this.onPressGit}>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text>
{i18n.t('aboutScreen.bugsGit')}
</Button>
</View>
);
@ -476,8 +466,6 @@ class AboutScreen extends React.Component<Props, State> {
<FlatList
style={{padding: 5}}
data={this.dataOrder}
extraData={this.state}
keyExtractor={(item) => item.id}
renderItem={this.getMainCard}
/>
</View>

14
screens/HomeScreen.js
View file

@ -117,16 +117,6 @@ class HomeScreen extends React.Component<Props> {
this.props.navigation.navigate('SelfMenuScreen');
}
/**
* Extract a key for the given item
*
* @param item The item to extract the key from
* @return {*} The extracted key
*/
getKeyExtractor(item: Object) {
return item !== undefined ? item.id : undefined;
}
/**
* Creates the dataset to be used in the FlatList
*
@ -145,15 +135,11 @@ class HomeScreen extends React.Component<Props> {
{
title: '',
data: dashboardData,
extraData: super.state,
keyExtractor: this.getKeyExtractor,
id: SECTIONS_ID[0]
},
{
title: i18n.t('homeScreen.newsFeed'),
data: newsData,
extraData: super.state,
keyExtractor: this.getKeyExtractor,
id: SECTIONS_ID[1]
}
];

1
screens/Proximo/ProximoMainScreen.js
View file

@ -142,7 +142,6 @@ class ProximoMainScreen extends React.Component<Props, State> {
{
title: '',
data: this.generateData(fetchedData),
extraData: this.state,
keyExtractor: this.getKeyExtractor
}
];

2
screens/Proxiwash/ProxiwashScreen.js
View file

@ -272,14 +272,12 @@ class ProxiwashScreen extends React.Component<Props, State> {
title: i18n.t('proxiwashScreen.dryers'),
icon: 'tumble-dryer',
data: data.dryers === undefined ? [] : data.dryers,
extraData: this.state,
keyExtractor: this.getKeyExtractor
},
{
title: i18n.t('proxiwashScreen.washers'),
icon: 'washing-machine',
data: data.washers === undefined ? [] : data.washers,
extraData: this.state,
keyExtractor: this.getKeyExtractor
},
];

2
screens/SelfMenuScreen.js
View file

@ -56,7 +56,6 @@ class SelfMenuScreen extends React.Component<Props> {
{
title: '',
data: [],
extraData: super.state,
keyExtractor: this.getKeyExtractor
}
];
@ -69,7 +68,6 @@ class SelfMenuScreen extends React.Component<Props> {
{
title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
data: fetchedData[i].meal[0].foodcategory,
extraData: super.state,
keyExtractor: this.getKeyExtractor,
}
);

3
screens/Tetris/GridManager.js
View file

@ -5,7 +5,7 @@ import ScoreManager from "./ScoreManager";
import type {coordinates} from './Shapes/BaseShape';
export type cell = {color: string, isEmpty: boolean};
export type cell = {color: string, isEmpty: boolean, key: string};
export type grid = Array<Array<cell>>;
/**
@ -50,6 +50,7 @@ export default class GridManager {
line.push({
color: this.#colors.tetrisBackground,
isEmpty: true,
key: col.toString(),
});
}
return line;

2
screens/Tetris/Piece.js
View file

@ -57,6 +57,7 @@ export default class Piece {
grid[coord[i].y][coord[i].x] = {
color: this.#colors.tetrisBackground,
isEmpty: true,
key: grid[coord[i].y][coord[i].x].key
};
}
}
@ -73,6 +74,7 @@ export default class Piece {
grid[coord[i].y][coord[i].x] = {
color: this.#currentShape.getColor(),
isEmpty: false,
key: grid[coord[i].y][coord[i].x].key
};
}
}

10
screens/Tetris/components/Cell.js
View file

@ -5,9 +5,7 @@ import {View} from 'react-native';
import {withTheme} from 'react-native-paper';
type Props = {
color: string,
isEmpty: boolean,
id: string,
item: Object
}
class Cell extends React.PureComponent<Props> {
@ -20,17 +18,19 @@ class Cell extends React.PureComponent<Props> {
}
render() {
const item = this.props.item;
return (
<View
style={{
flex: 1,
backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
backgroundColor: item.isEmpty ? 'transparent' : item.color,
borderColor: item.isEmpty ? 'transparent' : this.colors.tetrisBorder,
borderStyle: 'solid',
borderRadius: 2,
borderWidth: 1,
aspectRatio: 1,
}}
key={item.key}
/>
);
}

18
screens/Tetris/components/Grid.js
View file

@ -25,22 +25,24 @@ class Grid extends React.Component<Props>{
}
getRow(rowNumber: number) {
let cells = [];
for (let i = 0; i < this.props.width; i++) {
let cell = this.props.grid[rowNumber][i];
let key = rowNumber + ':' + i;
cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty} id={key}/>);
}
let cells = this.props.grid[rowNumber].map(this.getCellRender);
return (
<View style={{
<View
style={{
flexDirection: 'row',
backgroundColor: this.props.backgroundColor,
}}>
}}
key={rowNumber.toString()}
>
{cells}
</View>
);
}
getCellRender = (item: Object) => {
return <Cell item={item} key={item.key}/>;
};
getGrid() {
let rows = [];
for (let i = 0; i < this.props.height; i++) {

21
screens/Tetris/components/Preview.js
View file

@ -22,19 +22,24 @@ class Preview extends React.PureComponent<Props> {
let grids = [];
for (let i = 0; i < this.props.next.length; i++) {
grids.push(
<Grid
width={this.props.next[i][0].length}
height={this.props.next[i].length}
grid={this.props.next[i]}
containerMaxHeight={50}
containerMaxWidth={50}
backgroundColor={'transparent'}
/>
this.getGridRender(this.props.next[i], i)
);
}
return grids;
}
getGridRender(item: Object, index: number) {
return <Grid
width={item[0].length}
height={item.length}
grid={item}
containerMaxHeight={50}
containerMaxWidth={50}
backgroundColor={'transparent'}
key={index.toString()}
/>;
};
render() {
if (this.props.next.length > 0) {
return (