Ela_Front/src/components/AideRecherche.js

138 lines
4.8 KiB
JavaScript

import React, { useState, useEffect } from "react";
import { FaSearch, } from 'react-icons/fa';
import axios from "axios";
import { latLng2Tile } from "google-map-react";
import { useHistory } from "react-router-dom";
const AideRecherche = (props) => {
const [recherche, setrecherche] = useState("");
const [Result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("false");
const history = useHistory();
function searchFunction(e) {
setrecherche("1");
setResult([]);
//Get Criterias
var crit_SearchText = document.getElementById("mottype").value;
//var crit_domaine = document.getElementById("domaine").value;
//alert(" vous avez choisi : crit_SearchText = "+crit_SearchText+" -- crit_domaine = "+crit_domaine);
var form = new FormData();
form.append("mot", crit_SearchText);
form.append("domaine", "");
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetMotFromElaIndex/";
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)
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
})
}
function Checkmottype(e){
const val = e.target.value;
const regex = new RegExp('^[a-zA-Z0-9]+$');
if( regex.test(val) == false || String(val).length > 4 ){
var newval = val.slice(0, -1);
document.getElementsByName("mottype")[0].value = newval;
}
}
function handleClick(e, data) {
// access to e.target here
//console.log(data);
history.push("/recherche-formation/"+data);
// ici faire call recherche avec search texte
}
return (
<div className="AideRecherche">
<div className="div_row">
{/*
<div className="input-group input-group-sm mb-3 " style={{ width: "90%" }}>
<span className="criteres input-group-text " id="inputGroup-sizing-sm3 ">Domaine de recheche </span>
<select className="form-select form-select-sm " onChange={"TrainingCertifHandle"} aria-label=".form-select-sm example"
id={"domaine"} name={"domaine"} >
<option selected value="">Choisir une valeur</option>
<option value="programmation">Prog</option>
<option value="reseaux">Reseaux</option>
</select>
</div>
*/}
<div class="input-group mb-3">
<div className="input-group input-group-sm mb-3 ">
<span className="criteres input-group-text " id="inputGroup-sizing-sm3 ">Saisir 4 lettres </span>
<input type="text" name="mottype"
id="mottype"
maxlength="4" size="4" class="form-control"
aria-label="Default" aria-describedby="inputGroup-sizing-default"
onChange={Checkmottype} />
<FaSearch onClick={searchFunction} style={{
width: "10%",
border: "0px solid black", height: "1.5rem"
}} />
</div>
</div>
</div>
{Result && String(myApiResponse) === String("True") && <div className="div_row" style={{border:"None"}}>
<div className="div_row_gauche okUpdateData" style={{textAlign:"center"}}>
Essayez l'un de ces mots (cliquer dessus)
</div>
<div className="div_row_droite" >
{Result && String(myApiResponse) === String("True") &&
Result.map((formation) => (
<a href={"/recherche-formation/ref/"+formation}>
<div style={{ display: "inline-block", width: "33%", textAlign:"center",paddingLeft: "0.5rem" }} value= {`${formation}`}
>
"{(formation)}"
</div>
</a>
))}
</div>
</div>}
</div>
)
}
export default AideRecherche;