Bugfix/total number of pieces (#271)

* Move pages * Revert "Move pages" This reverts commit 407088d. * 🐛 allow users to set the total number of pieces * 🐛 change default value of anyCategoryErrors
Geovation · Oct 29, 2019 · d9a3ee9 · d9a3ee9
1 parent ab9c123
commit d9a3ee9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 24 deletions.
diff --git a/...s/PhotoPage/CategoryField/components/CategoryDropdown/FieldLabel/components/FieldLabel.js b/...s/PhotoPage/CategoryField/components/CategoryDropdown/FieldLabel/components/FieldLabel.js
@@ -1,10 +1,11 @@
 import React from "react";
+import classnames from "classnames";
 
 import "./FieldLabel.scss";
 
-const FieldLabel = ({ label, required, children }) => {
+const FieldLabel = ({ label, required, children, className }) => {
   return (
-    <div className={"FieldLabel__container"}>
+    <div className={classnames("FieldLabel__container", className)}>
       <p className={"FieldLabel__label"}>
         {label}
         {required && <span className={"FieldLabel__required"}> *</span>}

diff --git a/src/components/pages/PhotoPage/Fields/components/Fields.js b/src/components/pages/PhotoPage/Fields/components/Fields.js
@@ -5,18 +5,29 @@ import Button from "@material-ui/core/Button";
 import useOnOutsideClick from "hooks/useOnOutsideClick";
 
 import CategoryField from "../../CategoryField";
+import { FieldLabelWithInput } from "../../CategoryField/components/CategoryDropdown/FieldLabel";
+import { validateIsPositiveNumber } from "../../CategoryField/components/validation";
 
 import "./Fields.scss";
 
 const INITIAL_CATEGORY_VALUES = [{ keyIndex: 0, values: { error: true } }];
 
-const Fields = ({ imgSrc, handleChange }) => {
+const Fields = ({ imgSrc, handleChange, handleTotalCountChange }) => {
   const [categoryValues, setCategoryValues] = useState(INITIAL_CATEGORY_VALUES);
   const [childIndex, setNextChildIndex] = useState(categoryValues.length);
-  const [totalCount, setTotalCount] = useState(0);
-  const [anyCategoryErrors, setAnyCategoryErrors] = useState(false);
+  const [totalCount, setTotalCount] = useState(null);
+  const [anyCategoryErrors, setAnyCategoryErrors] = useState(true);
+  const [totalCountErrors, setTotalCountErrors] = useState(true);
   const [photoEnlarged, setPhotoEnlarged] = useState(false);
 
+  const handleSetTotalCount = newTotalCount => {
+    const countError = !validateIsPositiveNumber(newTotalCount);
+
+    setTotalCount(newTotalCount);
+    setTotalCountErrors(countError);
+    handleTotalCountChange(countError || anyCategoryErrors, totalCount);
+  };
+
   const handleClickAdd = categoryValues => {
     categoryValues.push({ keyIndex: childIndex, values: {} });
     setNextChildIndex(childIndex + 1);
@@ -27,27 +38,21 @@ const Fields = ({ imgSrc, handleChange }) => {
 
   const handleCategoryChange = index => newValue => {
     let error = false;
-    let count = 0;
     const updatedCategoryValues = categoryValues.map(categoryValue => {
-      const { keyIndex, values } = categoryValue;
+      const { keyIndex } = categoryValue;
 
       if (newValue.error) error = true;
 
       if (index === keyIndex) {
-        if (!isNaN(newValue.number)) count += Number(newValue.number);
-
         return { keyIndex, values: newValue };
       }
 
-      if (!isNaN(values.number)) count += Number(values.number);
-
       return categoryValue;
     });
 
     setAnyCategoryErrors(error);
-    handleChange(error, updatedCategoryValues);
+    handleChange(totalCountErrors || error, updatedCategoryValues);
     setCategoryValues(updatedCategoryValues);
-    setTotalCount(count);
   };
 
   const handleClickRemove = useCallback(
@@ -65,9 +70,9 @@ const Fields = ({ imgSrc, handleChange }) => {
 
       setCategoryValues(filteredCategoryValues);
       setAnyCategoryErrors(anyErrors);
-      handleChange(anyErrors, filteredCategoryValues);
+      handleChange(totalCountErrors || anyErrors, filteredCategoryValues);
     },
-    [categoryValues, handleChange]
+    [categoryValues, handleChange, totalCountErrors]
   );
 
   const imgRef = useOnOutsideClick(() => setPhotoEnlarged(false));
@@ -86,9 +91,14 @@ const Fields = ({ imgSrc, handleChange }) => {
             onClick={() => setPhotoEnlarged(!photoEnlarged)}
           />
         </div>
-        <div className="Fields__numberOfPieces">
-          Total number of pieces in photo: {totalCount}
-        </div>
+        <FieldLabelWithInput
+          label="Total number of pieces in photo:"
+          placeholder="e.g. 0"
+          value={totalCount}
+          setValue={handleSetTotalCount}
+          validationFn={validateIsPositiveNumber}
+          className="Fields__numberOfPieces"
+        />
       </div>
       <div className="Fields__instruction">
         Identify each piece of rubbish in the photo

diff --git a/src/components/pages/PhotoPage/Fields/components/Fields.scss b/src/components/pages/PhotoPage/Fields/components/Fields.scss
@@ -30,8 +30,8 @@
 }
 
 .Fields__numberOfPieces {
-  widows: 100%;
-  margin-left: 15px;
+  width: 100%;
+  margin-left: 25px;
 }
 
 .Fields__category {

diff --git a/src/components/pages/PhotoPage/index.js b/src/components/pages/PhotoPage/index.js
@@ -30,7 +30,8 @@ const emptyState = {
   anyError: true,
   enabledUploadButton: true,
   next: false,
-  fieldsValues: {}
+  fieldsValues: {},
+  totalCount: null
 };
 
 const styles = theme => ({
@@ -189,7 +190,8 @@ class PhotoPage extends Component {
       console.error(error);
 
       // debugger
-      const extraInfo = error.code === "storage/canceled" ? "" : `Try again (${error.message})`
+      const extraInfo =
+        error.code === "storage/canceled" ? "" : `Try again (${error.message})`;
       this.openDialog(`Photo upload was canceled. ${extraInfo}`);
     }
 
@@ -221,7 +223,10 @@ class PhotoPage extends Component {
         error => {
           // debugger
           console.error(error);
-          const extraInfo = error.code === "storage/canceled" ? "" : `Try again (${error.message})`;
+          const extraInfo =
+            error.code === "storage/canceled"
+              ? ""
+              : `Try again (${error.message})`;
           this.openDialog(`Photo upload was canceled. ${extraInfo}`);
         },
         () => {
@@ -324,7 +329,11 @@ class PhotoPage extends Component {
   };
 
   handleCancel = () => {
-    this.setState({ sending: false, sendingProgress: 0, enabledUploadButton: true });
+    this.setState({
+      sending: false,
+      sendingProgress: 0,
+      enabledUploadButton: true
+    });
 
     if (this.uploadTask) {
       this.uploadTask.cancel();
@@ -358,6 +367,10 @@ class PhotoPage extends Component {
     this.setState({ anyError, fieldsValues });
   };
 
+  handleTotalCountChange = (anyError, totalCount) => {
+    this.setState({ anyError, totalCount });
+  };
+
   render() {
     const { classes, label, fields } = this.props;
     return (
@@ -377,6 +390,7 @@ class PhotoPage extends Component {
             <div className={classes.fields}>
               <Fields
                 handleChange={this.handleChangeFields}
+                handleTotalCountChange={this.handleTotalCountChange}
                 imgSrc={this.state.imgSrc}
                 fields={fields}
                 error={this.state.anyError}