Develop2

Sample-01/package.json

@@ -22,25 +22,30 @@
     "@fortawesome/react-fontawesome": "^0.2",
     "@heroicons/react": "^2.1.3",
     "@mui/material": "^5.15.15",
+    "@sendgrid/mail": "^8.1.3",
+    "@tanstack/react-query": "^5.37.1",
     "autoprefixer": "^10.4",
     "axios": "^1.6.8",
     "buffer": "^6.0.3",
-    "cors": "^2.8",
+    "cors": "^2.8.5",
     "crypto": "^1.0.1",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
-    "express": "^4.18",
+    "express": "^4.19.2",
     "express-oauth2-jwt-bearer": "^1.6.0",
     "helmet": "^4.4",
     "highlight.js": "^11.9.0",
+    "history": "^5.3.0",
     "jsonwebtoken": "^9.0.2",
     "morgan": "^1.9",
+    "node-fetch": "^3.3.2",
     "npm-run-all": "^4.1",
     "postcss": "^8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-is": "^16.13.1",
     "react-qty-picker": "^1.0.6",
-    "react-router-dom": "^5.3",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0",
     "reactjs-popup": "^2.0.6",
     "reactstrap": "^9.2",

Sample-01/src/App.css

@@ -59,6 +59,7 @@
   font-size: 16px;
 }
 
+
 .modal-button:hover {
   background-color: #0056b3;
 }
@@ -78,6 +79,7 @@
 
 .btn-comprar {
   margin-left: 30px;
+  margin-top: 5px;
   background-color: #007bff;
   color: #fff;
   padding: 10px 20px;
@@ -87,12 +89,23 @@
   font-size: 16px;
 }
 
+.btn-comprar:disabled {
+  background-color: grey;
+  color: darkgrey;
+  cursor: not-allowed;
+}
+
 .flight-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.btn-container {
+  display: flex;
+  justify-content: center;
+}
+
 .Airline-Logo {
   margin-right: 10px;
 }

Sample-01/src/App.js

@@ -1,12 +1,12 @@
 import React from "react";
-import { Router, Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { Container } from "reactstrap";
 // import Loading from "./components/Loading";
 import NavBar from "./components/NavBar";
 import Home from "./views/Home";
 import Profile from "./views/Profile";
 // import { useAuth0 } from "@auth0/auth0-react";
 import history from "./utils/history";
 
 // styles
 import "./App.css";
@@ -16,6 +16,8 @@
 import FlightList from "./views/FlightList";
 import Flight from "./views/FlightDetails";
 import PurchaseList from "./views/MyPurchases";
+import PurchaseCompleted from "./views/PurchaseCompleted";
+import Recommendations from "./views/Recommendations";
 
 initFontAwesome();
 
@@ -31,17 +33,19 @@
   // }
 
   return (
-    <Router history={history}>
+    <Router>
       <div id="app" className="d-flex flex-column h-100">
         <NavBar />
         <Container className="flex-grow-1 mt-5">
-          <Switch>
-            <Route path="/" exact component={Home} />
-            <Route path="/profile" component={Profile} />
-            <Route path="/flights" component={FlightList}/>
-            <Route path="/details/:flightId" component={Flight}/>
-            <Route path="/mypurchases" component={PurchaseList} />
-          </Switch>
+          <Routes>
+            <Route path="/" element={<Home/>} />
+            <Route path="/profile" element={<Profile/>} />
+            <Route path="/flights" element={<FlightList/>}/>
+            <Route path="/details/:flightId" element={<Flight/>}/>
+            <Route path="/mypurchases" element={<PurchaseList/>} />
+            <Route path="/purchase" element={<PurchaseCompleted/>} />
+            <Route path="/recommendations" element={<Recommendations/>} />
+          </Routes>
         </Container>
         {/*<Footer />*/}
       </div>

Sample-01/src/api/flights.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
-const BASE_URL = 'https://wtfmzvwh4b.execute-api.us-east-1.amazonaws.com';
+// const BASE_URL = 'http://localhost:3000';
+const BASE_URL = 'https://rvvfas273i.execute-api.us-east-2.amazonaws.com/dev';
 
 export const getAllFlights = async (token, filters = {}, pageNumber = 1) => {
     try {
@@ -38,16 +39,33 @@ export const getFlightDetails = async (token, flightId) => {
     }
 }
 
-export const postFlightRequest = async (token, flightId, quantity) => {
+export const getRecommendations = async ( token ) => {
+    try {
+        const headers = {
+            Authorization: `Bearer ${token}`
+        };
+        const response = await axios.get(`${BASE_URL}/flights/recommendations`, { headers });
+        return response.data.flights;
+    } catch (error) {
+        console.error("Error: details", error)
+        throw error;
+    }
+}
+
+export const postFlightRequest = async (token, flightId, quantity, latitude, longitude, name) => {
     try {
         const headers = {
             Authorization: `Bearer ${token}`
         };
         const data = {
-            'type': "our_group_purchase",
+            // 'type': "our_group_purchase",
             'flight_id': flightId,
-            'quantity': quantity
+            'quantity': quantity,
+            'latitudeIp': latitude,
+            'longitudeIp': longitude,
+            'name': name
         };
+        console.log(data);
         const response = await axios.post(`${BASE_URL}/flights/request/`, data, { headers });
         return response.data;
     } catch (error) {
@@ -66,4 +84,22 @@ export const getPurchase = async (token) => {
     } catch (error) {
         console.error("Failed to request flight:", error);
     }
-}
+}
+
+export const commitTransaction = async(token, token_ws, userEmail, purchaseUuid) => {
+    try {
+        const headers = {
+            Authorization: `Bearer ${token}`
+        };
+        const data = {
+            'ws_token': token_ws,
+            'userEmail': userEmail,
+            'purchase_uuid': purchaseUuid
+        };
+        const response = await axios.post(`${BASE_URL}/flights/commit`, data, {headers});
+        return response.data;
+    } catch (error) {
+        console.error("Failed to commit transaction:", error);
+        throw error;
+    }
+}

Sample-01/src/components/IPdetails.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Paper, Typography } from '@mui/material';
 
 function IPdetails() {
     const [ipAddress, setIpAddress] = useState('');
@@ -78,4 +78,4 @@
     );
 }
 
-export default IPdetails;
+export default IPdetails;

Sample-01/src/components/NavBar.js

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { NavLink as RouterNavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import logo from "../assets/nav-logo.svg";
 
 import {
   Collapse,
   Container,
   Navbar,
   NavbarToggler,
   NavbarBrand,
   Nav,
   NavItem,
   NavLink,
@@ -78,6 +78,16 @@
                     Mis Solicitudes
                   </NavLink>
                 </NavItem>
+                <NavItem>
+                  <NavLink
+                    tag={RouterNavLink}
+                    to="/recommendations"
+                    exact
+                    activeClassName="router-link-exact-active"
+                  >
+                    Recomendaciones
+                  </NavLink>
+                </NavItem>
                 </>
               )}
             </Nav>

Sample-01/src/components/PopUp.js

@@ -13,4 +13,4 @@ const Popup = ({ onClose, children }) => {
   );
 };
 
-export default Popup;
+export default Popup;

Sample-01/src/index.js

@@ -1,3 +1,4 @@
+// Import necessary dependencies
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
@@ -7,14 +8,17 @@ import { Auth0Provider } from "@auth0/auth0-react";
 import history from "./utils/history";
 import { getConfig } from "./config";
 
+// Define onRedirectCallback function
 const onRedirectCallback = (appState) => {
   history.push(
     appState && appState.returnTo ? appState.returnTo : window.location.pathname
   );
 };
 
+// Get Auth0 configuration
 const config = getConfig();
 
+// Configuration for Auth0Provider
 const providerConfig = {
   domain: config.domain,
   clientId: config.clientId,
@@ -26,13 +30,14 @@ const providerConfig = {
   },
 };
 
-ReactDOM.render(
+// Render the app using the new client rendering API
+ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Auth0Provider {...providerConfig}>
-      <App />
+        <App />
     </Auth0Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
-serviceWorker.unregister();
+// Unregister service worker
+serviceWorker.unregister();