[AFP-87] 🚧 Working on Local Storage and adding google info [@kkaminski]

src/components/AccountForm.tsx

 import React from 'react'
 
-const AccountForm = () => {
+const AccountForm = (props: any) => {
     return (
         <div>
             <h3>Account</h3>

src/components/Login.tsx

 import React from 'react'
-import { GoogleLogin, useGoogleLogin } from 'react-google-login';
+import { GoogleLogin } from 'react-google-login';
 
 const Login = () => {
     const storage = window.localStorage;
 
     const loginSuccess = (response: any) => {
-        console.log(response);
-        const {email, familyName:lastName, givenName:firstName} = response.profileObj;
-        storage.setItem("loggedIn", "true");
-        storage.setItem("userFirstName", firstName);
-        storage.setItem("userLastName", lastName);
-        storage.setItem("userEmail", email);
         storage.setItem("tokenId", response.tokenId);
+        const apiUrl = "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=" + response.tokenId
+        fetch(apiUrl).then((response) => response.json()).then((data) => {
+            console.log(data)
+        })
         console.log("Log in succesful", storage);
     }
 

src/pages/AccountPage.tsx

 import React, { useState, useEffect } from 'react'
-import {useGoogleLogin} from 'react-google-login'
-
+import { GoogleAuthService } from 'services'
 import {AccountForm} from 'components'
 const AccountPage = () => {
-    let clientId = "";
-    const userInfo = useGoogleLogin({clientId})
+    const storage = window.localStorage
+    const [userInfo, setUserInfo] = useState();
+    GoogleAuthService.checkGoogleToken(storage.tokenId).then((data) => setUserInfo(data))
+
+
+
     return (
         <div>
-            <AccountForm />
+            <AccountForm props={userInfo}/>
         </div>
     )
 }

src/pages/OrderIndexPage.tsx

@@ -7,20 +7,8 @@ const OrderIndexPage = () => {
     let [orders, setOrders] = useState([]);
 
     useEffect(() => {
-        OrderService.allOrders().then((res: any) => {
-            setOrders(res);
-        });
-    })
-    
-    
-    // const orderDetailsArr = orders.map((order: any, idx: any) => {
-    //     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])
+        OrderService.allOrders().then((data) => setOrders(data));
+    }, [])
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails

src/pages/OrderShowPage.tsx

 import React, {useState, useEffect} from 'react';
 import {OrderShowDetails} from 'components';
 import { Order, Item } from 'Order';
+import { OrderService } from 'services'
 
 const OrderShowPage = (props: any) => {
     const location = props.match.params.id;
@@ -9,13 +10,11 @@ const OrderShowPage = (props: any) => {
     const [items, setItems] = useState<Item[]>()
 
     useEffect(() => {
-        fetch(apiUrl).then((response) => response.json())
-            .then((data) => {
-                console.log('This is your order', data)
-                setOrder(data);
-                setItems(data.orderItems)
-            });
-    }, [setOrder, setItems, apiUrl])
+        OrderService.orderById(apiUrl).then((data) => {
+            setOrder(data)
+            setItems(data.orderItems);
+        })
+    }, [apiUrl])
 
     if (!order) {
         return(<></>);

src/services/GoogleAuthService.ts

+export const checkGoogleToken = (tokenId: any) => {
+    const apiUrl = "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=" + tokenId
+    return fetch(apiUrl).then((response) => response.json())
+}
+
+export default {
+    checkGoogleToken
+}
\ No newline at end of file

src/services/OrderService.ts

 import orderList from './mock-order-data'
 import { Order } from 'Order';
 
-export const allOrders = () => new Promise<Order[]>((res, rej) => {
-    setTimeout(() => { res(orderList) }, 2000)
-});
+export const allOrders = () => {
+    const apiUrl = 'http://localhost:8080/api/orders';
+    return fetch(apiUrl).then((response) => response.json())
+}
 
-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 const orderById = (apiUrl: string) => {
+    return fetch(apiUrl).then((response) => response.json())
+}
 
 
 export default {

src/services/index.ts

 export {default as OrderService} from './OrderService'
+export {default as GoogleAuthService } from './GoogleAuthService'
\ No newline at end of file