From d7b22f96aa63b372474542ce168d5218b0c15ed3 Mon Sep 17 00:00:00 2001
From: Stanislaw-Golebiewski <slowik66@o2.pl>
Date: Thu, 26 Dec 2019 21:21:59 +0100
Subject: [PATCH] AddReceipt rewrite checkpoint

---
 bk_webapp/package-lock.json                   |  6 +++
 bk_webapp/package.json                        |  3 ++
 .../src/screens/AddReceipt/AddReceipt.jsx     | 29 +++----------
 .../components/ProductTile/ProductTile.jsx    |  2 +-
 .../subscreens/AddMetadata/AddMetadata.css    |  2 +
 .../subscreens/AddMetadata/AddMetadata.jsx    | 14 +++++++
 .../subscreens/ProductsList/ProductsList.css  |  2 +
 .../subscreens/ProductsList/ProductsList.jsx  | 14 +++++++
 .../AddReceipt/subscreens/Summary/Summary.css |  3 --
 .../AddReceipt/subscreens/Summary/Summary.js  | 14 -------
 .../subscreens/TakePhoto/TakePhoto.css        |  1 -
 .../subscreens/TakePhoto/TakePhoto.js         | 27 ------------
 .../subscreens/TakePhoto/TakePhoto.jsx        | 41 +++++++++++++++++++
 .../screens/AddReceipt/subscreens/index.js    |  5 +++
 bk_webapp/src/utils/gen_fake_data.js          | 10 +++++
 15 files changed, 103 insertions(+), 70 deletions(-)
 create mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css
 create mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx
 create mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css
 create mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx
 delete mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.css
 delete mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.js
 delete mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.js
 create mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx
 create mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/index.js
 create mode 100644 bk_webapp/src/utils/gen_fake_data.js

diff --git a/bk_webapp/package-lock.json b/bk_webapp/package-lock.json
index b04e558..02ccc73 100644
--- a/bk_webapp/package-lock.json
+++ b/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",
diff --git a/bk_webapp/package.json b/bk_webapp/package.json
index 8a1416d..e5a82d0 100644
--- a/bk_webapp/package.json
+++ b/bk_webapp/package.json
@@ -35,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "faker": "^4.1.0"
   }
 }
diff --git a/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx b/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx
index 54d6c29..7a22d46 100644
--- a/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx
+++ b/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));
diff --git a/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx b/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx
index 52e11ea..d9de41b 100644
--- a/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx
+++ b/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"
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css
new file mode 100644
index 0000000..4c7da7a
--- /dev/null
+++ b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css
@@ -0,0 +1,2 @@
+.add_metadata {
+}
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx
new file mode 100644
index 0000000..b1f6e22
--- /dev/null
+++ b/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;
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css
new file mode 100644
index 0000000..26bc458
--- /dev/null
+++ b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css
@@ -0,0 +1,2 @@
+.products_list {
+}
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx
new file mode 100644
index 0000000..463ee75
--- /dev/null
+++ b/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;
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.css b/bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.css
deleted file mode 100644
index 7e5f383..0000000
--- a/bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.summary {
-  background-color: orange;
-}
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.js b/bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.js
deleted file mode 100644
index b44cd94..0000000
--- a/bk_webapp/src/screens/AddReceipt/subscreens/Summary/Summary.js
+++ /dev/null
@@ -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;
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css b/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css
index 52945d0..2a9fd6c 100644
--- a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css
+++ b/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css
@@ -1,3 +1,2 @@
 .take_photo {
-  background-color: red;
 }
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.js b/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.js
deleted file mode 100644
index 394f8fe..0000000
--- a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.js
+++ /dev/null
@@ -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;
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx b/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx
new file mode 100644
index 0000000..7d389be
--- /dev/null
+++ b/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;
diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/index.js b/bk_webapp/src/screens/AddReceipt/subscreens/index.js
new file mode 100644
index 0000000..0c1bf29
--- /dev/null
+++ b/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 };
diff --git a/bk_webapp/src/utils/gen_fake_data.js b/bk_webapp/src/utils/gen_fake_data.js
new file mode 100644
index 0000000..c48c19e
--- /dev/null
+++ b/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 };