0% found this document useful (0 votes)
46 views6 pages

Link Errormessage Field: Constructor

This document contains code for several React components: 1. A Login component that handles user login via a Formik form submission to a dataService. It displays success/error messages. 2. A ProductList component that fetches product data and displays it using a ProductItem component. 3. A ProductDetails component that displays a single product's details fetched via its ID, and allows editing or deleting the product. 4. A CategoriesList component that fetches category data and displays it using a CategoryItem component, allowing category deletion.

Uploaded by

Ivan Varjačić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
46 views6 pages

Link Errormessage Field: Constructor

This document contains code for several React components: 1. A Login component that handles user login via a Formik form submission to a dataService. It displays success/error messages. 2. A ProductList component that fetches product data and displays it using a ProductItem component. 3. A ProductDetails component that displays a single product's details fetched via its ID, and allows editing or deleting the product. 4. A CategoriesList component that fetches category data and displays it using a CategoryItem component, allowing category deletion.

Uploaded by

Ivan Varjačić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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>
)
}
}

You might also like