Merge pull request #10 from HX001/Yuqing_FrontEnd

merge Yuqing front end

Author: HX001

uoft-contribution-frontend/src/.DS_Store

@@ -1,10 +1,61 @@
 import React, {Component} from 'react';
+import ps5 from '../PS5.jpg'
+import xbox from '../XBOX.jpg'
+
+import {Container, Row, Col, Alert, Image} from "react-bootstrap";
+
 
 class Home extends Component {
+    handlexbox = event => {
+        window.localStorage.setItem('console', 'xbox');
+        //alert(window.localStorage.getItem('console'));
+    };
+
+    handleps5 = event => {
+        window.localStorage.setItem('console', 'PS5');
+        //alert(window.localStorage.getItem('console'));
+    };
+
     render() {
+        function handlePS5 (e){
+            //window.localStorage.setItem('console', 'PS5');
+            console.log('hey');
+            //console.log(window.localStorage.key('console'));
+        }
+
+        function handleXbox(e) {
+
+        }
+
+        const imageClick = () => {
+            console.log('Click');
+        }
+
         return (
             <div>
-                Home Page......
+                <Alert variant="warning">
+                    <Alert.Heading>Hello Gamer!</Alert.Heading>
+                    <p>
+                        Welcome to WebSiteBot where you can buy a PS5 or Xbox X. Just click on either a
+                        PS5 or Xbox below and get forwarded to the available suppliers!
+                    </p>
+                    <hr />
+                    <p className="mb-0">
+                        This project is being maintained by Alex Kocab
+                    </p>
+                </Alert>
+
+                <br />
+
+                <Container>
+                    <a href = '/suppliers'><Image onClick={this.handleps5} src={ps5} width="500"  rounded/></a>
+                    {' '}
+                    <a href = '/suppliers'><Image onClick={this.handlexbox} src={xbox} width="500" rounded/></a>
+
+                </Container>
+
+
+
             </div>
         );
     }

uoft-contribution-frontend/src/components/Home.js

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Home from "./Home";
 import UserProfile from "./UserProfile";
 import Payment from "./Payment";
-import CheckoutForm from "./PaymentPage";
+import Supplier from "./Supplier";
 
 
 class Main extends Component {
@@ -25,6 +25,10 @@ class Main extends Component {
                         <Payment />
                     </Route>
 
+                    <Route exact path="/suppliers">
+                        <Supplier />
+                    </Route>
+
 
                 </Switch>
             </div>

uoft-contribution-frontend/src/components/Main.js

@@ -0,0 +1,64 @@
+import React, {Component} from "react";
+import Card from 'react-bootstrap/Card'
+import Button from 'react-bootstrap/Button'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Container from 'react-bootstrap/Container'
+
+class Supplier extends Component {
+    handleClick(name){
+        window.location.href="/payment"
+        localStorage.setItem("supplier",name)
+        // For now we store the supplier that users chose in the local cache, with the key as "supplier"
+        // When the user clicks on a supplier, the name of that supplier will be passed into here.
+    }
+
+    render() {
+        return (
+
+            <Container>
+                <Row>
+                    <Col className="SupplierCard">
+                        <Card style={{ width: '18rem' }}>
+                            <Card.Img variant="top" src="https://www.wave3.com/resizer/1HurzaEJTU8tvKDbB4cxUYvVFUM=/1200x600/cloudfront-us-east-1.images.arcpublishing.com/raycom/RSJIE4RZUVFWFGC55BVQAKZ5S4.jpg" />
+                            <Card.Body>
+                                <Card.Title>Walmart</Card.Title>
+                                <Button variant="primary"
+                                        onClick={(ev) => {this.handleClick("Walmart")}}
+                                >Go payment</Button>
+                                {/*<button onClick={(ev) => {this.handle(ev, "Walmart")}}/>*/}
+                            </Card.Body>
+                        </Card>
+                    </Col>
+                    <Col className="SupplierCard">
+                        <Card style={{ width: '18rem' }}>
+                            <Card.Img variant="top" src="https://cdn.mos.cms.futurecdn.net/wiXtq4NPpGbNf6PEHTT4hg-1024-80.jpg.webp" />
+                            <Card.Body>
+                                <Card.Title>Amazon</Card.Title>
+                                <Button variant="primary"
+                                        onClick={(ev) => {this.handleClick("Amazon")}}
+                                >Go payment</Button>
+                            </Card.Body>
+                        </Card>
+                    </Col>
+                    <Col className="SupplierCard">
+                        <Card style={{ width: '18rem' }}>
+                            <Card.Img variant="top" src="https://www.rhtc.com.au/Upload/RouseHillTownCentre/Media/Store-Logo/logo-target.jpg?width=250&height=161" />
+                            <Card.Body>
+                                <Card.Title>Target</Card.Title>
+                                <Button variant="primary"
+                                        onClick={(ev) => {this.handleClick("Target")}}
+                                >Go payment</Button>
+                            </Card.Body>
+                        </Card>
+                    </Col>
+                </Row>
+            </Container>
+
+
+
+        )
+    }
+}
+
+export default Supplier;