Merge branch 'link-frontend-with-backend' into 'dev'

Link frontend with backend

See merge request !1

package.json

@@ -2,7 +2,6 @@
   "name": "order-management-client",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:8080",
   "dependencies": {
     "@chakra-ui/react": "^1.6.0",
     "@emotion/react": "^11",
@@ -22,6 +21,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/@types/Order.d.ts

+declare module "Order" {
+    export interface Order {
+        customerAddress: Address,
+        customerEmailAddress: string,
+        customerId: string,
+        id: string,
+        orderCreatedAt: number,
+        orderItems: Item[],
+        orderStatus: string,
+        orderTrackingCode: string,
+        orderUpdatedAt: number
+    }
+
+    export interface Address {
+        city: string,
+        state: string,
+        street: string,
+        zip: string
+    }
+
+    export interface Item {
+        itemId: string,
+        itemPrice: number,
+        itemQuantity: number,
+        itemSku: number
+    }
+}
\ No newline at end of file

src/components/Nav.tsx

@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom'
 
 const Nav = () => {
     return (
-        <header role="navigation">
-            <div>Order Management Console PRO</div>
-            <ul>
-                <li><Link to="/orders">All orders</Link></li>
-                <li><Link to="/account">(account logo here)</Link></li>
-                <li><Link to="/">Login / Logout</Link></li>
+        <header className="nav-bar" role="navigation">
+            <div className="order-management">Order Management Console PRO</div>
+            <ul className="nav-list">
+                <li><Link className="nav-link" to="/orders">All orders</Link></li>
+                <li><Link className="nav-link" to="/account">(account logo here)</Link></li>
+                <li><Link className="nav-link" to="/">Login / Logout</Link></li>
             </ul>
         </header>
     )

src/components/OrderDetails.tsx

 import React from 'react'
+import { Link } from 'react-router-dom'
 
-const OrderDetails = () => {
+const OrderDetails = (props: any) => {
+    const orderNumber = props.orderNumber
+    const date = props.date;
+    const status = props.status
     return (
-            <tr>
-                <td>6396964924168</td>
-                <td>shfd87tw878w</td>
-                <td>Apex One</td>
-            </tr>
+        <>
+            <td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></td>
+            <td>{date}</td>
+            <td>{status}</td>
+        </>
     )
 }
 

src/components/OrderShowDetails.tsx

+import React, { useState, useEffect } from 'react';
+import { Item } from 'Order';
+
+const OrderShowDetails = (props: any) => {
+    const [items, setItems] = useState<Item[]>()
+    useEffect(() => {
+        setItems(props.items)
+    }, [props.items])
+
+    const itemMap = (items: Item[]) => {
+        return items.map((item: Item, idx: number) => {
+            return (
+                <tr key={idx}>
+                    <td>{item.itemId}</td>
+                    <td>{item.itemPrice}</td>
+                    <td>{item.itemQuantity}</td>
+                    <td>{item.itemSku}</td>
+                </tr>
+            )
+        });
+    }
+
+    const itemDetails = items ? itemMap(items) : <></>
+    
+    return (
+        items ? 
+            <table>
+                <tbody>
+                    <tr>
+                        <th>ID</th>
+                        <th>Price</th>
+                        <th>Quantity</th>
+                        <th>SKU</th>
+                    </tr>
+                    {itemDetails}
+                </tbody>
+            </table>
+        :
+            <div className="Order without items">
+                This order didn't contain any items.
+            </div>
+    )
+}
+
+export default OrderShowDetails

src/components/index.ts

@@ -2,4 +2,5 @@ export {default as AccountForm} from './AccountForm'
 export {default as LoginForm} from './LoginForm'
 export {default as Nav} from './Nav'
 export {default as OrderDetails} from './OrderDetails'
-export {default as SignUpForm} from './SignUpForm'
\ No newline at end of file
+export {default as SignUpForm} from './SignUpForm'
+export {default as OrderShowDetails} from './OrderShowDetails'
\ No newline at end of file

src/index.css

@@ -5,13 +5,71 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: gray;
+  color: ghostwhite;
 }
 
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
 
-* {
+tbody, tr, th, span, td {
   border: 2px solid orangered;
 }
+
+span {
+  display: flex;
+  justify-content: space-around;
+}
+
+header {
+  display: flex;
+  height: 50px;
+  background-color: gray;
+}
+
+ul {
+  list-style-type: none;
+  display: flex;
+  margin: auto;
+  height: 100%;
+}
+
+table {
+  width: 100%;
+  padding: 20px;
+}
+
+td {
+  height: 100px;
+}
+
+li {
+  border-left: 2px solid green;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.order-management {
+  padding-left: -30px;
+  padding-right: 75px;
+  margin: auto;
+  justify-content: left;
+}
+
+.nav-link {
+  margin: auto;
+  padding: 10px;
+  text-decoration: none;
+  color: ghostwhite;
+  background-color: lightslategray;
+  
+}
+
+.nav-link:hover {
+  background-color: black;
+}
\ No newline at end of file

src/pages/AccountPage.tsx

-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
 import {AccountForm} from 'components'
 const AccountPage = () => {
+    // const [appState, setAppState] = useState(0);
+    // useEffect(() => {
+    //     const apiUrl = 'http://localhost:8080/api/orders';
+    //     fetch(apiUrl).then((response) => response.json())
+    //         .then((data) => console.log('This is your data', data));
+    // }, [appState])
+
+    // const tester = ()=> {
+    //     setAppState(appState + 1);
+    // }
+
     return (
         <div>
+            {/* <button onClick={tester}>{appState}</button> */}
             <AccountForm />
         </div>
     )

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'}
+            />
         </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 { Order } from 'Order';
 
 const OrderIndexPage = () => {
+    let [orders, setOrders] = useState([]);
+
+    useEffect(() => {
+        const apiUrl = 'http://localhost:8080/api/orders';
+        fetch(apiUrl).then((response) => response.json())
+            .then((data) => {
+                console.log('This is your data', data)
+                setOrders(data);
+            });
+    }, [setOrders])
+
+    const orderDetailsArr = orders.map((order: Order, idx: any) => {
+        return <tr key={idx}><OrderDetails
+            date={order.orderCreatedAt} 
+            orderNumber={order.id}
+            status={order.orderStatus}
+            /></tr>
+    })
+
     return (
-        <table>
-            <tr>
-                <th>sku</th>
-                <th>upc</th>
-                <th>productName</th>
-            </tr>
-            <OrderDetails />
-            <OrderDetails />
-            <OrderDetails />
-        </table>
-        
+        <>
+            <table>
+                <tbody>
+                    <tr>
+                        <th>Order number</th>
+                        <th>Created</th>
+                        <th>Order Status</th>
+                    </tr>
+                    {orderDetailsArr}
+                </tbody>
+            </table>
+        </>
     )
 }
 

src/pages/OrderShowPage.tsx

-import React from 'react'
-import { OrderService } from 'services'
-import {OrderDetails} from 'components'
+import React, {useState, useEffect} from 'react';
+import {OrderShowDetails} from 'components';
+import { Order, Item } from 'Order';
 
-const OrderShowPage = () => {
+const OrderShowPage = (props: any) => {
+    const location = props.match.params.id;
+    const apiUrl = 'http://localhost:8080/api/orders/' + location;
+    const [order, setOrder] = useState<Order>();
+    const [items, setItems] = useState<Item[]>()
 
-    // const [order, setOrder] = React.useState(null)
-
-    // React.useEffect(() => {
-    //     OrderService.orderById()
-    //         .then(orderData => setOrder(orderData))
-
-
-    //     return () => {
-    //         // componentDidUnmount
-    //     }
-    // })
+    useEffect(() => {
+        fetch(apiUrl).then((response) => response.json())
+            .then((data) => {
+                console.log('This is your order', data)
+                setOrder(data);
+                setItems(data.orderItems)
+            });
+    }, [setOrder, setItems, apiUrl])
 
+    if (!order) {
+        return(<></>);
+    }
+    
     return (
-        <table>
-            <tr>
-                <th>sku</th>
-                <th>upc</th>
-                <th>productName</th>
-            </tr>
-            <OrderDetails />
-        </table>
-        
+        <>
+            <span>
+                <h3>Order Date: {order.orderCreatedAt}</h3>
+                <h3>Order Number: {order.id}</h3>
+                <h3>Order Status: {order.orderStatus}</h3>
+            </span>
+            
+            <OrderShowDetails items={items}/>
+        </>
     )
 }
 

src/services/OrderService.ts

-import orderData from './mock-order-data.json'
+import orderList from './mock-order-data'
+import { Order } from '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(orderList) }, 2000)
 });
 
-export const orderById = () => new Promise((res, rej) => {
-        setTimeout(() => { res(orderData[0]) }, 2000)
-    })
-
+export const orderById = (id: string) => new Promise<Order>((res, rej) => {
+        setTimeout(() => { 
+            const orderData = orderList.filter((order) => {
+                return order.id === id;
+            })
+            res(orderData[0])
+        }, 2000)
+})
 
 
 export default {

src/services/mock-order-data.json

-[
-    {
-        "_id": "x588s78xvhs",
-        "sku": "2192649",
-        "upc": "221481649",
-        "productName": "Apex One",
-        "productDescription": "Janky",
-        "price": 5500.50,
-        "stock": 9,
-        "productImageUrl": "https://picsum.photos/300/300",
-        "brand": "Apex",
-        "category": "Security"
-    }
-]
\ No newline at end of file

src/services/mock-order-data.ts

+import { Order } from 'Order'
+
+const orders: Order[] = [
+    {
+        customerAddress: {
+            city: "Lynnwood",
+            state: "Washington",
+            street: "9944 Fiction Way",
+            zip: "98087"
+        },
+        customerEmailAddress: "amdog@gmail.com",
+        customerId: "holyjabronie",
+        id: "342341234",
+        orderCreatedAt: 245245253452452,
+        orderItems: [
+            {
+                itemId: "string",
+                itemPrice: 23,
+                itemQuantity: 35,
+                itemSku: 944332
+            },
+            {
+                itemId: "number",
+                itemPrice: 99,
+                itemQuantity: 1000,
+                itemSku: 8943562
+            }
+        ],
+        orderStatus: "FULFILLED",
+        orderTrackingCode: "1Z1251432142343444",
+        orderUpdatedAt: 124563478
+    },
+    {
+        customerAddress: {
+            city: "San Francisco",
+            state: "CA",
+            street: "4325 Nonya Ave",
+            zip: "94112"
+        },
+        customerEmailAddress: "goodestboi96@hotmail.com",
+        customerId: "happypuppy",
+        id: "243523452",
+        orderCreatedAt: 245245253452452,
+        orderItems: [
+            {
+                itemId: "Bottle",
+                itemPrice: 22,
+                itemQuantity: 55,
+                itemSku: 5566434
+            },
+            {
+                itemId: "Ruler",
+                itemPrice: 10,
+                itemQuantity: 8,
+                itemSku: 7895435
+            }
+        ],
+        orderStatus: "UNFULFILLED",
+        orderTrackingCode: "298523452345",
+        orderUpdatedAt: 124563478
+    }
+    
+]
+
+export default orders;
\ No newline at end of file

tsconfig.json

@@ -19,7 +19,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "typeRoots": ["src/@types", "node_modules/@types"]
   },
   "include": [
     "src"

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"