Merge pull request #15 from aws-samples/deps

Upgrade to react-scripts@4

src/cfn/template.yaml

@@ -14,7 +14,7 @@ Globals:
         MIN_CONFIDENCE: !Ref MinConfidence
         OBJECTS_OF_INTEREST_LABELS: !Join [",", !Ref ObjectsOfInterestLabels]
         REGION: !Ref AWS::Region
-        VERSION: '0.11'
+        VERSION: '0.12'
   Api:
     EndpointConfiguration: REGIONAL
     Cors:

src/web-ui/package.json

@@ -10,7 +10,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "1.0.0",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^4.0.0",
     "react-webcam": "^5.0.2",
     "uuid": "^3.3.2"
   },

src/web-ui/src/App.js

@@ -11,7 +11,7 @@ import EngagementSummary from "./components/EngagementsSummary";
 import Header from "./components/Header";
 import SettingsHelp from "./components/SettingsHelp";
 
-export default () => {
+const App = () => {
   const [authState, setAuthState] = useState(undefined);
   const [readyToStream, setReadyToStream] = useState(false);
   const [testResults, setTestResults] = useState([]);
@@ -122,3 +122,5 @@ export default () => {
     </div>
   );
 };
+
+export default App;

src/web-ui/src/components/AddUserModal.js

@@ -3,7 +3,7 @@ import { Alert, Button, Form, Modal } from "react-bootstrap";
 
 import { isEmpty } from "../utils";
 
-export default ({ onSave }) => {
+const AddUserModal = ({ onSave }) => {
   const [formState, setFormState] = useState("initial");
   const [fullName, setFullName] = useState("");
   const [image, setImage] = useState(undefined);
@@ -124,3 +124,5 @@ export default ({ onSave }) => {
     </>
   );
 };
+
+export default AddUserModal;

src/web-ui/src/components/CameraHelp.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 
-export default props => {
+const CameraHelp = (props) => {
   const currentUrl = window.location.href;
   if (props.show) {
     return (
@@ -19,3 +19,5 @@ export default props => {
   }
   return "";
 };
+
+export default CameraHelp;

src/web-ui/src/components/EngagementsSummary.js

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 
 import Icon from "./Icon";
 
-export default ({ testResults }) => (
+const EngagementsSummary = ({ testResults }) => (
   <div className="tests-container">
     {testResults.map((test, index) => (
       <Card style={{ marginTop: "20px", textAlign: "left" }} key={index}>
@@ -18,3 +18,5 @@ export default ({ testResults }) => (
     ))}
   </div>
 );
+
+export default EngagementsSummary;

src/web-ui/src/components/Header.js

@@ -9,7 +9,7 @@ import RekognitionButton from "./RekognitionButton";
 
 import "./Header.css";
 
-export default ({ addUser, readyToStream, signedIn, toggleRekognition }) => {
+const Header = ({ addUser, readyToStream, signedIn, toggleRekognition }) => {
   const [authError, setAuthError] = useState(null);
   const [userEmail, setUserEmail] = useState(undefined);
 
@@ -62,3 +62,5 @@ export default ({ addUser, readyToStream, signedIn, toggleRekognition }) => {
     </Navbar>
   );
 };
+
+export default Header;

src/web-ui/src/components/Icon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({ type, size }) => {
+const Icon = ({ type, size }) => {
   size = size || "16";
 
   const SVGWrapper = ({ children }) => (
@@ -61,3 +61,5 @@ export default ({ type, size }) => {
 
   return "";
 };
+
+export default Icon;

src/web-ui/src/components/RekognitionButton.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Button } from "react-bootstrap";
 
-export default ({ enabled, onClick }) => {
+const RekognitionButton = ({ enabled, onClick }) => {
   const [started, setStarted] = useState(false);
 
   return (
@@ -18,3 +18,5 @@ export default ({ enabled, onClick }) => {
     </Button>
   );
 };
+
+export default RekognitionButton;

src/web-ui/src/components/SettingsHelp.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Alert, Row } from "react-bootstrap";
 
-export default ({ show }) => {
+const SettingsHelp = ({ show }) => {
   if (show) {
     return (
       <Row>
@@ -22,3 +22,5 @@ export default ({ show }) => {
   }
   return "";
 };
+
+export default SettingsHelp;

src/web-ui/src/utils/gateway.js

@@ -1,6 +1,6 @@
 import request from "./request";
 
-export default {
+const gateway = {
   addUser(params) {
     return request("/faces/index", "post", {
       image: params.image,
@@ -12,3 +12,5 @@ export default {
     return request("/process", "post", { image });
   },
 };
+
+export default gateway;

src/web-ui/src/utils/request.js

@@ -28,10 +28,12 @@ Amplify.configure({
   },
 });
 
-export default (url, method, data) =>
+const request = (url, method, data) =>
   retryWrapper(() =>
     API[method || "get"]("apiGateway", url, {
       body: data || undefined,
       headers: { "Content-Type": "application/json" },
     })
   );
+
+export default request;