GET request does not have latest entry inside - reactjs

Question

I made an Event Feed in React. Here is the structure (I've removed unrelated components:
App.js
|_EventFeed.js
|_EventCreate.js
My problem is this:
When I create an event in EventCreate, I hope for the EventFeed to update with the latest entry but it does not happen. It does update eventually after a few seconds or refreshes - and I think this delay is because I'm using free Heroku dynos on the back-end.
How can I make it update automatically?
Code here:
EventFeed.js
import React from 'react';
import {
Button,
Row,
Col,
CardBody,
CardSubtitle,
Container,
CardText,
CardTitle,
Progress,
} from 'reactstrap';
import axios from 'axios';
import Loader from '../images/loader.gif';
import { Link } from "react-router-dom";
import nightWorkout from "../images/nightWorkout.jpg";
class EventFeed extends React.Component {
constructor(props) {
super(props);
this.state = {
message: true,
eventsList: [],
isLoading: true,
eventsJoined:0
}
}
//retrieve all events via axios
componentDidMount() {
axios.get('https://final-project-healthy.herokuapp.com/api/v1/events/')
.then(response => {
let tempEventList = response.data;
this.setState({ eventsList: tempEventList, isLoading: false })
})
.catch(error => {
console.log('ERROR: ', error);
})
}
refreshFeed = () =>{
axios.get('https://final-project-healthy.herokuapp.com/api/v1/events/')
.then(response => {
let tempEventList = response.data;
this.setState({ eventsList: tempEventList, isLoading: false })
})
.catch(error => {
console.log('ERROR: ', error);
})
}
componentDidUpdate(){
this.refreshFeed();
}
handleSubmit = e =>{
//make an api call to guestlist and add or delete current user to guest list
let event_id = e.target.id
let JWT = localStorage.getItem('userToken')
axios.post('https://final-project-healthy.herokuapp.com/api/v1/guestlists/',
{event_id:event_id},
{
headers:{
Authorization: `Bearer ${JWT}`
}
}
).then(response => {
console.log(response);
this.refreshFeed();
}).catch(error => {
console.log("ERROR in request: ", error)
})
}
render() {
const { eventsList, isLoading } = this.state;
return (
<div style={{backgroundImage: `url(${nightWorkout})`, backgroundSize:'cover', backgroundAttachment:'fixed', height:'100wh'}}>
<div>
<h1 className="text-center text-light shadow">Events Near You</h1>
<h4 className="text-center text-light shadow">Don't see a fitness meet you like? How about <Link to={'/events/create'}>creating your own</Link>?</h4>
{isLoading ?
<Container>
<Row className="d-flex align-items-center justify-content-center">
<img src={Loader} alt="Loading event feed" />
</Row>
</Container>
:
eventsList.map((eventInList) => {
let guestlist=[]
if (eventInList.guests.includes(this.props.current_user.id)){
console.log('The user is here!')
}
return (
<Container key={eventInList.id} className="my-2 bg-none">
<Row md="10" className="d-flex align-items-center rounded bg-info" style={{opacity:'0.9'}}>
<Col md="4" className=" d-flex justify-content-center align-item-center rounded">
<img width="200px" height="200px" className="border border-white m-3 rounded justify-content-center" src={eventInList.image} alt="event image" />
</Col>
<Col md="8" className="rounded">
<CardBody className="p-1 text-left">
<CardTitle><h3 className='text-light'>{eventInList.name}</h3></CardTitle>
<CardSubtitle className='text-light'>{eventInList.time}</CardSubtitle>
<CardText className='text-light'>Host : {eventInList.host.username}</CardText>
<CardText className='text-light'>Location:{eventInList.location}<br/>What to expect:{eventInList.description}</CardText>
<CardText className="text-light">Capacity: {eventInList.guests.length}/{eventInList.max_number}</CardText>
<Row className="align-items-center">
<Col md="8">
<Progress color="success" value={Math.floor(eventInList.guests.length/eventInList.max_number*100)} />
</Col>
<Col md="4">
{eventInList.guests.includes(this.props.current_user.id)
?
<Button id={eventInList.id} color="danger" onClick={this.handleSubmit}>Leave</Button>
:
<Button id={eventInList.id} color="success" onClick={this.handleSubmit}>Join</Button>
}
</Col>
</Row>
</CardBody>
</Col>
</Row>
</Container>)
})
}
</div>
</div>
)
}
}
export default EventFeed;
EventCreate.js
import React from 'react';
import {
Card,
CardImg,
CardText,
Button,
Col,
Form,
FormText,
FormGroup,
Input,
Label,
Row,
} from "reactstrap"
import axios from 'axios';
import PlacesWithStandaloneSearchBox from "../components/PlacesWithStandaloneSearchBox";
import { Link } from "react-router-dom";
import Loader from "../images/loader.gif";
import morningRun from "../images/morning_run.jpg"
class EventCreate extends React.Component {
constructor(props) {
super(props);
this.imageUpload=React.createRef();
this.state = {
eventName: '',
description: '',
location: '',
time: '',
maxNumber: '',
isLoading:false,
previewImage:null,
imageFile:null,
message:''
}
}
handleChange = e => {
this.setState({ [e.target.id]: e.target.value }, () => {
//for debugging purposes, this ensures that the state is updated with the field values
for (const key in this.state) {
if (this.state.hasOwnProperty(key)) {
console.log(key + " -> " + this.state[key] + ` of data type ${typeof (this.state[key])}`);
}
}
})
console.clear()
}
liftMyLocationUp = locationFromGoogle => {
this.setState({ location: locationFromGoogle })
}
//handleSubmit lifts up field values
handleSubmit = (e) => {
let formData = new FormData()
formData.append("image_file", this.state.imageFile, this.state.imageFile.name);
formData.append("name", this.state.eventName);
formData.append("description", this.state.description);
formData.append("max_number", this.state.maxNumber);
formData.append("time", this.state.time);
formData.append("location", this.state.location);
console.log('handleSubmit called')
this.registerEvent(formData);
setTimeout(() => this.props.history.push('/events'), 2000);
}
handleFile = (e) =>{
console.log(e.target.files[0])
this.setState({
imageFile:e.target.files[0],
previewImage:URL.createObjectURL(e.target.files[0]),
})
}
//necessary to setState? why not just keep it as props or make ?
registerEvent = (formData) => {
let JWT = localStorage.getItem('userToken')
axios.post('https://final-project-healthy.herokuapp.com/api/v1/events/',
formData,
{
headers: {
'Authorization': `Bearer ${JWT}`
}
}
).then(response => {
if (response.data.success){
console.log(response.data.success)
}
}).catch(error => {
console.log("ERROR in request: ", error);
})
}
handleClick = () =>{
this.imageUpload.current.click();
}
render() {
const { event_name, description, location, max_number, time, isLoading, previewImage, imageFile, message } = this.state
return (
<div style={{backgroundImage: `url(${morningRun})`, backgroundSize:'cover', height:'100vh'}}>
<h3 className="text-center text-light">Create Your Event Here:</h3>
<Row className="d-flex justify-content-center">
<Col lg="4" md="5" sm="12" className="d-flex justify-content-center">
<Form className="d-flex justify-content-center">
<FormGroup >
<Label for="eventName" className="text-light">Event Name:</Label>
<Input id="eventName" type="text" value={event_name} onChange={this.handleChange} placeholder="Give me a name"></Input>
<Label for="description" className="text-light">Description:</Label>
<Input id="description" type="text" value={description} onChange={this.handleChange} placeholder="Share what I'm about"></Input>
<Label for="location" className="text-light">Location:</Label>
<PlacesWithStandaloneSearchBox liftMyLocationUp={this.liftMyLocationUp} />
{/* <Input id="location" type="text" value={location} onChange={this.handleChange} placeholder="Tell folks where to find me"></Input> */}
<Label for="time" className="text-light">Time:</Label>
<Input id="time" type="datetime-local" value={time} onChange={this.handleChange}></Input>
<Label for="maxNumber" className="text-light">Max Number:</Label>
<Input id="maxNumber" type="number" min="0" value={max_number} onChange={this.handleChange} placeholder="It's always better with company"></Input>
<div> </div>
</FormGroup>
</Form>
</Col>
<Col lg="4" md="5" sm="12" className="d-flex justify-content-center">
<Row>
<Form>
<FormGroup>
<Label className="d-block text-light">Upload your event image here:</Label>
<div id="image-preview" onClick={this.handleClick}>
<Card style={{width:"300px", height:"300px"}} className="d-flex justify-content-center align-items-center">
{/* Set loading icon when uploading picture. nested ternary operator. */}
{!isLoading?(!imageFile?(<h4 className="text-center">{message ? message : "Click to upload"}</h4>):(<CardImg src={previewImage} height="300px" width="300px"/>)):<Loader/>}
</Card>
</div>
<input id="upload" style={{display:"none"}} type="file" accept="image/*" multiple={false} name="image-file" ref={this.imageUpload} id="imageFile" onChange={this.handleFile}></input>
</FormGroup>
<FormGroup>
<div id="image-submit-form">
<Row >
<Col md={12} sm={12}>
</Col>
</Row>
</div>
</FormGroup>
</Form>
</Row>
</Col>
</Row>
<Row>
<Col className="d-flex justify-content-center">
<Button color="primary" className="text-light" onClick={this.handleSubmit}>Create Event</Button>
</Col>
</Row>
</div>
)
}
}
export default EventCreate;