<file_sep>import * as React from "react";
import { ProductsList } from "./Products/ProductsList";
import { AppHeader } from "./AppHeader";
import  {Login}  from "./Components/Login";
export class App extends React.Component {
  state = {
    products: null
  };

  componentDidMount() {
    fetch("http://chamniam.pl/api/foodproduct")
      .then(res => res.json())
      .then(json => this.setState({ products: json})
        );
  }

  render() {
    const products = this.state.products;
    return (
      <div>
        <Login/>
        <AppHeader />
        <main className="ui main text container">
          {products ? <ProductsList products={products} /> : 'Ładowanie…'}
        </main>
      </div>
    );
  }
}<file_sep>import * as React from "react";
import "./Components.css"
export const Textbox = ({label 
   }) => {
  return (
      <div>
    <label>{label}</label><input type="text" />
        
    </div>
  );
};<file_sep>self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "d4a7a4c635d03daa5df25140f8d9150e",
    "url": "/type-of-web-test/index.html"
  },
  {
    "revision": "1485a38dbef828ac08b2",
    "url": "/type-of-web-test/static/css/main.5f361e03.chunk.css"
  },
  {
    "revision": "b077ffec2f0d97749d54",
    "url": "/type-of-web-test/static/js/2.5b0a94fe.chunk.js"
  },
  {
    "revision": "<PASSWORD>",
    "url": "/type-of-web-test/static/js/2.5b0a94fe.chunk.js.LICENSE.txt"
  },
  {
    "revision": "1485a38dbef828ac08b2",
    "url": "/type-of-web-test/static/js/main.696c9894.chunk.js"
  },
  {
    "revision": "0ae4dbeea75956a66165",
    "url": "/type-of-web-test/static/js/runtime-main.309de35e.js"
  },
  {
    "revision": "5d5d9eefa31e5e13a6610d9fa7a283bb",
    "url": "/type-of-web-test/static/media/logo.5d5d9eef.svg"
  }
]);<file_sep>import * as React from "react";
import "./Components.css"
import  {Textbox}  from "./Textbox";
export const Login = ({
   }) => { 
    //  <script src="https://www.google.com/recaptcha/api.js"></script> 
      //   grecaptcha.ready(function() {
      //     grecaptcha.execute('<KEY>', {action: 'homepage'}).then(function(token) {
      //         alert(token);
      //     });
      //   });
      // }
  return (
    

        
    <div className="login">
        <div className="login-header">
            <div>Logowanie</div>
            <div className="login-close-btn">
                <span className="x">+
                </span>
            </div>
        </div>
<div className="login-screen">
<Textbox label="Login: "/>
<Textbox label="Email: "/>

<KEY>_9vr7F
6Ld3B8wZAAAAAEQipCMnKa0NQFwpLwgy3kvNDagA
</div>
</div>
  )};<file_sep>import * as React from "react";

export const AppHeader = () => {
  return (
    <header className="ui fixed menu">
      <nav className="ui container">
        <span  className="header item">
          Lista produktów
        </span>
        <div className="header item">
          <button className="ui button">Dodaj</button>
        </div>
      </nav>
    </header>
  );
};<file_sep>
import * as React from "react";
import { ProductItem } from "./ProductItem";

export class ProductsList extends React.Component {
  productToproductItem = product => {
    const productCategory = product.ProductCategory.PCategory;
    const name = product.ProductName;
    const foodProductId = product.FoodProductId;
    const calories = product.Calories;
    const carbohydrates = product.Carbohydrates;
    const fat = product.Fat;
    const fiber = product.Fiber;
    const kiloJoules = product.KiloJoules;
    const productCategoryId = product.ProductCategoryId;
    const protein = product.Protein;
    const salt = product.Salt;
    return <ProductItem key={foodProductId} 
                        calories = {calories}
                        productCategory={productCategory} 
                        name={name} 
                        carbohydrates={carbohydrates}
                        fat ={fat}
                        fiber = {fiber}
                        kiloJoules = {kiloJoules}
                        productCategoryId = {productCategoryId}
                        protein = {protein}
                        salt = {salt}
                        />;
  };

  render() {
    return (
      <ul className="ui relaxed divided list selection">
        {this.props.products.map(this.productToproductItem)}
      </ul>
    );
  }
}
<file_sep>import * as React from "react";

export const ProductItem = ({ 
  product:Product,
  carbohydrates,
  fat,
  fiber,
  kiloJoules,
  productCategoryId,
  protein,
  salt,
  name,
  productCategory
   }) => {
  return (
    <li className="item">
      <img src={name} className="ui mini rounded image" alt={name} />
      <div className="content">
        <h4 className="header">{name}</h4>
        <div className="description">Węglowodany: {carbohydrates}</div>
        <div className="description">Tłuszcz: {fat}</div>
        <div className="description">Błonnik: {fiber}</div>
        <div className="description">KiloJoule: {kiloJoules}</div>
        <div className="description">Białko: {protein}<div/> 
        <div className="description">Sól: {salt}</div>
        <div className="description">Kategoria produktu: {productCategory}</div>
      </div>
      </div>
    </li>
  );
};