217 lines
7.3 KiB
JavaScript
217 lines
7.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Button, } from "reactstrap";
|
|
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
|
|
import { SocialIcon } from 'react-social-icons';
|
|
import happyimg from "../mysy_img/happy.png";
|
|
import unhappyimg from "../mysy_img/nothappy.png";
|
|
import middleimg from "../mysy_img/middle.png";
|
|
import parse from 'html-react-parser'
|
|
import img_met_autre from "../mysy_img/met_autre.jpg";
|
|
import img_met_digital from "../mysy_img/met_digital.jpg";
|
|
import { Rating } from 'react-simple-star-rating'
|
|
|
|
const Article = (props) => {
|
|
const [rating, setRating] = useState(props.article.note * 20)
|
|
console.log(props.article.note * 10);
|
|
// Catch Rating value
|
|
|
|
function handleRating(rate) {
|
|
alert(" rate =" + rate);
|
|
setRating(40);
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="article">
|
|
|
|
<div className="div_row">
|
|
|
|
|
|
<div className="div_row_gauche" onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
|
|
}}>
|
|
<div style={{ "width": "100%", "height": "8rem" }}>
|
|
<div className="gauche_img">
|
|
<img src={img_met_digital} alt="Formation gestion projets" className="img_categorie" id="projets" />
|
|
</div>
|
|
<div className="droite_txt">
|
|
<p className="met_text" id="projets" > {(String(props.article.title_formation)).substring(0, 50)} </p>
|
|
|
|
<p className="met_text_detail" >
|
|
|
|
<div className="art_criteres">
|
|
Avis :
|
|
</div>
|
|
<div className="art_criteres_value">
|
|
|
|
{parse( String(props.article.avis).replace(/(<([^>]+)>)/ig, '') )}
|
|
|
|
</div>
|
|
|
|
</p>
|
|
|
|
<p className="met_text_detail" >
|
|
|
|
<div className="art_criteres">
|
|
</div>
|
|
<div className="art_criteres_value_left">
|
|
|
|
</div>
|
|
<div className="art_criteres_value_right">
|
|
{(String(props.article.date_avis)).substring(0, 10)}
|
|
|
|
</div>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/* <div className="div_row_droite" onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
|
|
}}>
|
|
<div style={{ "width": "100%", "height": "8rem" }}>
|
|
<div style={{ "width": "30%", "float": "left" }}>
|
|
<img src={img_met_digital} alt="Formation gestion projets" className="img_categorie" id="projets" />
|
|
</div>
|
|
<div style={{ "width": "70%", "float": "right" }}>
|
|
<p className="met_text" id="projets" >{props.article.title_formation} </p>
|
|
|
|
<p className="met_text_detail" >
|
|
|
|
<div className="art_criteres">
|
|
Avis :
|
|
</div>
|
|
<div className="art_criteres_value">
|
|
{parse(String(props.article.avis))}
|
|
</div>
|
|
|
|
</p>
|
|
|
|
<p className="met_text_detail" >
|
|
|
|
<div className="art_criteres">
|
|
Note :</div>
|
|
<div className="art_criteres_value">
|
|
<Rating onClick={handleRating}
|
|
ratingValue={rating}
|
|
readonly={true}
|
|
size={20} />
|
|
|
|
</div>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
</div>
|
|
|
|
|
|
{/* <div className="forma_rightbox" onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
|
|
}}>
|
|
|
|
<div className="p_forma">
|
|
<div>
|
|
<div style={{ 'float': "left", "width": "50%", marginBottom: '0.1rem', textAlign:'justify' }}>
|
|
<b>{props.article.title_formation} </b><br />
|
|
</div>
|
|
<div style={{ 'float': "left", "width": "20%", marginBottom: '0.1rem', textAlign:'center',
|
|
marginLeft:'auto', marginRight:'auto', fontWeight:'bolder', }}>
|
|
{(props.article).note}
|
|
|
|
{props.article.note > "4" &&
|
|
<img class="img_note_class" src={happyimg} align="right" alt="MySy Training profile image" />
|
|
}
|
|
|
|
{props.article.note <= "2" &&
|
|
<img class="img_note_class" src={unhappyimg} align="right" alt="MySy Training profile image" />
|
|
}
|
|
|
|
{props.article.note > "2" && props.article.note <= "4" &&
|
|
<img class="img_note_class" src={middleimg} align="right" alt="MySy Training profile image" />
|
|
}
|
|
|
|
|
|
</div>
|
|
<div style={{ 'float': "right", "width": "30%", marginBottom: '0.1rem', textAlign: "right", paddingRight: "0.3rem" }}>
|
|
{(String(props.article.date_avis)).substring(0, 10)} <br />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div style={{ 'float': "left", "width": "98%", marginBottom: '0.1rem', textAlign:'justify' }}>
|
|
|
|
{parse(String(props.article.avis))} <br />
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div style={{ "width": "100%", "margin-top": "0.2rem" }}>
|
|
|
|
<div style={{ 'float': "right", "width": "30%", textAlign: "right", marginTop: "0.6rem", }}>
|
|
<Button variant="contained" color="success"
|
|
style={{
|
|
'borderRadius': "10rem", "width": "100%",
|
|
"width": "60% !important", background: "#104277"
|
|
}}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
|
|
}}
|
|
>Voir detail</Button>
|
|
</div>
|
|
|
|
<div style={{ 'float': "left", "width": "30%", marginTop: "0.6rem", }}>
|
|
<div className="media_sociaux">
|
|
<FacebookShareButton
|
|
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
|
|
|
|
quote={props.article.title_formation + " -- " + props.article.avis}
|
|
hashtag={"#MySyTraining"}
|
|
>
|
|
<SocialIcon network="facebook" className="SocialIcon" />
|
|
</FacebookShareButton>
|
|
|
|
|
|
<TwitterShareButton
|
|
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
|
|
hashtag={"#MySyTraining"}
|
|
>
|
|
<SocialIcon network="twitter" className="SocialIcon" />
|
|
</TwitterShareButton>
|
|
|
|
|
|
<LinkedinShareButton
|
|
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
|
|
title={" Un avis sur : " + props.article.title_formation}
|
|
summary={props.article.title_formation + " -- " + props.article.avis}
|
|
source={"https://www.mysy-training.com/"}
|
|
|
|
>
|
|
<SocialIcon network="linkedin" className="SocialIcon" />
|
|
</LinkedinShareButton>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>*/}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
export default Article; |