Ela_Front/src/components/ArticlesAlaUnes.js

134 lines
4.7 KiB
JavaScript

import React, { useRef, useState, useMemo, useEffect } from "react";
import { getCookie, removeCookie } from 'react-use-cookie';
import axios from "axios";
import happyimg from "../mysy_img/happy.png";
import parse from 'html-react-parser'
let PageSize = 5;
const NosArticlesAlaUne = (props) => {
const [userconnected, setuserconnected] = useState("");
const [SearchText, setSearchText] = useState("");
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const [displayAllClasses, setdisplayAllClasses] = useState(true);
const [showelement, setshowelement] = useState("init");
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [currentPage2, setCurrentPage2] = useState(1);
const [fin, setfin] = useState(0);
const stored_user = getCookie('tokenmysych');
function searchFunction(e) {
var form = new FormData();
form.append("token", "");
// Ajout des info IP user
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);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_article_avis_alaune/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) != String("false")) {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("True");
setResult(res.data.message)
//setmyApimyApiMessage("OK")
////console.log("taille = "+res.data.message.length);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
const currentTableData2 = useMemo(() => {
if (result) {
const firstPageIndex = (currentPage2 - 1) * PageSize;
const lastPageIndex = firstPageIndex + PageSize;
setfin(1);
return result.slice(firstPageIndex, lastPageIndex);
}
else {
return [];
setfin(0);
}
}, [currentPage2]);
useEffect(() => {
setdisplayAllClasses("true");
searchFunction();
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
} else {
setuserconnected("1");
}
}, [])
return (
<div className="articlesalaUne">
{String(myApiResponse) === String("False") && <div className="koUpdateData">
Impossible de contacter l'hote distant
</div>}
{result && myApiResponse == "True" && fin == 0 && result.slice(0, PageSize).map((article) => (
<div style={{ border: "2px" }} >
<ul onClick={(e) => {
e.preventDefault();
window.open(
"Display-Detail-Article/" + JSON.parse(article).internal_url,
'_blank'
);
}}>
<li><u>Titre:</u> {JSON.parse(article).title_formation} </li>
{String(JSON.parse(article).note) > "4" && <li> <u>Note:</u> {JSON.parse(article).note} / 5
<img class="img_note_class" src={happyimg} align="right" alt="MySy Training happy" />
</li>}
<li> <u>Date:</u> { (String(JSON.parse(article).date_avis)).substring(0, 10)}</li>
<li><u>Avis:</u> {parse( (String(JSON.parse(article).avis)).substring(0, 50))} ...</li>
</ul>
<hr />
</div>
))}
</div>
)
}
export default NosArticlesAlaUne;