import React, { Component } from "react";
import { HashRouter as Router, Route, NavLink } from 'react-router-dom';
import './index.css'
function start(txt){
var str1 = "First"
if(str1==txt) {
return null
}
else {
return
}
}
class Shop extends React.Component {
constructor() {
super();
this.state ={txt: 'First', list: []};
}
onButtonClick(which) {
this.load(which);
this.setState({ txt: 'Clicked!' });
}
load(which){
if(which=='0')
{
return fetch('/tea/0')
.then((response) => response.json())
.then (( responseJson) => {
console.log( responseJson)
this.setState({
list: responseJson.data
});
})
} else if ( which=='1')
{
return fetch('/tea/1')
.then((response) => response.json())
.then (( responseJson) => {
console.log( responseJson)
this.setState({
list: responseJson.data
});
})
}
else if ( which=='2')
{
return fetch('/tea/2')
.then((response) => response.json())
.then (( responseJson) => {
console.log( responseJson)
this.setState({
list: responseJson.data
});
})
}
else
{
return fetch('/tea/3')
.then((response) => response.json())
.then (( responseJson) => {
console.log( responseJson)
this.setState({
list: responseJson.data
});
})
}
}
render() {
var test = "First"
return (
<div>
{this.state.txt==test &&
<div class="row">
<div class="col-lg-6">
<div class="bg-faded p-4 my-4">
<div class="card card-inverse">
<img class="card-img img-fluid w-100" src="img/black-tea.jpg" alt=""></img>
<div class="card-img-overlay bg-overlay">
<h2 class="card-title text-shadow text-white text-uppercase mb-0">Black Tea</h2>
<h4 class="text-shadow text-white"></h4>
<button onClick={() => this.onButtonClick(0)} class="btn btn-secondary">Taste it</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="bg-faded p-4 my-4">
<div class="card card-inverse">
<img class="card-img img-fluid w-100" src="img/green-tea.jpg" alt=""></img>
<div class="card-img-overlay bg-overlay">
<h2 class="card-title text-shadow text-white text-uppercase mb-0">Green Tea</h2>
<h4 class="text-shadow text-white"></h4>
<button onClick={() => this.onButtonClick(1)} class="btn btn-secondary">Taste it</button>
</div>
</div>
</div>
</div>
</div>
}
{this.state.txt==test &&
<div class="row">
<div class="col-lg-6">
<div class="bg-faded p-4 my-4">
<div class="card card-inverse">
<img class="card-img img-fluid w-100" src="img/herbal-tea.jpg" alt=""></img>
<div class="card-img-overlay bg-overlay">
<h2 class="card-title text-shadow text-white text-uppercase mb-0">Herbal Tea</h2>
<h4 class="text-shadow text-white"></h4>
<button onClick={() => this.onButtonClick(2)} class="btn btn-secondary">Taste it</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="bg-faded p-4 my-4">
<div class="card card-inverse">
<img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
<div class="card-img-overlay bg-overlay">
<h2 class="card-title text-shadow text-white text-uppercase mb-0">Fruit Tea</h2>
<h4 class="text-shadow text-white"></h4>
<button onClick={() => this.onButtonClick(3)} class="btn btn-secondary">Taste it</button>
</div>
</div>
</div>
</div>
</div>
}
{this.state.txt!=test &&
<div>
{this.state.list.map(function(name){
return <div class="col-lg-12">
<div class="col-lg-4">
<div class="bg-faded p-4 my-4">
<div class="card card-inverse">
<img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
<div class="card-img-overlay bg-overlay">
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<h1 className="Name">{name.name}</h1>
<h3>{name.description}</h3>
</div>
</div>
})}
</div>
}
</div>
);
}
}
export default Shop