{"size": 2778, "ext": "js", "max_stars_repo_path": "food_app/src/components/oneFoodList.js", "max_stars_repo_name": "Stephane226/Worldwide-Food-", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "food_app/src/components/oneFoodList.js", "max_issues_repo_name": "Stephane226/Worldwide-Food-", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "food_app/src/components/oneFoodList.js", "max_forks_repo_name": "Stephane226/Worldwide-Food-", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.8035714286, "max_line_length": 159, "alphanum_fraction": 0.4805615551}
import React, {Component, useEffect} from 'react';
import food_jpg from '../images/food.jpeg';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
  import AOS from 'aos';



function OneFoodList(props){
    
     


    useEffect(() => {
        AOS.init();
      }, []);

    const openDetails =()=>{



        function displayTheDetails(){
            props.ingredientsFull.map((datas)=>{
            return datas.text;

        })

        };

        
displayTheDetails();
        
       setTimeout(() => {


        document.getElementById('TitleDetails').innerHTML = props.RecipeName;
        document.getElementById('detailImage').src=  props.RecipeImage;
      //  document.getElementById('ingredientDetails').innerHTML = props.RecipeAllIngredients;


        document.getElementById('cuisineType').innerHTML = props.cuisineType;
        document.getElementById('MealType').innerHTML = props.mealType; 
        document.getElementById('dietLabels').innerHTML = props.dietLabels;  
        document.getElementById('Yield').innerHTML = props.yield; 
       

        
        
        document.getElementById('displayTheDetails').innerHTML =    props.ingredientsFull.map((datas)=>{
            return `
                         <div  class="ingredients-images"  data-aos="fade-up">
              <div class="ingredientsHeader"> <h5>${datas.text}</h5> 
              </div>
             

              <img src=${datas.image}>

              
            </div>`

        })
           
       }, 200);

        




    }
useEffect(()=>{

});
  

    

    return(
        <div className='top-foods-unit' data-aos="zoom-in" data-aos-duration="1000">
                        <div className="img-parent">
                        <img className="image" src={props.RecipeImage}/>
                        </div>
                        <hr/>
                        <h4>{props.RecipeName}</h4>
                        <p > {props.RecipeAllIngredients}</p>
                        <hr/>
                        <div className="top-foods-unit-stars-like">
                        <span>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        </span>
                        <span><i class="fas fa-heart"></i></span>
                        </div>
                        <button className="btn-foods" onClick = {openDetails}><Link to="/moreDetails" className="link-element">View Ingredients</Link></button>
                        



                    </div>
    )
}

export default OneFoodList

