Odtnhj

Having an issue where my component, Offers, which is supposed to load offers on current items for the user, will not load the offers after leaving the route and coming back to it (unless I refresh the page). I have tried a million different ways to fix this and cannot get it to work. I have my state filled in componentDidMount(), which calls two functions to load the current user data and the current user offer data into state. Shouldn't componentDidMount() fire every time I route to the component? When i console.log state after routing back, the offers array is empty.

import React, Component from 'react';
import App from "./App";
import firebase from "./firebase.js";
import Redirect from "react-router-dom";
import 'antd/dist/antd.css';
import Layout, Form, Input, Icon, Card, Button, Col, Row, Menu, Avatar, Modal, DatePicker from 'antd';
import './Offers.css';
import moment from 'moment';

const RangePicker = DatePicker;
const Meta = Card;
const SubMenu = Menu;
const Header, Content, Footer, Sider = Layout;
const Search = Input.Search;
const InputGroup = Input.Group;
const TextArea = Input;
const FormItem = Form.Item;


export default class Offers extends Component 
constructor(props) 
super(props);
this.state = 
 name: "",
 userid: "",
 password: "",
 redirect: false,
 redirectTarget: "",
 currentVendorItems: ,
 user: ,
 currentUserName: '',
 currentUserDescription: '',
 visible: false,
 description: '',
 currUserBuyerArray: ,
 currUserVendorArray: ,
 requestedPrice: 'None',
 rentalTime: ,
 visible: false,
 ;


//Router
redirect = e => 
 this.setState(
 redirect: true, 
 redirectTarget: e
 );


//Handles canceling an offer, and therefore deleting it
handleDelete = (e) =>
 firebase.database().ref('offers/' + e.id).remove();

 // **** Might need to just remove it from the current state array to save time ****
 this.getOfferInfo();
 this.handleRented(e.itemID, false);


//Handles vendor rejecting, so buyer can cancel or make a counter offer
handleReject = (e) =>
 firebase.database().ref('offers/' + e.id).update(
 status: "Rejected"
 );
 this.getOfferInfo();


//Handles acceptance of an offer, buyer now will have option to pay
handleAccept = (e) =>
 firebase.database().ref('offers/' + e.id).update(
 status: "Accepted"
 );
 this.getOfferInfo();
 this.handleRented(e.itemID, true);


handleRented = (e, boolean) =>
 firebase.database().ref('items/' + e).update(
 itemRented: boolean
 );


//Modal Functions
showModal = () => 
 this.setState(
 visible: true,
 );


handleOk = (e) => 
 this.setState(
 visible: false,
 );


handleCancel = (e) => 
 this.setState(
 visible: false,
 );


//Disables days before the current day
disabledDate = (current) => 
 // Can not select days before today and today
 return current && current < moment().endOf('day');


//Handles time string entered
handleTime = (value, dateString) => 
 this.setState(
 rentalTime: dateString
 )


//Handles additonal info inputted
handlePrice = (e) => 
 e.preventDefault();
 this.setState(
 requestedPrice: e.target.value
 );


//Handles submission of a counter offer on a rejected item
handleSubmit = (date, reqPrice, offerID) => 
 firebase.database().ref('offers/' + offerID).update(
 status: "Pending",
 date: date,
 requestedPrice: reqPrice
 );
 this.getOfferInfo();
 this.handleCancel();


getUserInfo = () => 
 firebase.auth().onAuthStateChanged( authUser => 
 if (authUser) 
 // User is signed in.
 //Auth database reference
 var user = firebase.auth().currentUser
 this.setState(
 user: firebase.auth().currentUser
 );

 else 
 // No user is signed in.
 console.log('we messed up somewhere!')
 
 );


getOfferInfo = () => 
 const currUserOffersRef = firebase.database().ref('offers/');
 currUserOffersRef.on('value', (snapshot) => 
 let offersSnapshot = snapshot.val();

 let buyerOffersArray = 
 let vendorOffersArray = 

 for (let offer in offersSnapshot) 
 //If the user id == the user id on the offer, they made it
 if (this.state.user.uid === offersSnapshot[offer].userUID)
 buyerOffersArray.push(
 id: offer,
 name: offersSnapshot[offer].name,
 date: offersSnapshot[offer].date,
 info: offersSnapshot[offer].info,
 itemID: offersSnapshot[offer].itemID,
 userUID: offersSnapshot[offer].userUID,
 vendorUID: offersSnapshot[offer].vendorUID,
 price: offersSnapshot[offer].price,
 requestedPrice: offersSnapshot[offer].requestedPrice,
 status: offersSnapshot[offer].status,
 );
 
 //if the user id == the vendor id on the offer, they created the listing
 if (this.state.user.uid === offersSnapshot[offer].vendorUID)
 vendorOffersArray.push(
 id: offer,
 name: offersSnapshot[offer].name,
 date: offersSnapshot[offer].date,
 info: offersSnapshot[offer].info,
 itemID: offersSnapshot[offer].itemID,
 userUID: offersSnapshot[offer].userUID,
 vendorUID: offersSnapshot[offer].vendorUID,
 price: offersSnapshot[offer].price,
 requestedPrice: offersSnapshot[offer].requestedPrice,
 status: offersSnapshot[offer].status,
 );
 
 
 this.setState(
 currUserBuyerArray: buyerOffersArray,
 currUserVendorArray: vendorOffersArray
 );
 )


// On component mount, get info from DB and auth as well as the offer info
componentDidMount() 
 this.getUserInfo();
 this.getOfferInfo();


render() 
 //Router
 if(this.state.redirect === true)
 return <Redirect to= this.state.redirectTarget />;
 
 console.log(this.state)
 return (
 <Layout>
 <Layout className="layout-header">
 <Header>
 <div className="logo" />
 <Menu
 theme="dark"
 mode="horizontal"
 defaultSelectedKeys=['2']
 style= lineHeight: '64px' 
 >
 <Menu.Item key="1" onClick=e => this.redirect("/Marketplace")>Marketplace</Menu.Item>
 <Menu.Item key="2" onClick=e => this.redirect("/Profile")>Profile</Menu.Item>
 <Menu.Item key="3" onClick=e => this.redirect("/VendorPage")>Create Listing</Menu.Item>
 </Menu>
 </Header>

 <Layout className="layout-main">
 <Sider width=300 style= background: '#fff' >
 <Menu
 mode="inline"
 defaultSelectedKeys=['3']
 style= height: '100%', borderRight: 0 
 >
 <Menu.Item key="1" onClick=e => this.redirect("/Profile")>Profile</Menu.Item>
 <Menu.Item key="2" onClick=e => this.redirect("/MyItems")>My Items</Menu.Item>
 <Menu.Item key="3">Offers</Menu.Item>
 </Menu>
 </Sider>
 <Layout className="layout-profile">
 <div className= "offers-other-items" style=margin: 40>
 <Row>
 <Col span = 22>
 <Card title="My Offers">
 //Checks if the array is empty, and lets the user know if there are no offers
 (this.state.currUserBuyerArray.length == 0)
 ? <div>You have no current offers on items</div> 
 : 
 <div> 
 this.state.currUserBuyerArray.map(offer => 
 return (
 <div>
 <Row>
 <Col span=20 offset=2>
 <div className="card" style=background: "#c4c4c4", width: "100%", margin: "0 auto">
 <Card className="card-content" title=offer.name + " - " + offer.status>
 Intial Price: $offer.price <br/>
 Requested Price: $offer.requestedPrice <br/>
 Requested Dates: offer.date[0] to offer.date[1] <br/>
 <div>
 
 (offer.status === "Pending") 
 ? <div className="offersButton">
 <Button type="primary" icon="delete" onClick=e => this.handleDelete(offer)>Cancel Offer</Button>
 </div>
 : <div></div>
 
 
 (offer.status === "Accepted") 
 ? <div className="offersButton">
 <Button type="primary" icon="delete" onClick=e => this.handleDelete(offer)>Cancel Offer</Button>
 <Button type="primary" icon="check" onClick=e => this.handlePayment(offer.id)>Payment</Button>
 </div>
 : <div></div>
 
 
 (offer.status === "Rejected") 
 ?
 <div className="offersButton">
 <Button type="primary" icon="delete" onClick=e => this.handleDelete(offer)>Cancel Offer</Button> 
 <Button type="primary" icon="check" onClick=e => this.showModal()>Make another Offer</Button>
 <Modal
 visible=this.state.visible
 onOk=this.handleOk
 onCancel=this.handleCancel
 footer=[
 <Button key="back" onClick=this.handleCancel>Cancel</Button>,
 <Button type="primary" onClick=e => this.handleSubmit(this.state.rentalTime, this.state.requestedPrice, offer.id)>
 Request
 </Button>
 ]
 >
 <RangePicker
 disabledDate=this.disabledDate
 format="MM-DD-YYYY"
 placeholder=['Start Time', 'End Time']
 onChange=this.handleTime
 />
 <p style = color: "red"> this.state.errorMessage</p>
 <p>Request a different price (Optional)</p>
 <Input
 placeholder="Requested Price"
 onChange=this.handlePrice
 />
 </Modal>
 </div>
 : <div></div>
 
 </div>
 </Card>
 </div>
 </Col>
 </Row>
 <br />
 </div>
 )
 )
 
 </div> 
 
 </Card>
 </Col>
 </Row>
 </div>
 <div className="offers-my-items" style=margin: 40>
 <Row>
 <Col span = 22>
 <Card title="Offers on my Items">

 //Check if message failed
 (this.state.currUserVendorArray.length == 0)
 ? <div>There are no offers on your items</div> 
 : 
 <div>
 this.state.currUserVendorArray.map(offer => 
 return (
 <div>
 <Row>
 <Col span=20 offset=2>
 <div className="card" style=background: "#c4c4c4", width: "100%", margin: "0 auto">
 <Card className="card-content" title=offer.name + " - " + offer.status>
 Intial Price: $offer.price <br/>
 Requested Price: $offer.requestedPrice <br/>
 Requested Dates: offer.date[0] to offer.date[1] <br/>
 <div>
 
 (offer.status === "Pending") 
 ? <div className="offersButton">
 <Button type="primary" icon="delete" onClick= e => this.handleReject(offer.id)>Reject</Button>
 <Button type="primary" icon="check" onClick= e => this.handleAccept(offer)>Accept</Button>
 </div>
 : <div></div>
 
 
 (offer.status === "Rejected") 
 ? <div className="offersButton">
 <p>Awaiting counter offer from buyer, or you can delete the offer </p>
 <Button type="primary" icon="delete" onClick= e => this.handleDelete(offer)>Cancel Offer</Button>
 </div>
 : <div></div>
 
 </div>
 </Card>
 </div>
 </Col>
 </Row>
 <br/>
 </div>
 )
 )
 
 </div> 
 
 </Card>
 </Col>
 </Row>
 </div>
 </Layout>
 </Layout>
 </Layout>
 </Layout>
 );