Commit eadc7492 authored by Matthieu Lamalle's avatar Matthieu Lamalle
Browse files

Merge branch 'optimize_render' into 'develop'

Optimize render

See merge request !5
parents 4206c98f e2d70240
......@@ -51,7 +51,7 @@ class PeeringConfViewer extends React.Component {
<div className={classes.root}>
<Grid container>
<Grid className={classes.section} container justify="flex-end">
<Button onClick={this.onDownloadFile} variant='raised' size="large" color="primary">
<Button onClick={this.onDownloadFile} variant='contained' size="large" color="primary">
Télécharger le fichier de configuration
<FileDownloadIcon className={classes.rightIcon} />
</Button>
......@@ -85,7 +85,7 @@ class PeeringConfViewer extends React.Component {
this.props.dispatch(serverActions.getPeeringConf(server.serverid))
.then(result => {
this.setState({ peeringConf: result });
})
}).catch(e => {console.log(e)})
.finally(() => this.setState({ isLoading: false }));
});
}
......
......@@ -52,21 +52,22 @@ class ServerPicker extends React.Component {
const srv = selectAllServers(servers)
return (
<React.Fragment>
<Grid item xs={12} sm={6}>
<Typography variant="subtitle1">Serveurs Disponibles</Typography>
<Infinite
preloadBatchSize= {this.props.containerHeight * 0.5}
containerHeight={400}
elementHeight={64}>
<ItemList dense={true} handleEvent={this.handleEvent} items={this.state.boxOne} allItems={srv} />
elementHeight={57}>
<ItemList dense={true} handleEvent={this.handleEvent} items={this.state.boxOne} allItems={srv} />
</Infinite>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="subtitle1">Serveurs de la sélection</Typography>
<Infinite
preloadBatchSize= {this.props.containerHeight * 0.5}
containerHeight={400}
elementHeight={64}>
<ItemList dense={true} handleEvent={this.handleEvent} items={this.state.boxTwo} allItems={srv} />
elementHeight={57}>
<ItemList dense={true} handleEvent={this.handleEvent} items={this.state.boxTwo} allItems={srv} />
</Infinite>
</Grid>
</React.Fragment>
......@@ -75,6 +76,7 @@ class ServerPicker extends React.Component {
}
class ItemList extends React.Component{
render() {
let itemArr = this.props.allItems;
let myItems = this.props.items;
......
......@@ -32,13 +32,19 @@ class ServerSelectionForm extends React.Component {
super(props);
this.state = {
isSaving: false,
dismount: false,
};
this.handleSrvList = this.handleSrvList.bind(this);
}
componentDidUpdate() {
const { form } = this.props;
if (form.submitted && form.validated) this.saveServerSelection();
if (form.submitted && form.validated) {
this.setState({ dismount: true })
this.saveServerSelection();
}
}
saveServerSelection() {
......@@ -73,14 +79,19 @@ class ServerSelectionForm extends React.Component {
}
render() {
const { classes, theme, inner, style, sm, form, serverselection, isLoading } = this.props;
const { isSaving } = this.state;
const { classes, theme, inner, style, sm, form, serverselection, isLoading, history } = this.props;
const { isSaving, dismount } = this.state;
const { serverselectionname, serverselectiondescription } = serverselection || {
serverselectionname: '',
serverselectiondescription: '',
serverselectionmodelid: -1,
requete: ''
};
history.listen((location, action) => {
console.log("POUEEEEEET")
this.setState({ dismount: true })
});
return (
(!isLoading || form.submitted) &&
<Page
......@@ -92,7 +103,6 @@ class ServerSelectionForm extends React.Component {
style={style}
inner={inner}
backLink={serverselection && serverselection.serverselectionid ? `/serverselections/${serverselection.serverselectionid}` : '/serverselections'}
>
<div className={classes.content}>
<form name="form" onSubmit={this.handleSubmit}>
......@@ -123,7 +133,7 @@ class ServerSelectionForm extends React.Component {
fullWidth
/>
</Grid>
<ServerPicker handleSrvList={this.handleSrvList} />
{!dismount && <ServerPicker handleSrvList={this.handleSrvList} />}
</Grid>
<ResponsiveButton
......
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Infinite from 'react-infinite';
import { withRouter } from 'react-router';
import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom';
......@@ -130,7 +131,7 @@ class ServerSelectionsDetail extends React.Component {
</div>
}
>
{serverselection && !isLoading &&
{serverselection && !serverselection.isLoading &&
<div style={{margin: "0 10px"}}>
<GridList cellHeight={'auto'} className={classes.gridList}>
<GridListTile cols={1}>
......@@ -154,7 +155,7 @@ class ServerSelectionsDetail extends React.Component {
<Typography variant="subtitle1">
Serveurs de la sélection :
</Typography>
{(serverselection.serverselectionserversid.length > 0 && this.renderListServer(serverselection, servers))
{(!servers.isLoading && serverselection.serverselectionserversid.length > 0 && this.renderListServer(serverselection, servers))
|| <Typography variant="subtitle1">Aucun serveur dans la sélection de serveur</Typography> }
</GridListTile>
<GridListTile >
......@@ -253,9 +254,13 @@ class ServerSelectionsDetail extends React.Component {
}
renderListServer(serverselection, servers){
return (
serverselection.serverselectionserversid.map((serverId) =>
<ServersListItem key={`${serverId}-server`} server={selectServerById(servers.byId, serverId)} serverselection={serverselection.serverselectionid} />
)
<Infinite
containerHeight={350}
elementHeight={57}>
{serverselection.serverselectionserversid.map((serverId) =>
<ServersListItem key={`${serverId}-server`} server={selectServerById(servers.byId, serverId)} serverselection={serverselection.serverselectionid} />
)}
</Infinite>
)
}
}
......
......@@ -77,9 +77,7 @@ class ServersList extends React.Component {
containerHeight={this.state.listHeight}
isInfiniteLoading={isLoading && hasMore}
loadingSpinnerDelegate={this.renderLoader()}
onInfiniteLoad={this.loadMoreServers}
infiniteLoadBeginEdgeOffset={this.state.listHeight-64}
elementHeight={64}>
elementHeight={67}>
{servers.map((server) =>
<ServersListItem key={server.serverid} server={server} />
)}
......
......@@ -57,7 +57,6 @@ class ServersListItem extends React.Component {
<Typography variant="subtitle1" color="textSecondary">
{server.serverdescription}
</Typography>
<Typography variant="h5">servermodelName</Typography>
</CardContent>
</ButtonBase>
</Card>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment