Skip to content

Main Site Components

Vitor Vicente edited this page Mar 9, 2020 · 1 revision

Each Component on the Main Website is exported as a Class that extends React.Component, they are used either for dynamic parts of the website, that either gather data or display data coming from the backend API; or to avoid code repetition, with elements such as the Header and Footer. Each of them is styled individually and returns some sort of HTML element back to the page it's in.

Each of them is exported as the default element of its .js file.


Header

The Header component is made up of two individual parts, the Navbar, which is constructed using react-boostrap Nav elements, so that it's correctly displayed on all devices.

In addition to the Navbar, this class holds the Masterhead image, which is the image displayed at the top of each page. This image is currently set by default in the header.css file.

Before editing this file make sure to read through it, and check out the following pages on react-bootstrap Nav-elements:


Footer

The footer element is a pretty static element, constructed from basic react-bootstrap, it has a links section, which uses FontAwesomeIcon's library of icons in react.

Before editing this file, make sure you are comfortable with using the FontAwesomeIcon library, the links below are quite useful:


ContactForm

The Contact Form element is a basic react-bootstrap Form, using Input Groups and both an onSubmit() and a onChange() internal function.

It stores the input into the state of the class and then passes that onto the SendGrip API in the back-end via an Axios post request.

The submit method itself checks and validates the data, and after submitting it sets the submitted state to true. In the future, this will allow us to display a success message.

Before working with this component make sure to read up on the following:


MemberList

The MemberList component makes use of Axios get request to get data from the back-end API, which takes the data from the PostgreSQL database.

The state of the class holds a list per UPE Class, alongside with a list for EBoard & Alumni, all of these lists are filled in the default react function componentDidMount(), then, on the render method, each of these lists are mapped into a member card list, which is then saved as a constant and displayed on the return method.

Before working with this component please make sure that you are comfortable with the API calls alongside with the structuring of our Database:

  • API Wiki Page
  • DataBase Wiki Page

EventsCalendar

The EventsCalendar component is a basic react-big-calendar component that takes an event list that is grabbed from the database. It is modified to only have Monthly and Weekly views and uses a moment localizer to get dates and other things.

The state of the class holds the list of raw events which are grabbed of the database in the default react function componentDidMount(), then the render method maps each of these events into a proper array of Events for the calendar.

This component makes use of a modified default CSS file as previously mentioned, please make sure to read the Styling page before messing with it.

If you are going to edit this component please make sure you are comfortable with the following:

Clone this wiki locally