Day 50 at Makers Academy

GitClub Continued

Improved Form

This morning I made a few improvements to what I had done last night. I found that as this was a React form rather than a HTML form, the required attribute didn’t work, which meant forms could be submitted even if they aren’t filled in.

To fix this, I set all the form values to states which defaulted to '', and added a validate form method which checked these values. If any of them were still '' then it would return a pop up error message.

validateForm(){
  console.log("VALIDATE FORM")
  if(this.state.training){
    if(this.state.home === '' || this.state.date === '' || this.state.time === '' || this.state.location === '') {
          window.alert("Please fill in all the fields")
      } else {
           console.log("Add Training")
          this.addFixture();
      }
  } else {
    if(this.state.home === '' || this.state.away === '' || this.state.date === '' || this.state.time === '' || this.state.location === '') {
          window.alert("Please fill in all the fields")
      } else {
          this.addFixture();
      }
  }
  };

This prevents a load of empty entries being put into the database. I also added a message to confirm that a fixture had been added.

Since then however we have added a fixture box to display all the fixtures that have been added, so the popup is probably no longer necessary.

Improved Navbar

I also added a new navbar design to a couple of pages to see which one looked better

Fixture Calendar

One of the features we really wanted is to display all the fixtures and training sessions in an interactive calendar. We were hoping this would be fairly straightforward, but as is usually the case it really is not! I did a lot of Googling to find a solution, and the best I have found so far is https://fullcalendar.io/. I have managed to get this to render a calendar in our app.

Now the issue is getting our data into the calendar. I need to fetch it from our api, and then put it into a format that the calendar will accept. I am finding it difficult to get this to work, but I think I am close so I am going to keep at it!

Todays Song of the Day