AddReceipt rewrite checkpoint

bk_webapp/package-lock.json

@@ -5634,6 +5634,12 @@
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
+    "faker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz",
+      "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",

bk_webapp/package.json

@@ -35,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "faker": "^4.1.0"
   }
 }

bk_webapp/src/screens/AddReceipt/AddReceipt.jsx

@@ -2,13 +2,13 @@ import React, { useState } from "react";
 import { Button, Container, Icon, Menu } from "semantic-ui-react";
 import { useHistory } from "react-router-dom";
 
+import { fake_product } from "../../utils/gen_fake_data";
 import { ProductTile, ModalConfirm } from "./components";
+import { AddMetadata, ProductsList, TakePhoto } from "./subscreens";
 import "./AddReceipt.css";
 
-const INIT_STATE = [];
-
 function AddReceipt() {
-  const [products, setProducts] = useState(INIT_STATE);
+  const [products, setProducts] = useState([]);
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
   const history = useHistory();
 
@@ -50,15 +50,13 @@ function AddReceipt() {
               name={product.name}
               price={product.price}
               onRemove={() => {
-                console.log(index, "lol");
                 removeItem(index);
               }}
             />
           ))}
         </Container>
         <Container textAlign="right">
-          Razem:{" "}
-          {products.length > 0 ? sum_products_prices(products).toFixed(2) : "-"}
+          Razem: {products.length > 0 ? sum_products_prices(products) : "-"}
           zł
         </Container>
         <Button
@@ -66,7 +64,7 @@ function AddReceipt() {
           icon
           color="green"
           onClick={() => {
-            addItem(get_random_product());
+            addItem(fake_product());
           }}
           className="add-product-btn"
         >
@@ -95,23 +93,6 @@ function AddReceipt() {
   );
 }
 
-function get_random_product() {
-  const products = [
-    "Ser",
-    "Ogórek",
-    "Papier toaletowy",
-    "Awokado",
-    "Chleb",
-    "Woda",
-    "Szampon"
-  ];
-  let tmp = Math.random() * Math.floor(Math.random() * Math.floor(10));
-  return {
-    name: products[Math.floor(Math.random() * products.length)],
-    price: tmp
-  };
-}
-
 function sum_products_prices(products) {
   let sum = 0;
   products.forEach(prod => (sum += prod.price));

bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx

@@ -19,7 +19,7 @@ function ProductTile(props) {
 
       <div className="tile-name">{props.name}</div>
 
-      <div className="tile-price"> {props.price.toFixed(2)} zł </div>
+      <div className="tile-price"> {props.price} zł </div>
       {clicked && (
         <Icon
           name="trash alternate"

bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css

@@ -0,0 +1,2 @@
+.add_metadata {
+}

bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+
+import "./AddMetadata.css";
+
+function AddMetadata() {
+  return (
+    <div className="add_metadata">
+      <h2> AddMetadata screen </h2>
+    </div>
+  );
+}
+
+export default AddMetadata;

bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css

@@ -0,0 +1,2 @@
+.products_list {
+}

bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+
+import "./ProductsList.css";
+
+function ProductsList() {
+  return (
+    <div className="products_list">
+      <h1> ProductsList screen </h1>
+    </div>
+  );
+}
+
+export default ProductsList;

bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.css

@@ -1,3 +0,0 @@
-.summary {
-  background-color: orange;
-}

bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.js

@@ -1,14 +0,0 @@
-import React from "react";
-import { Button } from "semantic-ui-react";
-
-import "./Summary.css";
-
-function Summary() {
-  return (
-    <div className="summary">
-      <Button>Podsumowanie</Button>
-    </div>
-  );
-}
-
-export default Summary;

bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css

@@ -1,3 +1,2 @@
 .take_photo {
-  background-color: red;
 }

bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { Button } from "semantic-ui-react";
-import Camera, { IMAGE_TYPES } from "react-html5-camera-photo";
-import "react-html5-camera-photo/build/css/index.css";
-
-import "./TakePhoto.css";
-
-function TakePhoto() {
-  const handleTakePhoto = dataUri => {
-    console.log(dataUri);
-  };
-  return (
-    <div className="take_photo">
-      <h2>Dodaj Paragon</h2>
-      <Camera
-        onTakePhoto={dataUri => {
-          handleTakePhoto(dataUri);
-        }}
-        imageType={IMAGE_TYPES.JPG}
-        idealResolution={{ width: 640, height: 480 }}
-      />
-      }<Button>Powrót</Button>
-    </div>
-  );
-}
-
-export default TakePhoto;

bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import Camera, { IMAGE_TYPES } from "react-html5-camera-photo";
+import { Dimmer, Loader } from "semantic-ui-react";
+
+import "react-html5-camera-photo/build/css/index.css";
+import "./TakePhoto.css";
+
+function TakePhoto() {
+  const history = useHistory();
+  const [waitingForResponse, setWaitingForResponse] = useState(false);
+
+  const handleTakePhoto = dataUri => {
+    const afterResponse = () => {
+      history.push("/add_receipt/list");
+    };
+    setWaitingForResponse(true);
+    //simulate API response time
+    const timeout = setTimeout(afterResponse, 2000);
+  };
+
+  return (
+    <div className="take_photo">
+      {waitingForResponse ? (
+        <Dimmer active>
+          <Loader size="huge">Loading</Loader>
+        </Dimmer>
+      ) : (
+        <Camera
+          onTakePhoto={dataUri => {
+            handleTakePhoto(dataUri);
+          }}
+          imageType={IMAGE_TYPES.JPG}
+          idealResolution={{ width: 640, height: 480 }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default TakePhoto;

bk_webapp/src/screens/AddReceipt/subscreens/index.js

@@ -0,0 +1,5 @@
+import AddMetadata from "./AddMetadata/AddMetadata";
+import ProductsList from "./ProductsList/ProductsList";
+import TakePhoto from "./TakePhoto/TakePhoto";
+
+export { AddMetadata, ProductsList, TakePhoto };

bk_webapp/src/utils/gen_fake_data.js

@@ -0,0 +1,10 @@
+const faker = require("faker");
+
+const fake_product = () => {
+  return {
+    name: faker.commerce.product(),
+    price: parseFloat(faker.commerce.price())
+  };
+};
+
+export { fake_product };