From 0b7b12ece572f1820697ab4f7f9493963d70d56f Mon Sep 17 00:00:00 2001 From: Clement G Date: Sat, 13 Jul 2019 17:21:49 +0200 Subject: [PATCH] remove some warning about DOM --- src/components/views/Result.js | 233 ++++++++++++++++++--------------- 1 file changed, 126 insertions(+), 107 deletions(-) diff --git a/src/components/views/Result.js b/src/components/views/Result.js index 09bfd80..de2fdad 100644 --- a/src/components/views/Result.js +++ b/src/components/views/Result.js @@ -1,15 +1,15 @@ import React, {Component} from "react"; -import {Container,Row,Col,Collapse, Card, CardHeader, CardBody, Table} from "reactstrap"; +import {Container, Row, Col, Collapse, Card, CardHeader, CardBody, Table} from "reactstrap"; //TODO : variable de config dans un fichier à part (avec les mentions, le min/max de mentions, le nombre max de candidats, les maxlength,l'url api, etc ...) const mentions = [ - {label:"Excellent", color:"#015411"}, - {label:"Trés Bien", color:"#019812"}, - {label:"Bien", color:"#6bca24"}, - {label:"Assez Bien", color:"#ffb200"}, - {label:"Passable", color:"#ff5d00"}, - {label:"Insuffisant", color:"#b20616"}, - {label:"A Rejeter", color:"#6f0214"}, + {label: "Excellent", color: "#015411"}, + {label: "Trés Bien", color: "#019812"}, + {label: "Bien", color: "#6bca24"}, + {label: "Assez Bien", color: "#ffb200"}, + {label: "Passable", color: "#ff5d00"}, + {label: "Insuffisant", color: "#b20616"}, + {label: "A Rejeter", color: "#6f0214"}, ]; @@ -18,17 +18,17 @@ class Result extends Component { constructor(props) { super(props); this.state = { - candidates:[], - title:null, - nbMentions:0, - colSizeCandidateLg:4, - colSizeCandidateMd:6, - colSizeCandidateXs:12, - colSizeMentionLg:1, - colSizeMentionMd:1, - colSizeMentionXs:1, - collapseGraphics:false, - collapseProfiles:false + candidates: [], + title: null, + nbMentions: 0, + colSizeCandidateLg: 4, + colSizeCandidateMd: 6, + colSizeCandidateXs: 12, + colSizeMentionLg: 1, + colSizeMentionMd: 1, + colSizeMentionXs: 1, + collapseGraphics: false, + collapseProfiles: false }; @@ -36,44 +36,44 @@ class Result extends Component { componentDidMount() { //todo fetch data from API - let fetchedData={ - title:"Merci d'évaluer les candidats suivants", - candidates:[ - {id:0, label:"Mme ABCD", mention: 2, profile: [20,20,20,10,10,20,0], score: "55.28"}, - {id:2, label:"M. EFGH", mention: 3, profile: [0,20,20,10,10,30,10], score: "43.10"}, - {id:3, label:"M. IJKL", mention: 4, profile: [0,0,20,25,15,20,20], score: "22.82"}, - {id:4, label:"M. MNOP", mention: 4, profile: [0,0,15,15,30,10,30], score: "12.72"} - ],//ordered by result - nbMentions:7, + let fetchedData = { + title: "Merci d'évaluer les candidats suivants", + candidates: [ + {id: 0, label: "Mme ABCD", mention: 2, profile: [20, 20, 20, 10, 10, 20, 0], score: "55.28"}, + {id: 2, label: "M. EFGH", mention: 3, profile: [0, 20, 20, 10, 10, 30, 10], score: "43.10"}, + {id: 3, label: "M. IJKL", mention: 4, profile: [0, 0, 20, 25, 15, 20, 20], score: "22.82"}, + {id: 4, label: "M. MNOP", mention: 4, profile: [0, 0, 15, 15, 30, 10, 30], score: "12.72"} + ],//ordered by result + nbMentions: 7, }; - let data={ - title:fetchedData.title, - candidates:fetchedData.candidates, - nbMentions:fetchedData.nbMentions, - colSizeCandidateLg:0, - colSizeCandidateMd:0, - colSizeCandidateXs:0, - colSizeMentionLg:Math.floor((12-this.state.colSizeCandidateLg)/fetchedData.nbMentions), - colSizeMentionMd:Math.floor((12-this.state.colSizeCandidateMd)/fetchedData.nbMentions), - colSizeMentionXs:Math.floor((12-this.state.colSizeCandidateXs)/fetchedData.nbMentions), + let data = { + title: fetchedData.title, + candidates: fetchedData.candidates, + nbMentions: fetchedData.nbMentions, + colSizeCandidateLg: 0, + colSizeCandidateMd: 0, + colSizeCandidateXs: 0, + colSizeMentionLg: Math.floor((12 - this.state.colSizeCandidateLg) / fetchedData.nbMentions), + colSizeMentionMd: Math.floor((12 - this.state.colSizeCandidateMd) / fetchedData.nbMentions), + colSizeMentionXs: Math.floor((12 - this.state.colSizeCandidateXs) / fetchedData.nbMentions), }; - data.colSizeCandidateLg=((12-data.colSizeMentionLg*data.nbMentions)>0)?(12-data.colSizeMentionLg*data.nbMentions):12; - data.colSizeCandidateMd=((12-data.colSizeMentionMd*data.nbMentions)>0)?(12-data.colSizeMentionMd*data.nbMentions):12; - data.colSizeCandidateXs=((12-data.colSizeMentionXs*data.nbMentions)>0)?(12-data.colSizeMentionXs*data.nbMentions):12; + data.colSizeCandidateLg = ((12 - data.colSizeMentionLg * data.nbMentions) > 0) ? (12 - data.colSizeMentionLg * data.nbMentions) : 12; + data.colSizeCandidateMd = ((12 - data.colSizeMentionMd * data.nbMentions) > 0) ? (12 - data.colSizeMentionMd * data.nbMentions) : 12; + data.colSizeCandidateXs = ((12 - data.colSizeMentionXs * data.nbMentions) > 0) ? (12 - data.colSizeMentionXs * data.nbMentions) : 12; this.setState(data); } - toggleGraphics = () => { - this.setState(state => ({ collapseGraphics: !state.collapseGraphics })); + toggleGraphics = () => { + this.setState(state => ({collapseGraphics: !state.collapseGraphics})); }; - toggleProfiles = () => { - this.setState(state => ({ collapseProfiles: !state.collapseProfiles })); + toggleProfiles = () => { + this.setState(state => ({collapseProfiles: !state.collapseProfiles})); }; - render(){ - return( + render() { + return (

{this.state.title}

@@ -81,11 +81,14 @@ class Result extends Component {

Résultat du vote :

-
    - { this.state.candidates.map((candidate,i) => { - return (
  1. {candidate.label} {candidate.score}%{mentions[candidate.mention].label}
    2. ); - })} -
+
    {this.state.candidates.map((candidate, i) => { + return (
  1. {candidate.label}{candidate.score}%{mentions[candidate.mention].label}
    2. ); + })}
 @@ -93,42 +96,60 @@ class Result extends Component { -

Graphique

+

Graphique

 -
-
- - { this.state.candidates.map((candidate,i) => { - return ( {/*candidate.label*/} - - ) - })}
{i+1} - { candidate.profile.map((value,i) => { - if(value>0){ - let percent=value+"%"; - if(i===0){ - percent="auto"; - } - return (); - } - - })}
 
-
+
+
+ + {this.state.candidates.map((candidate, i) => { + return ( + + {/*candidate.label*/} + + ) + })}
{i + 1} + + + + {candidate.profile.map((value, i) => { + if (value > 0) { + let percent = value + "%"; + if (i === 0) { + percent = "auto"; + } + return (); + }else{ + return null + } + + })} + +
 
+
- - { this.state.candidates.map((candidate,i) => { - return ({(i>0)?", ":""}{i+1}: {candidate.label}); + + {this.state.candidates.map((candidate, i) => { + return ( + {(i > 0) ? ", " : ""}{i + 1}: {candidate.label}); })}
- - { mentions.map((mention,i) => { - return (i{mention.label}: + + {mentions.map((mention, i) => { + return (i < this.state.nbMentions) ? + {mention.label} : }) } @@ -142,48 +163,46 @@ class Result extends Component { -

Profils de mérites

+

Profils + de mérites

 - - +
- - - - - { mentions.map((mention,i) => { - return (); - })} - - - - { this.state.candidates.map((candidate,i) => { - return ( - {/*candidate.label*/} - { candidate.profile.map((value,i) => { - return (); +
#{mention.label}
{i+1}{value}%
+ + + + {mentions.map((mention, i) => { + return (); + })} + + {this.state.candidates.map((candidate, i) => { + return ( + + {/*candidate.label*/} + {candidate.profile.map((value, i) => { + return (); })} ) - })} - - -
#{mention.label}
{i + 1}{value}%
+ })} +
- - { this.state.candidates.map((candidate,i) => { - return ({(i>0)?", ":""}{i+1}: {candidate.label}); - })} - + {this.state.candidates.map((candidate, i) => { + return ({(i > 0) ? ", " : ""}{i + 1}: {candidate.label}); + })} - - ) } } + export default Result;