Fix compilation issue

aws-samples · Feb 23, 2021 · fa9bc3f · fa9bc3f
1 parent 82176a7
commit fa9bc3f
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 64 deletions.
diff --git a/src/web-ui/src/App.js b/src/web-ui/src/App.js
@@ -10,7 +10,7 @@ import Help from "./components/Help";
 
 import gateway from "./utils/gateway";
 
-export default () => {
+const App = () => {
   const [authState, setAuthState] = useState(undefined);
   const [currentPage, setCurrentPage] = useState("projects");
   const [selectedProjectVersion, setSelectedProjectVersion] = useState(
@@ -19,7 +19,7 @@ export default () => {
 
   const onHelp = () => setCurrentPage("help");
   const loadProjectList = () => setCurrentPage("projects");
-  const loadProjectVersion = projectVersionArn => {
+  const loadProjectVersion = (projectVersionArn) => {
     setSelectedProjectVersion(projectVersionArn);
     setCurrentPage("image");
   };
@@ -30,7 +30,7 @@ export default () => {
   return (
     <div className={classNames.join(" ")}>
       <Authenticator
-        onStateChange={s => setAuthState(s)}
+        onStateChange={(s) => setAuthState(s)}
         hide={[Greetings, SignUp]}
       >
         {authState === "signedIn" && (
@@ -63,3 +63,5 @@ export default () => {
     </div>
   );
 };
+
+export default App;
diff --git a/src/web-ui/src/components/FileUpload.js b/src/web-ui/src/components/FileUpload.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({ id, onChange }) => (
+const FileUpload = ({ id, onChange }) => (
   <div className="form-element">
     <div className="form-prompt">
       Use your own image
@@ -29,3 +29,5 @@ export default ({ id, onChange }) => (
     </div>
   </div>
 );
+
+export default FileUpload;
diff --git a/src/web-ui/src/components/Header.js b/src/web-ui/src/components/Header.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Container, Nav, Navbar } from "react-bootstrap";
 
-export default ({ currentPage, onHelp, loadProjectList }) => (
+const Header = ({ currentPage, onHelp, loadProjectList }) => (
   <Navbar
     style={{ backgroundColor: "#232f3e", marginBottom: "20px" }}
     variant="dark"
@@ -28,3 +28,5 @@ export default ({ currentPage, onHelp, loadProjectList }) => (
     </Container>
   </Navbar>
 );
+
+export default Header;
diff --git a/src/web-ui/src/components/Help.js b/src/web-ui/src/components/Help.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default () => (
+const Help = () => (
   <div className="intro tab-content">
     <h2>Amazon Rekognition Custom Labels</h2>
     Amazon Rekognition Custom Labels is a new feature of Amazon Rekognition that
@@ -37,3 +37,5 @@ export default () => (
     </a>
   </div>
 );
+
+export default Help;
diff --git a/src/web-ui/src/components/ImageMode.js b/src/web-ui/src/components/ImageMode.js
@@ -7,7 +7,7 @@ import {
   Form,
   FormGroup,
   Row,
-  Spinner
+  Spinner,
 } from "react-bootstrap";
 import { mapResults } from "../utils";
 
@@ -17,7 +17,7 @@ import ProjectSelect from "./ProjectSelect";
 
 const validProjectVersionState = "RUNNING";
 
-export default ({ gateway, projectVersionArn }) => {
+const ImageMode = ({ gateway, projectVersionArn }) => {
   const [apiResponse, setApiResponse] = useState(undefined);
   const [detectedLabels, setDetectedLabels] = useState(undefined);
   const [errorDetails, setErrorDetails] = useState("");
@@ -35,7 +35,7 @@ export default ({ gateway, projectVersionArn }) => {
   const validateImage = (type, size) => {
     const validType = [
       "data:image/jpeg;base64",
-      "data:image/png;base64"
+      "data:image/png;base64",
     ].includes(type);
 
     const validSize = size < 4000000;
@@ -48,7 +48,7 @@ export default ({ gateway, projectVersionArn }) => {
     return result;
   };
 
-  const processImage = file => {
+  const processImage = (file) => {
     resetSummary();
     const reader = new FileReader();
 
@@ -74,7 +74,7 @@ export default ({ gateway, projectVersionArn }) => {
     }
   };
 
-  const tryFetchingLabels = value => {
+  const tryFetchingLabels = (value) => {
     setProjectVersion(value);
     if (image) setFormState("ready");
   };
@@ -88,12 +88,12 @@ export default ({ gateway, projectVersionArn }) => {
   const scrollHandler = useCallback(() => calculateImageCoordinates(), []);
 
   useEffect(() => {
-    gateway.describeProjects().then(x =>
+    gateway.describeProjects().then((x) =>
       Promise.all(
-        x.ProjectDescriptions.map(project =>
+        x.ProjectDescriptions.map((project) =>
           gateway.describeProjectVersions(project.ProjectArn)
         )
-      ).then(x => {
+      ).then((x) => {
         const result = mapResults(x, validProjectVersionState);
         if (result.length === 0) {
           setErrorDetails(
@@ -113,12 +113,12 @@ export default ({ gateway, projectVersionArn }) => {
       calculateImageCoordinates();
       gateway
         .detectCustomLabels(projectVersion, image)
-        .then(response => {
+        .then((response) => {
           setApiResponse(response);
           setDetectedLabels(response.CustomLabels);
           setFormState("processed");
         })
-        .catch(e => {
+        .catch((e) => {
           setFormState("error");
           setErrorDetails(e);
         });
@@ -134,7 +134,7 @@ export default ({ gateway, projectVersionArn }) => {
           <Alert
             variant="danger"
             style={{
-              display: formState === "error" ? "block" : "none"
+              display: formState === "error" ? "block" : "none",
             }}
           >
             An error happened{errorDetails && `: ${errorDetails}`}.{" "}
@@ -147,14 +147,14 @@ export default ({ gateway, projectVersionArn }) => {
               style={{
                 textAlign: "left",
                 marginLeft: "20px",
-                paddingBottom: "40px"
+                paddingBottom: "40px",
               }}
             ></Col>
             <Col md={8} sm={6}>
               {image && (
                 <img
                   alt="The uploaded content"
-                  ref={x => (imageContainer.current = x)}
+                  ref={(x) => (imageContainer.current = x)}
                   src={`data:image/png;base64, ${image}`}
                   style={{ width: "100%", margin: "10px" }}
                 />
@@ -172,7 +172,7 @@ export default ({ gateway, projectVersionArn }) => {
                   <FormGroup>
                     <FileUpload
                       id="asd"
-                      onChange={e => processImage(e.target.files[0])}
+                      onChange={(e) => processImage(e.target.files[0])}
                     />
                   </FormGroup>
                 </Form>
@@ -199,3 +199,5 @@ export default ({ gateway, projectVersionArn }) => {
     </Row>
   );
 };
+
+export default ImageMode;
diff --git a/src/web-ui/src/components/LabelsAccordion.js b/src/web-ui/src/components/LabelsAccordion.js
@@ -22,7 +22,7 @@ const CustomToggle = ({ children, open }) => {
   );
 };
 
-export default ({ labelName, children, open = true }) => {
+const LabelsAccordion = ({ labelName, children, open = true }) => {
   return (
     <Accordion
       defaultActiveKey={open ? "0" : undefined}
@@ -39,3 +39,5 @@ export default ({ labelName, children, open = true }) => {
     </Accordion>
   );
 };
+
+export default LabelsAccordion;
diff --git a/src/web-ui/src/components/LabelsSummary.js b/src/web-ui/src/components/LabelsSummary.js
@@ -12,17 +12,17 @@ const generateRandomColor = () => {
   return color;
 };
 
-const filterAndSortLabels = labels =>
+const filterAndSortLabels = (labels) =>
   labels
-    .map(label => ({
+    .map((label) => ({
       boundingBoxes:
         label.Geometry && label.Geometry.BoundingBox
           ? [label.Geometry.BoundingBox]
           : [],
       confidence: label.Confidence,
-      name: label.Name
+      name: label.Name,
     }))
-    .filter(x => x.confidence > 0)
+    .filter((x) => x.confidence > 0)
     .sort((a, b) => {
       if (a.confidence > b.confidence) {
         return -1;
@@ -31,36 +31,36 @@ const filterAndSortLabels = labels =>
       } else return 0;
     });
 
-const percentageToString = percentage => Math.round(percentage * 10) / 10;
+const percentageToString = (percentage) => Math.round(percentage * 10) / 10;
 
-export default ({
+const LabelsSummary = ({
   apiResponse,
   containerCoordinates,
   detectedLabels,
   image,
   projectVersionArn,
-  showLabelBoundingBoxes
+  showLabelBoundingBoxes,
 }) => {
   const colors = useRef({});
 
-  const getColor = labelName => {
+  const getColor = (labelName) => {
     colors.current[labelName] =
       colors.current[labelName] || generateRandomColor();
     return colors.current[labelName];
   };
 
   const highlight = (index, color) => {
     const boxes = document.getElementsByClassName(`bb-${index}`);
-    Array.from(boxes).forEach(box => {
+    Array.from(boxes).forEach((box) => {
       box.style.opacity = 0.5;
       box.style.filter = "alpha(opacity=50)";
       box.style.backgroundColor = color;
     });
   };
 
-  const removeHighlight = index => {
+  const removeHighlight = (index) => {
     const boxes = document.getElementsByClassName(`bb-${index}`);
-    Array.from(boxes).forEach(box => {
+    Array.from(boxes).forEach((box) => {
       box.style.opacity = 1;
       box.style.filter = "alpha(opacity=100)";
       box.style.backgroundColor = null;
@@ -119,7 +119,7 @@ export default ({
                                           containerCoordinates.height,
                                       width:
                                         containerCoordinates.width *
-                                        boundingBox.Width
+                                        boundingBox.Width,
                                     }}
                                   >
                                     {label.name}
@@ -140,7 +140,7 @@ export default ({
               {JSON.stringify(
                 {
                   Image: { Bytes: image },
-                  ProjectVersionArn: projectVersionArn
+                  ProjectVersionArn: projectVersionArn,
                 },
                 undefined,
                 2
@@ -157,3 +157,5 @@ export default ({
     </div>
   );
 };
+
+export default LabelsSummary;
diff --git a/src/web-ui/src/components/ProjectActions.js b/src/web-ui/src/components/ProjectActions.js
@@ -3,13 +3,13 @@ import { Alert, Button, Form, Modal } from "react-bootstrap";
 
 import { formatErrorMessage } from "../utils";
 
-export default ({ gateway, onError, project, refreshProjects }) => {
+const ProjectActions = ({ gateway, onError, project, refreshProjects }) => {
   const [errorMessage, setErrorMessage] = useState(undefined);
   const [formState, setFormState] = useState("initial");
   const [minInferenceUnits, setMinInferenceUnits] = useState("");
   const [show, setShow] = useState(false);
 
-  const toggle = reset => {
+  const toggle = (reset) => {
     const hiding = show;
     setShow(!show);
     if (reset) {
@@ -19,7 +19,7 @@ export default ({ gateway, onError, project, refreshProjects }) => {
     if (hiding && formState === "saved") refreshProjects();
   };
 
-  const submitForm = e => {
+  const submitForm = (e) => {
     setFormState("saving");
     e.preventDefault();
 
@@ -29,24 +29,24 @@ export default ({ gateway, onError, project, refreshProjects }) => {
         parseInt(minInferenceUnits, 10)
       )
       .then(() => setFormState("saved"))
-      .catch(e => {
+      .catch((e) => {
         setErrorMessage(formatErrorMessage(e));
         setFormState("error");
       });
   };
 
-  const stopModel = e => {
+  const stopModel = (e) => {
     e.preventDefault();
 
     gateway
       .stopProjectVersion(project.ProjectVersionArn)
       .then(() => refreshProjects())
-      .catch(e => onError(e));
+      .catch((e) => onError(e));
   };
 
   const isFormValid = parseInt(minInferenceUnits, 10) > 0;
 
-  const validationAttributes = isValid =>
+  const validationAttributes = (isValid) =>
     isValid ? { isValid: true } : { isInvalid: true };
 
   if (project.Status === "RUNNING")
@@ -112,7 +112,7 @@ export default ({ gateway, onError, project, refreshProjects }) => {
                     type="text"
                     value={minInferenceUnits}
                     placeholder="Needs to be more than 0"
-                    onChange={e => setMinInferenceUnits(e.target.value)}
+                    onChange={(e) => setMinInferenceUnits(e.target.value)}
                     style={{ width: "100%" }}
                     {...validationAttributes(isFormValid)}
                   />
@@ -139,3 +139,5 @@ export default ({ gateway, onError, project, refreshProjects }) => {
 
   return "";
 };
+
+export default ProjectActions;
diff --git a/src/web-ui/src/components/ProjectSelect.js b/src/web-ui/src/components/ProjectSelect.js
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { findDOMNode } from "react-dom";
 import { Form } from "react-bootstrap";
 
-export default ({ onChange, onMount, projects, preSelected }) => {
+const ProjectSelect = ({ onChange, onMount, projects, preSelected }) => {
   const selected = useRef(undefined);
 
   const changeHandler = () => onChange(findDOMNode(selected.current).value);
@@ -23,7 +23,7 @@ export default ({ onChange, onMount, projects, preSelected }) => {
         <Form.Control
           as="select"
           onChange={changeHandler}
-          ref={x => (selected.current = x)}
+          ref={(x) => (selected.current = x)}
           defaultValue={preSelected}
         >
           {Object.keys(projects).map((project, i) =>
@@ -41,3 +41,5 @@ export default ({ onChange, onMount, projects, preSelected }) => {
     </div>
   );
 };
+
+export default ProjectSelect;