import React, { Component } from 'react';

import { Link } from 'react-router-dom'

import { Formik ,ErrorMessage, Field } from 'formik';
import * as yup from 'yup'
import FormInput from '../Common/FormInput'
import dataService from '../dataService';
export default class Login extends Component {

constructor(props){
super(props);
this.state={
user:{

}
}
}

render(){

return ( <div className="container col-md-12">

<div className="col-md-6 offset-md-3">
{this.state.saved && <div className="alert alert-success">Uspješno
logiran</div>}
{this.state.error && <div className="alert alert-danger">Došlo je do
greške</div>}

<br/>
<h2>Logiraj se</h2>
<hr/>
<br/>

<Formik

enableReinitialize={true}
initialValues={this.state.user}
onSubmit={(values, actions) => {
this.setState({
isSaving:true,
saved:false,
error:false
})

dataService.login(values).then(response=>{
debugger
if(response && (response.status==201 || response.status==200)){
this.setState({
saved:true,
isSaving:false,
})
window.location.href="http://localhost:3000/products"
}
else{
this.setState({
error:true,
isSaving:false
})
}
})
 }}

validationSchema={
yup.object().shape({

email: yup.string().email("Nije valjana email

adresa").required("Email je obavezno polje"),
password: yup.string().required("Lozinka je obavezno polje")
})
}

render={props => (
<form onSubmit={props.handleSubmit} className="needs-validation">

<Field name="email" render={({field,form}) => (

<FormInput label="Email:" name={"email"} field={field}
form={form} />
)}
/>
<Field type="password" name="password" render={({field,form}) =>
(
<FormInput type="password" label="Lozinka:"
name={"password"} field={field} form={form} />
)}
/>

<button type="submit" disabled={this.state.isSaving} className="btn

btn-primary btn-large" >Logiraj se</button>
</form>

)}
/>
<hr/>
<Link to="/register">Registriraj se</Link>
</div>

</div>)
}
}
import React, { Component } from 'react';
import ProductItem from './ProductItem'
import { Link } from 'react-router-dom'
import dataService from '../dataService';

export default class ProductList extends Component {

constructor(props) {
super(props);
this.state = {
products: [],
isLoading: true
};

componentDidMount() {
this.setState({isLoading: true});

dataService.getProducts()
.then(data =>{
this.setState({products: data, isLoading: false})
}
);
}
render(){
return (<div class="col-md-12">
<br/>
<h2>Proizvodi</h2>
<hr/>
<Link to="/products/-1/addEdit" className="btn btn-primary">Dodaj
novi proizvod</Link>
<hr/>
<div className="row">
{this.state.products.map((product)=>{
return (
<div className="col-md-3">
<ProductItem product={product} />
</div>
)
})
}
</div>
</div>
)
}
}
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import dataService from '../dataService';
export default class ProductDetails extends Component {

constructor(props){
super(props);
this.state={
product:{}
}
this.deleteProduct=this.deleteProduct.bind(this);
}
deleteProduct(){
dataService.deleteProduct(this.props.match.params.id).then((response)=>{
if(response.status==200){
window.location.href="/products/";
}else{
alert("Došlo je do greške")
}
})

}
componentDidMount() {
this.setState({isLoading: true});

dataService.getOneProduct(this.props.match.params.id)
.then(data =>{

this.setState({product: data, isLoading: false})

}
);
}
render(){
const {product}=this.state;
return (
<div className="col-md-12">
<br/>
<div className="row">
<div className="col-md-4">
<img className="card-img-top"
src="https://via.placeholder.com/150" alt="Card image cap" />
</div>
<div className="col-md-6">
<h2>{product.name}</h2>
<h4>{product.price} kn</h4>
<h6><span className="badge badge-
success">{product.category && product.category.name}</span></h6>
<p>{product.description}</p>
<hr/>
<div class="btn-group">
<Link role="button" className="btn btn-warning"
to={"/products/"+product.id+"/addEdit"}>Uredi</Link>
<button className="btn btn-danger"
onClick={this.deleteProduct}>Izbriši</button>
</div>
</div>

</div>
 </div>
)
}
}
import React, { Component } from 'react';
import CategoryItem from './CategoryItem'
import { Link } from 'react-router-dom'
import dataService from '../dataService';

export default class CategoriesList extends Component {

constructor(props) {
super(props);
this.state = {
categories: [],
isLoading: true
};
this.onCategoryDelete=this.onCategoryDelete.bind(this);
}
onCategoryDelete(deletedId){
this.setState({
categories:this.state.categories.filter(x=>x.id!=deletedId)
})
}
componentDidMount() {
this.setState({isLoading: true});

dataService.getCategories()
.then(data =>{

this.setState({categories: data, isLoading: false})

}
);
}
render(){
return (<div class="col-md-12">
<br/>
<h2>Kategorije</h2>
<hr/>
<Link to="/categories/-1/addEdit" className="btn btn-primary">Dodaj
novu kategoriju</Link>
<hr/>

{this.state.categories.map((category)=>{
return (
<div class="list-group">
<CategoryItem category={category}
onCategoryDelete={this.onCategoryDelete} />
</div>
)
})
}

</div>
)
}
}