[AFP-26, AFP-23] 🚧 add promise handling to order show pages, add...

[AFP-26, AFP-23] 🚧 add promise handling to order show pages, add working google OAuth to login page. [@kkaminski]

package.json

@@ -22,6 +22,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-google-login": "^5.2.2",
     "react-hook-form": "^7.4.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

src/components/OrderShowDetails.tsx

-import React from 'react'
+import React from 'react';
+import { OrderService } from 'services';
 
 const OrderShowDetails = (props: any) => {
     const orderProductDetails = props.products.map((prod: any, idx: any) => {

src/pages/AuthPage.tsx

 import React from 'react'
 import { LoginForm } from 'components';
+import { GoogleLogin } from 'react-google-login';
 
 const AuthPage = () => {
+    const responseGoogle = (response: any) => {
+        // console.log(response)
+        // console.log(response.profileObj);
+        // console.log(response.tokenObj);
+
+        const {email, familyName:lastName, givenName:firstName, googleId, imageUrl} = response.profileObj;
+        return ({
+            email,
+            firstName,
+            lastName,
+            googleId,
+            imageUrl
+        })
+    }
+
     return (
         <div>
-            <LoginForm />
-            <LoginForm />
+            <GoogleLogin
+                clientId="925243198137-hhe2e3ejlethf321hh7tbm7ontc19cpj.apps.googleusercontent.com"
+                buttonText="Login"
+                onSuccess={responseGoogle}
+                onFailure={responseGoogle}
+                cookiePolicy={'single_host_origin'}
+            />
+            {/* <LoginForm />
+            <LoginForm /> */}
         </div>
     )
 }
 
 export default AuthPage
+
+/*
+Google Successful OAuth response (The parts we want to keep, anyway):
+response => 
+    response.profileObj = {
+        email: "kkaminski@nisum.com",
+        familyName: "Kaminski",
+        givenName: "Kevin",
+        googleId: "104324023295177405903",
+        imageUrl: "https://lh3.googleusercontent.com/a/AATXAJymxbs98AGxOFCVUCpV9pEwpxx1JWR6XZqKXe8b=s96-c",
+        name: "Kevin Kaminski"
+    }
+
+    response.tokenObj = {
+        access_token: "ya2...LCe",
+        expires_at: 1620238821414,
+        expires_in: 3599,
+        first_issued_at: 1620235222414,
+        id_token: "eyJhbGciOiJSUzI1NiIs...yXc6HOG97FF6eF1AU0Oh8w",
+        idpId: "google",
+        login_hint: "AJDLj6J...RcffTyHTSIHVKSQ",
+        scope: "email profile https://www.googleapis.com/auth/userinfo.email openid https://www.googleapis.com/auth/userinfo.profile",
+        session_state: {
+            extraQueryParams: {
+                authuser: 2
+            }
+        },
+        token_type: "bearer"
+    }
+
+
+*/

src/pages/OrderIndexPage.tsx

-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import {OrderDetails} from 'components'
 import { OrderService } from 'services';
 
 const OrderIndexPage = () => {
-    const allOrders =  OrderService.allOrders;
+    let [orders, setOrders] = useState([]);
+    useEffect(() => {
+        OrderService.allOrders().then((res: any) => {
+            console.log(res)
+            setOrders(res);
+        });
+    })
+    
     
-    const orderDetailsArr = allOrders.map((order: any, idx: any) => {
+    const orderDetailsArr = orders.map((order: any, idx: any) => {
         return <tr key={idx}><OrderDetails
             date={order.date} 
             orderNumber={order.orderNumber}

src/pages/OrderShowPage.tsx

-import React from 'react'
-import { OrderService } from 'services'
-import {OrderShowDetails} from 'components'
+import React, {useState, useEffect} from 'react';
+import { OrderService } from 'services';
+import {OrderShowDetails} from 'components';
+import Order from '../types/Order';
 
 const OrderShowPage = (props: any) => {
-    const location = parseInt(props.match.params.id)
-    const orderInfo = OrderService.orderById(location);
-    
-    console.log(props);
+    const location = parseInt(props.match.params.id);
+    const [order, setOrder] = useState<Order>();
+    useEffect(() => {
+        OrderService.orderById(location).then((res: any) => {
+            setOrder(res);
+        })
+    })
+    // console.log(props);
+    console.log(order);
+    console.log(JSON.stringify(order) !== JSON.stringify({}));
 
     // orderInfo.
 
@@ -24,17 +31,19 @@ const OrderShowPage = (props: any) => {
     //     }
     // })
 
-
+    if (!order) {
+        return(<></>);
+    }
 
     return (
         <>
             <span>
-                <h3>Order Date: {orderInfo.date}</h3>
-                <h3>Order Number: {orderInfo.orderNumber}</h3>
+                <h3>Order Date: {order.date}</h3>
+                <h3>Order Number: {order.orderNumber}</h3>
                 <h3>Order Status: Fulfilled</h3>
             </span>
             
-            <OrderShowDetails products={orderInfo.orderItems}/>
+            <OrderShowDetails products={order.orderItems}/>
         </>
     )
 }

src/services/OrderService.ts

-import orderData from './mock-order-data.json'
+import orderData from './mock-order-data'
+import Order from 'types/Order'
 
 // type Order {
 //     sku: number
 // }
 
-// export const allOrders = () => new Promise((res, rej) => {
-//     setTimeout(() => { res(orderData) }, 2000)
-// });
+export const allOrders = () => new Promise<Order[]>((res, rej) => {
+    setTimeout(() => { res(orderData) }, 2000)
+});
 
-export const allOrders = orderData;
+export const orderById = (id: number) => new Promise<Order>((res, rej) => {
+        setTimeout(() => { res(orderData[id]) }, 2000)
+})
 
-// export const orderById = () => new Promise((res, rej) => {
-//         setTimeout(() => { res(orderData[0]) }, 2000)
-//     })
-
-export const orderById = (idx: any) => {
-    return orderData[idx];
-}
+// export const orderById = (idx: any) => {
+//     return orderData[idx];
+// }
 
 
 export default {

src/services/mock-order-data.json → src/services/mock-order-data.ts

-[
+import Order from '../types/Order'
+
+const orders: Order[] = [
     {
         "date": "01/01/01",
         "orderNumber": "0",
@@ -62,3 +64,4 @@
     
 ]
 
+export default orders;
\ No newline at end of file

src/types/Order.ts

+interface Order {
+    date: string,
+    orderNumber: string,
+    orderItems: any[]
+}
+
+export default Order;
\ No newline at end of file

yarn.lock

@@ -9746,7 +9746,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10019,6 +10019,14 @@ react-focus-lock@2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-google-login@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"
+  integrity sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.0"
+
 react-hook-form@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.4.0.tgz#b024faf7f6eaf9ee5c25c219d6b38a654c147be6"