Erica and Shubha - Sockets

package.json

@@ -3,14 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "moment": "^2.24.0",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
+    "react-moment": "^0.9.2",
+    "react-router-bootstrap": "^0.25.0",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.css

@@ -22,7 +22,28 @@
   font-size: large;
 }
 
+.App-notification-list{
+  position:fixed;
+  right:0;
+  top:0;
+  z-index: 5
+}
+
+.home-page{
+  margin-top: 4rem;
+  text-align: center;
+}
+
+.movie-card { 
+  width: 18rem ; 
+  height: 60rem;
+}
+.overview{
+  height: 18rem;
+  overflow-y:scroll;
+}
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+

src/App.js

@@ -1,21 +1,161 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, {Component} from 'react';
+import { BrowserRouter as Router, Route} from "react-router-dom";
+import { LinkContainer } from 'react-router-bootstrap'
+
+import MovieLibrary from './components/MovieLibrary'
+import CustomerList from './components/CustomerList'
+import Search from './components/Search'
+import Selected from './components/Selected'
+
 import './App.css';
+import Notification from "./components/Notification"
+
+import { Nav } from 'react-bootstrap'
+
+//  Below code is modified from React Router Tutorial https://reacttraining.com/react-router/web/guides/quick-start
+
+const Index = () => {
+  return (
+    <div className='home-page'>
+      <h1>Erica and Shubha's Video Store</h1>
+      <img src="https://static1.squarespace.com/static/5048f125e4b0bd178ab3741a/t/557c49cfe4b00283cf1ed72f/1434208719772/" alt="empty movie theater"/>
+    </div>
+
+    );
+}
 
-class App extends Component {
-  render() {
+
+class AppRouter extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      selectedMovie: undefined,
+      selectedCustomer:undefined,
+      notifications: [],
+      activeRentals:0
+    }
+  }
+
+  selectCustomer = (customer) => {
+    console.log(customer);
+    this.setState({
+        selectedCustomer: customer,
+    });
+
+  }
+
+  selectMovie = (movie) => {
+    console.log(movie);
+    this.setState({selectedMovie: movie});
+  }
+
+  addNotification = (notificationProps) => {
+    const {toastTitle, toastMessage, toastTimestamp, error,errorList} = notificationProps;
+    const notification = (< Notification
+      id={this.state.notifications.length + 1}
+      key={this.state.notifications.length + 1}
+      toastTitle= {toastTitle}
+      toastMessage= {toastMessage}
+      toastTimestamp= {toastTimestamp}
+      errorList={errorList}
+      error= {error}
+      dismissNotification={this.dismissNotification}
+      />);
+
+    this.setState({
+      notifications:[...this.state.notifications, notification],
+      notificationCount: this.state.notificationCount + 1
+    })
+  }
+
+  dismissNotification = (notificationID) => {
+    const updatedNotifications = this.state.notifications.filter((obj)=>{
+      return obj.props.id !== notificationID;
+    });
+
+    this.setState({
+      notifications: updatedNotifications
+    });
+  }
+
+  clearSelection= () => {
+    this.setState( {
+      selectedMovie: undefined,
+      selectedCustomer:undefined,
+      activeRentals: this.state.activeRentals + 1,
+    });
+  }
+
+  render(){
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      <Router>
+        <div>
+
+        <Nav justify variant="tabs" as="ul" > 
+          <Nav.Item as="li">
+            <LinkContainer to="/home">
+              <Nav.Link>Home</Nav.Link>
+            </LinkContainer>
+
+          </Nav.Item>
+          <Nav.Item as="li" >
+            <LinkContainer to="/search">
+                <Nav.Link>Search</Nav.Link>  
+            </LinkContainer>
+          </Nav.Item>
+          <Nav.Item as="li">
+            <LinkContainer to="/library">
+                  <Nav.Link>Library</Nav.Link>  
+            </LinkContainer>
+          </Nav.Item>
+          <Nav.Item as="li">
+            <LinkContainer to="/customers">
+                  <Nav.Link>Customers</Nav.Link>  
+            </LinkContainer>
+          </Nav.Item>
+        </Nav>
+
+        <div className='App-notification-list'>
+              {this.state.notifications}
+        </div>
+
+
+        <Selected 
+          movie={this.state.selectedMovie}
+          customer={this.state.selectedCustomer}
+          addNotificationCallback={this.addNotification}
+          clearSelectionCallback ={this.clearSelection}
+          />
+
+          <Route path="/" exact component={Index} />
+          <Route path="/home" exact component={Index} />
+
+          <Route path="/search/" render={(props) => <Search {...props}
+          addNotificationCallback={this.addNotification}
+          />} 
+          />
+
+
+          <Route
+              path='/library'
+              render={(props) => <MovieLibrary {...props}selectMovie={this.selectMovie}
+              activeRentals = {this.state.activeRentals}
+              addNotificationCallback={this.addNotification}/>}
+          />
+
+          <Route
+              path='/customers'
+              render={(props) => <CustomerList {...props}
+              selectCustomer={this.selectCustomer} 
+              activeRentals = {this.state.activeRentals}
+              addNotificationCallback={this.addNotification}/>}
+
+          />
+        </div>
+      </Router>
     );
   }
+
 }
 
-export default App;
+export default AppRouter;

src/components/Customer.css

@@ -0,0 +1,3 @@
+.customer-card {
+    width:18rem
+}

src/components/Customer.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Card, Button} from 'react-bootstrap'
+import './Customer.css'
+
+const Customer = (props)=> {
+        const onSelectButtonClick = () =>{
+            props.selectCustomerCallback(props);
+        }
+        const {name, city, stateName, phone, accountCredit, moviesCheckedOutCount} = props;
+        return (
+            <Card className="customer-card">
+            <Card.Body>
+                <Card.Title>{name}</Card.Title>
+                <Card.Text>{city}, {stateName} </Card.Text>
+                <Card.Text>{phone}</Card.Text>
+                <Card.Text>${accountCredit} account credit</Card.Text>
+                <Card.Text className="card-text">{moviesCheckedOutCount} movies currently checked out </Card.Text>
+                <Button onClick={ onSelectButtonClick}  variant="primary">
+                    Select
+                </Button>
+            </Card.Body>
+          </Card>
+        )
+    }
+
+
+Customer.propTypes = {
+    name: PropTypes.string, 
+    city: PropTypes.string, 
+    stateName: PropTypes.string, 
+    phone: PropTypes.string, 
+    accountCredit: PropTypes.number, 
+    moviesCheckedOutCount: PropTypes.number,
+    selectCustomerCallback: PropTypes.func
+}
+
+export default Customer;

src/components/CustomerList.css

@@ -0,0 +1,6 @@
+.customer-list {
+    width:900px;
+    display: flex;
+    flex-flow: row wrap;
+    margin:auto;
+}

src/components/CustomerList.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import Customer from './Customer'
+
+
+import './CustomerList.css'
+
+class CustomerList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            customers: [],
+        }
+    }
+
+    getCustomers() {
+        const endpoint = 'http://localhost:3000/customers'
+
+        axios.get(endpoint)
+        .then((response) => {
+            const customerList = response.data.map((customer) => {
+                return (
+                < Customer 
+                    key= {customer.id}
+                    id= {customer.id}
+                    name = {customer.name}
+                    city= {customer.city}
+                    stateName= {customer.state}
+                    phone= {customer.phone}
+                    accountCredit= {customer.account_credit}
+                    moviesCheckedOutCount={customer.movies_checked_out_count}
+                    selectCustomerCallback={this.props.selectCustomer}
+                    />
+                );
+            });
+            this.setState({
+                customers: customerList,
+            });
+        })
+        .catch((error)=>{
+            this.props.addNotificationCallback(
+                {
+                    toastTitle: "Error!",
+                    toastMessage:`Could not retrieve customers: ${error.message}`,
+                    toastTimestamp:Date.now(),
+                    error: true,
+                    dismissNotification:this.props.dismissNotificationCallback 
+                }
+
+              )
+        });   
+    }
+
+    componentDidMount() {
+        this.getCustomers();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.activeRentals !== this.props.activeRentals)  {
+            this.getCustomers();
+          }
+    }
+
+    render() {
+        const customerList = this.state.customers;
+        return (
+            <div className="customer-list">
+                {customerList}
+            </div>
+
+        );
+    }
+}
+CustomerList.propTypes = {
+    selectCustomer: PropTypes.func,
+    addNotificationCallback: PropTypes.func,
+}
+
+export default CustomerList;