Update AWS_PROXY CORS & other improvements

Locomotive-Ventures · Nov 25, 2023 · 7f646e6 · 7f646e6
1 parent 9a6b7e0
commit 7f646e6
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 69 deletions.
diff --git a/platform/spikeFrontEndAndResourcesIntegration/index.html b/platform/spikeFrontEndAndResourcesIntegration/index.html
@@ -8,10 +8,14 @@
     <script src="script.js"></script>
 </head>
 <body>
-    <h1>Contact Information</h1>
+    <h1>Contact Information for POST</h1>
     <input type="text" id="contactInput" placeholder="Name and Phone Number">
-    <button id="submitButton">Submit</button>
-    <div id="response"></div>
+    <button id="contactSubmitButton">Submit</button>
+
+    <h1>Contact Information for GET</h1>
+    <input type="text" id="idInput" placeholder="ID">
+    <button id="idSubmitButton">Submit</button>
+    <div id="results"></div>
 
 </body>
 </html>
diff --git a/platform/spikeFrontEndAndResourcesIntegration/script.js b/platform/spikeFrontEndAndResourcesIntegration/script.js
@@ -1,27 +1,20 @@
-// Initialize AWS
-function initializeAWS() {
-  AWS.config.update({
-    region: "ap-southeast-2",
-  });
-}
+// This code is for API demonstation purposes only
 
-// Function to send data to API Gateway
-function sendToApiGateway(name, phone) {
+// send record to DB
+function sendToApiGateway(campaignId, phone) {
   const apiUrl =
-    "https://1phczcq88h.execute-api.ap-southeast-2.amazonaws.com/Prod/message"; // Replace with your actual API Gateway URL
+    "https://d1uud242rb.execute-api.ap-southeast-2.amazonaws.com/Prod/message"; // Replace with the actual API URL (current endpoint is deployed to Olgas account)
   const data = {
     uniqueId:
       "id" + Date.now().toString(36) + Math.random().toString(36).substr(2, 9),
-    name: name,
-    name: name,
+    campaignId: campaignId,
     phone: phone,
   };
 
   fetch(apiUrl, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      // any other necessary headers
     },
     body: JSON.stringify(data),
   })
@@ -33,31 +26,81 @@ function sendToApiGateway(name, phone) {
     })
     .then((data) => {
       console.log("Success:", data);
-      document.getElementById("response").innerHTML +=
-        "Response for " + name + ": " + JSON.stringify(data) + "<br>";
     })
     .catch((error) => {
       console.error("Error:", error);
-      document.getElementById("response").innerHTML +=
-        "Error for " + name + ": " + error + "<br>";
     });
 }
 
-// Event listener for the submit button
+// query record from DB by campaign Id
+function queryApiWithId(campaignId) {
+  const apiUrl =
+    "https://87xb6cvhv2.execute-api.ap-southeast-2.amazonaws.com/Prod/data"; // Replace with the actual API URL (current endpoint is deployed to Olgas account)
+  const fullUrl = apiUrl + "?campaignId=" + encodeURIComponent(campaignId);
+
+  fetch(fullUrl, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then(function (response) {
+      console.log(response);
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then(function (data) {
+      console.log(data);
+
+      const resultsElement = document.getElementById("results");
+      resultsElement.innerHTML = "";
+
+      data.forEach(function (item) {
+        const itemElement = document.createElement("p");
+        itemElement.textContent = JSON.stringify(item);
+        resultsElement.appendChild(itemElement);
+      });
+    })
+    .catch(function (error) {
+      console.error("Error fetching data:", error);
+      document.getElementById("results").innerText = "Error: " + error.message;
+    });
+}
+
+// Event listener for the submit buttons
 window.onload = function () {
-  initializeAWS();
 
+  // post request
   document
-    .getElementById("submitButton")
+    .getElementById("contactSubmitButton")
     .addEventListener("click", function () {
       const input = document.getElementById("contactInput").value;
       const parts = input.split(" ");
+
+      const campaignId = parts[0];
+      const phone = parts[1];
+
       if (parts.length === 2) {
-        sendToApiGateway(parts[0], parts[1]);
+        sendToApiGateway(campaignId, phone);
       } else {
         alert("Please enter a name and a phone number separated by a space.");
       }
-
       document.getElementById("contactInput").value = ""; // Clear the input field
     });
+
+  // get request
+  document
+    .getElementById("idSubmitButton")
+    .addEventListener("click", function () {
+      const inputId = document.getElementById("idInput").value;
+      if (!inputId) {
+        alert("Please enter an ID.");
+        return;
+      }
+      queryApiWithId(inputId);
+
+      document.getElementById("idInput").value = ""; 
+    });
 };
diff --git a/platform/spikeFrontEndAndResourcesIntegration/template.yaml b/platform/spikeFrontEndAndResourcesIntegration/template.yaml
@@ -210,7 +210,7 @@ Resources:
           - StatusCode: 200
             ResponseParameters:
               method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
-              method.response.header.Access-Control-Allow-Methods: "'POST, OPTIONS'"
+              method.response.header.Access-Control-Allow-Methods: "'GET, POST, OPTIONS'"
               method.response.header.Access-Control-Allow-Origin: "'*'"
             ResponseTemplates:
               application/json: ''
@@ -244,22 +244,12 @@ Resources:
             Action=SendMessage&MessageBody=$util.urlEncode("$input.body")
         IntegrationResponses:
           - StatusCode: 200
-            ResponseParameters:
-              method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
-              method.response.header.Access-Control-Allow-Methods: "'POST, OPTIONS'"
-              method.response.header.Access-Control-Allow-Origin: "'*'"
-              method.response.header.Access-Control-Allow-Credentials: "'true'"
             ResponseTemplates:
-              application/json: ""
+              application/json: '{"statusCode": 200}'
       MethodResponses:
         - StatusCode: 200
           ResponseModels:
             application/json: "Empty"
-          ResponseParameters:
-            method.response.header.Access-Control-Allow-Headers: true
-            method.response.header.Access-Control-Allow-Methods: true
-            method.response.header.Access-Control-Allow-Origin: true
-            method.response.header.Access-Control-Allow-Credentials: true
 
   ContactAPIDeployment:
     Type: AWS::ApiGateway::Deployment
@@ -351,8 +341,9 @@ Resources:
               return {
                   'statusCode': 200,
                   'headers': {
-                      'Content-Type': 'application/json',
-                      'Access-Control-Allow-Origin': '*'
+                      'Access-Control-Allow-Headers': 'Content-Type',
+                      'Access-Control-Allow-Origin': '*',
+                      'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
                   },
                   'body': json.dumps(formatted_items)
               }
@@ -430,42 +421,12 @@ Resources:
             method.response.header.Access-Control-Allow-Origin: true
             method.response.header.Access-Control-Allow-Credentials: true
 
-  DynamoDBAPIOPTIONSMethod:
-    Type: AWS::ApiGateway::Method
-    Properties:
-      RestApiId: !Ref DynamoDBAPI
-      ResourceId: !Ref DynamoDBAPIResource
-      HttpMethod: OPTIONS
-      AuthorizationType: 'NONE'
-      Integration:
-        Type: 'MOCK'
-        RequestTemplates:
-          application/json: '{"statusCode": 200}'
-        IntegrationResponses:
-          - StatusCode: 200
-            ResponseParameters:
-              method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent'"
-              method.response.header.Access-Control-Allow-Origin: "'*'"
-              method.response.header.Access-Control-Allow-Methods: "'GET, OPTIONS'"
-            ResponseTemplates:
-              application/json: ''
-      MethodResponses:
-        - StatusCode: 200
-          ResponseModels:
-            application/json: "Empty"
-          ResponseParameters:
-            method.response.header.Access-Control-Allow-Headers: true
-            method.response.header.Access-Control-Allow-Methods: true
-            method.response.header.Access-Control-Allow-Origin: true
-
   DynamoDBAPIDeployment:
     Type: AWS::ApiGateway::Deployment
     Properties:
       RestApiId: !Ref DynamoDBAPI
       Description: 'API Deployment'
-    DependsOn:
-      - DynamoDBAPIMethod
-      - DynamoDBAPIOPTIONSMethod
+    DependsOn: DynamoDBAPIMethod
 
   DynamoDBAPIStage:
     Type: AWS::ApiGateway::Stage