change of approach : now react computes the new url

front/src/view/AllToucanPage/AllToucanPage.js

@@ -7,8 +7,12 @@ import ToucanCard from './ToucanCard'
 const date = new Date()
 const beginYear = 1900 + (date.getMonth() < 7 ? date.getYear()-1 : date.getYear());
 
+function formToucanUrlId(toucan){
+	return toucan.title.toLowerCase().replace(/\s/g, "")+"-"+toucan.date.getFullYear();
+}
+
 function AllToucan(props){
-	const [urltoucans,setToucans] = useState([]);
+	const [toucans,setToucans] = useState([]);
 	const [before,setBefore] = useState((new Date(beginYear+1,6,31)).getTime());
 	const [after, setAfter] = useState((new  Date(beginYear,7,1)).getTime());
 		
@@ -46,10 +50,10 @@ function AllToucan(props){
 				updateFrame = {updateFrame}
 				/>
 				<Card.Group centered >
-				{urltoucans.map( toucan => {
+				{toucans.map( toucan => {
 					return <ToucanCard
 					image={`${props.backURL}/toucan/img/${toucan["_id"]}`}
-					link={`${props.backURL}/toucan/pdf/${toucan.urlID}`}
+					link={`${props.backURL}/toucan/pdf/${formToucanUrlId(toucan)}+`}
 					header={toucan.title}
 					toucanId={toucan._id}
 					isAdmin={props.isAdmin}