Merge branch 'add-local-storage' into 'dev'

Add local storage

See merge request !4

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 } from 'react-google-login';
+
+const Login = () => {
+    const storage = window.localStorage;
+
+    const loginSuccess = (response: any) => {
+        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);
+    }
+
+    const loginFailure = (response: any) => {
+        storage.setItem("loggedIn", "false")
+        console.log("Log in failed", storage);
+    }
+
+    return (
+        <GoogleLogin
+            clientId="925243198137-hhe2e3ejlethf321hh7tbm7ontc19cpj.apps.googleusercontent.com"
+            buttonText="Login"
+            onSuccess={loginSuccess}
+            onFailure={loginFailure}
+            cookiePolicy={'single_host_origin'}
+        />
+    )
+}
+
+export default Login

src/components/Logout.tsx

+import React from 'react'
+import { GoogleLogout } from 'react-google-login';
+
+const Logout = () => {
+    const storage = window.localStorage;
+
+    const logout = () => {
+        storage.clear();
+        storage.setItem("loggedIn", "false")
+        console.log("Log out complete", storage)
+    }
+
+    return (
+        <GoogleLogout
+            clientId="925243198137-hhe2e3ejlethf321hh7tbm7ontc19cpj.apps.googleusercontent.com"
+            buttonText="Logout"
+            onFailure={logout}
+            onLogoutSuccess={logout}
+        />
+    )
+}
+
+export default Logout

src/components/index.ts

@@ -4,4 +4,15 @@ export {default as Nav} from './Nav'
 export {default as OrderDetails} from './OrderDetails'
 export {default as SignUpForm} from './SignUpForm'
 export {default as OrderShowDetails} from './OrderShowDetails'
-export {default as SearchOrder} from './SearchOrder'
+<<<<<<< HEAD
\ No newline at end of file
+<<<<<<< HEAD
+export {default as SearchOrder} from './SearchOrder'
+=======
+export {default as Login} from './Login'
+export {default as Logout} from './Logout'
+>>>>>>> :construction: quick commit for pull
+=======
+export {default as Login} from './Login'
+export {default as Logout} from './Logout'
+export {default as SearchOrder} from './SearchOrder'
+>>>>>>> 16edc8e40082f2b2af4e3abbe09f0dedf53e25a2

src/index.tsx

@@ -4,6 +4,9 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+const storage = window.localStorage;
+storage.setItem("loggedIn", "false");
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

src/pages/AccountPage.tsx

 import React, { useState, useEffect } from 'react'
-
+import { GoogleAuthService } from 'services'
 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 storage = window.localStorage
+    const [userInfo, setUserInfo] = useState();
+    GoogleAuthService.checkGoogleToken(storage.tokenId).then((data) => setUserInfo(data))
+
 
-    // const tester = ()=> {
-    //     setAppState(appState + 1);
-    // }
 
     return (
         <div>
-            {/* <button onClick={tester}>{appState}</button> */}
-            <AccountForm />
+            <AccountForm props={userInfo}/>
         </div>
     )
 }

src/pages/AuthPage.tsx

@@ -6,4 +6,4 @@ const AuthPage = () => {
     )
 }
 
-export default AuthPage
+export default AuthPage 
\ No newline at end of file

src/pages/OrderIndexPage.tsx

@@ -5,7 +5,12 @@ import { Order } from 'Order';
 import { useAllOrders } from 'hooks'
 
 const OrderIndexPage = () => {
-    const { orders } = useAllOrders();
+    // const { orders } = useAllOrders();
+    let [orders, setOrders] = useState([]);
+
+    useEffect(() => {
+        OrderService.allOrders().then((data) => setOrders(data));
+    }, [])
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails

src/pages/OrderShowPage.tsx

 import { useParams } from 'react-router-dom';
 import {OrderShowDetails} from 'components';
 import { Order, Item } from 'Order';
+<<<<<<< HEAD
+<<<<<<< HEAD
 import { useOrder } from 'hooks'
 
 const OrderShowPage = () => {
     const { id } = useParams<any>();
     const { order} = useOrder(id)
+=======
+=======
+>>>>>>> 16edc8e40082f2b2af4e3abbe09f0dedf53e25a2
+import { OrderService } from 'services'
+
+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[]>()
+
+    useEffect(() => {
+        OrderService.orderById(apiUrl).then((data) => {
+            setOrder(data)
+            setItems(data.orderItems);
+        })
+    }, [apiUrl])
+<<<<<<< HEAD
+>>>>>>> [AFP-87] :construction: Working on Local Storage and adding google info [@kkaminski]
+=======
+>>>>>>> 16edc8e40082f2b2af4e3abbe09f0dedf53e25a2
 
     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 OrderService} from './OrderService'
\ No newline at end of file
+export {default as GoogleAuthService } from './GoogleAuthService'
\ No newline at end of file