qwvxRvPK

1import React, { Component } from 'react';
2import {Link} from "react-router-dom";
3import { withRouter } from 'react-router-dom';
4import '../styles/SignIn.css';
5import '../styles/IngredientsSearch.css';
6import API from '../axiosConfig';
7
8class IngredientsSearch extends Component {
9
10    constructor(props){
11        super(props);
12        this.state={
13            ingredients: [],
14            name: ''
15        }
16    }
17
18
19    componentDidMount() {
20        API.get(`/ingredient`)
21          .then(res => {
22            console.log(res);
23            console.log(res.data);
24            this.setState({ingredients: res.data});
25          })
26          .catch((error) => {
27              console.log(error);
28          })
29
30        //   const myData = this.state.ingredients
31        //     .sort(function(a, b) {
32        //         if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
33        //         if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
34        //         return 0;
35        //     })
36        //     .map((item, i) => <List key={i} data={item} />);
37    }
38
39
40    handleChange = event => {
41        this.setState({ name: event.target.value });
42        this.setState({isOpen: false});
43    }
44
45    handleSubmit = event => {
46        event.preventDefault();
47    
48        const name = this.state.name;
49    
50        API.get(`/ingredients/?name=${name}`)
51          .then(res => {
52            console.log(res);
53            console.log(res.data);
54            this.setState({ingredients: res.data});
55            this.setState({isError: false});
56          })
57          .catch((error) => {
58              console.log(error);
59          })
60      }
61
62
63    render() {
64        return (
65            <div>
66                <nav className="navbar">
67                    <ul className="topnav">
68                        <div className="brand">Menu<span className="generator">Generator</span></div>
69                        <li><Link className="nav-link" to="/main">Strona główna</Link></li>
70                        <li><Link className="nav-link" to="/main">Profil</Link></li>
71                        <li><Link className="nav-link" to="/main#">Jadłospisy</Link></li>
72                        <li><Link className="nav-link" to="/main">Przepisy</Link></li>
73                        <li><Link className="nav-link" to="/ingredients">Składniki</Link></li>
74                        <button className="logout btn btn-outline-dark" onClick={this.handleOnClick}>Wyloguj się</button>
75                    </ul>
76                </nav>
77
78
79                <h1>Lista składników wraz z ich kalorycznością</h1>
80
81                <nav className="navbar navbar-light  ingredientNav">
82                    <form className="form-inline" onSubmit={this.handleSubmit}>
83                        <h4>Znajdź składnik w tabeli lub wyszukaj go</h4>  
84                        <input className="form-control mr-sm-2" type="search" placeholder="Wyszukaj składnik" aria-label="Search" onChange={this.handleChange}/>
85                        <button type="button" className="btn btn-outline-success my-2 my-sm-0" type="submit">Szukaj</button>
86                    </form>
87                </nav>
88
89                <div className="container ingredientsContainer">
90                    <div className="row">
91                        <div className="col"></div>
92                        <div className="col-sm-12 col-md-8">
93                            <ul className="ingredientsList list-group">
94                                {this.state.ingredients.map(ingredient => <li className="list-group-item" key={ingredient.id}><strong>{ingredient.name}</strong>  {ingredient.calories}</li>)}
95                            </ul>
96                        </div>
97                        <div className="col"> </div>
98                    </div>
99                </div>
100            </div>
101        );
102    }
103}
104
105export default withRouter (IngredientsSearch);