import React, { useRef, useState, useEffect } 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' import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import moment from "moment"; import SendIcon from '@mui/icons-material/Send'; import axios from "axios"; import { Editor } from '@tinymce/tinymce-react'; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { format } from 'date-fns' import { FcInfo } from "react-icons/fc"; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import { getCookie } from 'react-use-cookie'; import { useHistory } from "react-router-dom"; import Checkbox from '@mui/material/Checkbox'; import Box from '@mui/material/Box'; import Fab from '@mui/material/Fab'; import AddIcon from '@mui/icons-material/Add'; import EditIcon from '@mui/icons-material/Edit'; import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; import FavoriteIcon from '@mui/icons-material/Favorite'; import NavigationIcon from '@mui/icons-material/Navigation'; import { FcPlus } from "react-icons/fc"; import { MdDeleteForever } from "react-icons/md"; import { AddCircleOutline } from "@mui/icons-material"; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import TextField from '@mui/material/TextField'; import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import { IconButton } from '@material-ui/core'; import { makeStyles } from "@material-ui/core/styles"; import Paper from '@material-ui/core/Paper'; import Draggable from 'react-draggable'; function PaperComponent(props) { return ( ); } const useStyles = makeStyles((theme) => ({ dialog: { position: 'absolute', // left: 10, top: 400 }, paper: { overflowY: 'unset', }, customizedButton: { position: 'absolute', left: '98%', top: '-3%', backgroundColor: 'lightgray', color: 'gray', }, })); const Article = (props) => { const classes = useStyles(); const history = useHistory(); const [isLoading, setLoading] = useState(); 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); } const [country_code, setcountry_code] = useState("FR"); const [country_name, setcountry_name] = useState("France"); const [city, setcity] = useState("Paris"); const [postal, setpostal] = useState("75001"); const [latitude, setlatitude] = useState("48.861000061035156"); const [longitude, setlongitude] = useState("2.3380000591278076"); const [IPv4, setIPv4] = useState("172.71.122.128"); const [state, setstate] = useState("France"); const [userIp, setuserIp] = useState("172.71.122.128"); const [title_resized, settitle_resized] = useState("") const [article_img, setarticle_img] = useState("") const [edit_article, setedit_article] = useState("") const [selected_id, setselected_id] = useState(props.article._id) const editorRef_texte_avis = useRef(null); const [editorRef_texte_avis_limite, seteditorRef_texte_avis] = useState(1000); const [field_texte_avis, setfield_texte_avis] = useState(""); const [field_texte_avis_initial_value, setfield_texte_avis_initial_value] = useState(""); const [is_data_changed, setis_data_changed] = useState(""); const [editor_tochanged, seteditor_tochanged] = useState(""); function editor_keyup() { setis_data_changed("1"); } const [Get_Partner_Article_Avis_Data_api, setGet_Partner_Article_Avis_Data_api] = useState(); const [Get_Partner_Article_Avis_Data_message, setGet_Partner_Article_Avis_Data_message] = useState(); const [Get_Partner_Article_Avis_Data_result, setGet_Partner_Article_Avis_Data_result] = useState(); function Get_Partner_Article_Avis_Data() { var form = new FormData(); form.append("_id", props.article._id); //console.log(" ## form = ", form); var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis_from_id/"; setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); if (String(res.data.status) === "true") { //console.log(" In Get_Partner_Article_Avis_Data res.data.status = " + res.data.status); // console.log(" In Get_Partner_Article_Avis_Data res.data.message r_class = " + res.data.message); setGet_Partner_Article_Avis_Data_api("true"); setGet_Partner_Article_Avis_Data_result(res.data.message); if (res.data.message.length > 0) { var mylocal_document = JSON.parse(res.data.message); if (mylocal_document.date_publication) { setarticle_avis_date_publication(moment((String(mylocal_document.date_publication)).substring(0, 10)).format('YYYY-MM-DD')); //console.log(" ### mylocal_document.date_publication = ", mylocal_document.date_publication); } if (mylocal_document.avis) { setarticle_avis_avis(mylocal_document.avis); setfield_texte_avis_initial_value(mylocal_document.avis); setfield_texte_avis(mylocal_document.avis); } else { setarticle_avis_avis(""); setfield_texte_avis_initial_value(""); } if (mylocal_document.internal_url) setarticle_avis_internal_url(mylocal_document.internal_url); setarticle_avis_display_header_img(false); if (mylocal_document.display_header_img && String(mylocal_document.display_header_img) === "1") { setarticle_avis_display_header_img(true); } if (mylocal_document.img_path) { setarticle_avis_img_path(mylocal_document.img_path); setimg_img_article_file(mylocal_document.img_path); } else { setarticle_avis_img_path(""); setimg_img_article_file(""); } if (mylocal_document.meta_description) { setarticle_avis_meta_description(mylocal_document.meta_description); } else { setarticle_avis_meta_description(""); } } else { alert(" Aucun article recuperé"); } } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); } else { setGet_Partner_Article_Avis_Data_api("false"); setGet_Partner_Article_Avis_Data_message(res.data.message); alert(res.data.message); } }).catch((error) => { setLoading(false); console.warn('Not good man :( Get_Partner_Article_Avis_Data = ', error); setGet_Partner_Article_Avis_Data_api("false"); alert(" Impossible de recuperer les données de l'article"); //setmyApimyApiMessage("") }) } useEffect(() => { var local_title = ""; if (props.article.title_formation && String(props.article.title_formation).length > 45) { local_title = String(props.article.title_formation).substring(0, 43) + " ..."; } else { local_title = String(props.article.title_formation); } settitle_resized(local_title); var img_article = ""; if (props.article.img_path && String(props.article.img_path).length > 10) { img_article = String(props.article.img_path) setarticle_img(img_article); } else { setarticle_img(img_met_digital); } window.scrollTo({ top: 0, behavior: "smooth", }); }, []); const [Dialog_1_avis, setDialog_1_avis] = React.useState(false); const [Dialog_1_open, setDialog_1_open] = React.useState(false); function Dialog_1_handle_change_participant_session(avis) { setDialog_1_avis(avis); setDialog_1_open(true); } const Dialog_1_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_1_handleClose_buton = () => { setDialog_1_open(false); }; const [Dialog_article_avis_avis, setDialog_article_avis_avis] = React.useState(false); const [Dialog_article_avis_open, setDialog_article_avis_open] = React.useState(false); function Dialog_article_avis_handle_change_participant_session(avis) { setDialog_article_avis_avis(avis); setDialog_article_avis_open(true); } const Dialog_article_avis_handleClose = () => { }; const Dialog_article_avis_handleClose_buton = () => { setDialog_article_avis_open(false); sethandleSubmission_img_article_message(""); setlogo_file_name(""); setimg_img_article_file(""); setimg_img_article_file2(""); clear_article_avis_fields(); }; function clear_article_avis_fields() { setarticle_avis_title_formation(""); setarticle_avis_email(""); setarticle_avis_url_formation(""); setarticle_avis_sujet(""); setarticle_avis_avis(""); setis_data_changed(""); } const [article_avis_date_publication, setarticle_avis_date_publication] = useState(new Date().toLocaleDateString('fr-FR')); const [article_avis_title_formation, setarticle_avis_title_formation] = React.useState(""); const [article_avis_email, setarticle_avis_email] = React.useState(""); const [article_avis_url_formation, setarticle_avis_url_formation] = React.useState(""); const [article_avis_sujet, setarticle_avis_sujet] = React.useState(""); const [article_avis_avis, setarticle_avis_avis] = React.useState(""); const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState(""); const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false); const [article_avis_img_path, setarticle_avis_img_path] = React.useState(""); const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState(""); function Add_Update_Article_Avis() { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("title_formation", article_avis_title_formation); form.append("avis", field_texte_avis); form.append("qualite", ""); form.append("note", ""); if (img_img_article_file2) { form.append('File', img_img_article_file2); form.append('img_file_name', img_img_article_file2.name); } else { form.append('File', ""); form.append('img_file_name', ""); } if (!article_avis_img_path || String(article_avis_img_path).trim() === "") { alert(" Vous devez saisir une image à afficher avec l'article "); return; } form.append("img_path", article_avis_img_path); if (article_avis_date_publication.trim() === "") { alert(" Vous devez saisir la date de naissance de l'apprenant"); return; } var formated_date_tmp = new Date(moment(article_avis_date_publication, "YYYY-MM-DD")); var formated_date_final = moment(formated_date_tmp).format('DD/MM/YYYY'); form.append("date_publication", formated_date_final); if (article_avis_display_header_img) { form.append("display_header_img", "1"); } else { form.append("display_header_img", "0"); } form.append("user_ip", IPv4); form.append("user_country_code", country_code); form.append("user_country_name", country_name); form.append("user_city", city); form.append("user_postal", postal); form.append("user_latitude", latitude); form.append("user_longitude", longitude); form.append("user_state", state); // Si une balise meta description n'est pas fourni, alors on lui donne le titre var local_meta_description = ""; if (article_avis_meta_description) { local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 154); } else { local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 154); } form.append("meta_description", local_meta_description); // console.log(" ## form = ", form); var myurl = ""; if (selected_id && String(selected_id).length > 3) { myurl = process.env.REACT_APP_API_URL + "myclass/api/update_articles_avis/"; form.append("_id", selected_id); } else { myurl = process.env.REACT_APP_API_URL + "myclass/api/add_articles_avis/"; } axios.post(myurl, form).then(res => { if (String(res.data.status) === String("false")) { alert(res.data.message); } else if (String(res.data.status) === String("true")) { alert(res.data.message); Dialog_article_avis_handleClose_buton(); window.location.reload(); } else { } }).catch((error) => { console.warn('contact-nous Not good man :( mysearchtext = '); }) } const [Delete_Article_Avis_Data_api, setDelete_Article_Avis_Data_api] = useState(); const [Delete_Article_Avis_Data_message, setDelete_Article_Avis_Data_message] = useState(); const [Delete_Article_Avis_Data_result, setDelete_Article_Avis_Data_result] = useState(); function Delete_Article_Avis_Data(article_id) { var form = new FormData(); //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("_id", article_id); var myurl = process.env.REACT_APP_API_URL + "myclass/api/delete_articles_avis_from_id/"; setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); //console.log(" In Delete_Article_Avis_Data res.data.status = " + res.data.status); //console.log(" In Delete_Article_Avis_Data res.data.message r_class = " + res.data.message); if (String(res.data.status) === String("true")) { alert(res.data.message); window.location.reload(); } else { setDelete_Article_Avis_Data_api("false"); setDelete_Article_Avis_Data_message(res.data.message); alert(res.data.message); } }).catch((error) => { setLoading(false); console.warn('Delete_Article_Avis_Data : Not good man :( mysearchtext = ' + error); setDelete_Article_Avis_Data_api("false"); alert(" Impossible de supprimer le document"); }) } /**** Gestion image de l'article */ const [logo_file_name, setlogo_file_name] = useState(); const hiddenFileInput_logo = React.useRef(null); const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState(""); const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState(); const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState(); const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState(); const [img_img_article_file, setimg_img_article_file] = useState(); const [img_bg_file, setimg_bg_file] = useState(); const [img_img_article_file2, setimg_img_article_file2] = useState(); const [img_bg_file2, setimg_bg_file2] = useState(); const handleSubmission_logo = event => { clear_message(); const fileUploaded = event.target.files[0]; let file_size = event.target.files[0].size; let file_type = event.target.files[0].type; //console.log("file_size = ", file_size, " file_type = ", file_type); //console.log(" fileUploaded = ", fileUploaded); if (file_size > 1000000) { alert("Le fichier ne doit pas dépasser un 1 Méga octets"); return; } //image/png if (String(file_type) !== "image/png" && String(file_type) !== "image/jpg" && String(file_type) !== "image/jpeg") { alert("Le fichier n'est pas au format PNG"); return; } setLoading(true); var _URL = window.URL || window.webkitURL; var file, img; var img_height, img_width; if ((file = event.target.files[0])) { img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { img_height = this.height; img_width = this.width; _URL.revokeObjectURL(objectUrl); console.log(" img_width = ", img_width, " img_height = ", img_height) if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1100 && parseFloat(img_height) > 130 && parseFloat(img_height) < 1100) { //console.log(" img_height est = ", img_height, " < à 1500 "); // Verification que le nom du fichier est alpha numerique /*var regExp = /^[A-Za-z0-9]+$/; if (!regExp.test(event.target.files[0].name)) { sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques"); sethandleSubmission_img_article_api("false"); setLoading(false); return }*/ if (String(event.target.files[0].name).length > 50) { sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère"); sethandleSubmission_img_article_api("false"); setLoading(false); return } setlogo_file_name(event.target.files[0].name); setimg_img_article_file(URL.createObjectURL(event.target.files[0])); setimg_img_article_file2(event.target.files[0]); } else { sethandleSubmission_img_article_message(" La taille de l'image est incorrecte. Larg = " + String(img_width) + " px Long = " + String(img_height) + " px"); sethandleSubmission_img_article_api("false"); setLoading(false); return; } //console.log(" after img_width = ", img_width, " after img_height = ", img_height) }; img.src = objectUrl; } setLoading(false); }; function clear_message() { sethandleSubmission_img_article_message(); sethandleSubmission_img_article_api(); } const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState(); const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState(); const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState(); function Send_img_article_Img() { clear_message(); setLoading(true); const formData = new FormData(); formData.append('File', img_img_article_file2); //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA'); const stored_cookie = getCookie('tokenmysypart'); formData.append("token", stored_cookie); console.log(" ## le nom du fichier est : ", img_img_article_file2.name); fetch( process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/", { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message']); if (String(result['status']) === String("true")) { setSend_img_article_Img_api("true"); alert(" La mise à jour du logo a été correctement effectuée. "); } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setSend_img_article_Img_api("false"); setSend_img_article_Img_message(result['message']); } setLoading(false); }) .catch((error) => { console.error('Error:', error); setSend_img_article_Img_api("false"); setLoading(false); }); } const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState(); const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState(); const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState(); function Delete_img_article_Img() { clear_message(); setLoading(true); const formData = new FormData(); //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA'); const stored_cookie = getCookie('tokenmysypart'); formData.append("token", stored_cookie); fetch( process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/", { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message']); if (String(result['status']) === String("true")) { setDelete_img_article_Img_api("true"); setGetLms_Themes_img_article_Img(''); alert(" Le logo a été correctement supprimé "); } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setDelete_img_article_Img_api("false"); setDelete_img_article_Img_message(result['message']); } setLoading(false); }) .catch((error) => { console.error('Error:', error); setDelete_img_article_Img_api("false"); setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo"); setLoading(false); }); } const changeHandler2_logo = (event) => { clear_message(); hiddenFileInput_logo.current.click(); }; function Annule_img_article_img() { clear_message(); setimg_img_article_file(); setimg_img_article_file2(); sethandleSubmission_img_article_message(); setSend_img_article_Img_api(); setSend_img_article_Img_message(); setlogo_file_name(); } /***** Fin gestion de l'image de l'article */ return (
{/*** GESTION article */} null} PaperProps={{ className: classes.paper, // Apply the paper style style: { overflowY: 'unset', position: 'absolute', top: '5rem', margin: "2px", }, }} hideBackdrop={true} disableScrollLock classes={{ paper: classes.dialog }} PaperComponent={PaperComponent} aria-labelledby="draggable-dialog-title" > Votre article {String(is_data_changed) === String("1") &&
/!\ Pensez à enregistrer les modifications
}
Titre
{ setarticle_avis_title_formation(e.target.value); setis_data_changed("1"); }} className='disabled_style_width_100_percent' >
Date publication
{ setarticle_avis_date_publication(format(date, 'yyyy-MM-dd')); setis_data_changed("1"); } } showTimeSelect={false} dateFormat="dd/MM/yyyy" className="disabled_style session_caract_Dialog_DatePicker" />
Affiche image
{ setarticle_avis_display_header_img(e.target.checked); setis_data_changed("1"); }} />
Image Url
Image
{logo_file_name && } {img_img_article_file && } {String(Send_img_article_Img_api) === "true" &&
La mise à jour a été correctement faite
} {String(Send_img_article_Img_api) === "false" &&
{Send_img_article_Img_message}
} {String(handleSubmission_img_article_api) === "false" &&
{handleSubmission_img_article_message}
}

Meta description
{ setarticle_avis_meta_description(e.target.value); setis_data_changed("1"); } } />
Texte Article
editorRef_texte_avis.current = editor} // initialValue={field_texte_avis} onKeyUp={editor_keyup} value={field_texte_avis} onEditorChange={(newValue, editor) => { setfield_texte_avis(editorRef_texte_avis.current.getContent()); }} init={{ resize: false, height: 700, menubar: true, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', ], toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }' }} />
{String(is_data_changed) === String("1") &&
/!\ Pensez à enregistrer les modifications
}
{/*** FIN GESTION article */}
{props.article.title_formation}
{ e.preventDefault(); window.location.href = "/Display-Detail-Article/" + props.article.internal_url }} style={{ cursor: "pointer" }} > {title_resized}
{parse(String(props.article.avis).replace(/(<([^>]+)>)/ig, ''))}
{(String(props.article.date_publication)).substring(0, 10)}
{ e.preventDefault(); window.location.href = "/Display-Detail-Article/" + props.article.internal_url }}> En savoir plus ›
{props.connected_user_article_avis_droit_modif === "1" &&
{ e.preventDefault(); }}>
}
) } export default Article;