Components

Components

Modal

There are 2 different modals for use.

• The attendees modal is used for displaying information about members (eg displaying leaderboard data)
• The confirmation modal is used to prompt a user for confirmation before performing an action (eg deleting an event)
  • This modal comes with 2 buttons: Yes and No

The confirmation modal takes 5 required props

• title: The name of the modal
• message: The message to be displayed (usually a question)
• submit: A function that specifies what to do if the "Yes" button is clicked. You probably want to call setState to close the modal, then dispatch an action
• cancel: A function that specifies what to do if the "No" button is clicked. You probably want to call setState to close the modal, then dispatch an action
• opened: A boolean that holds the current status of the modal (opened or not)

The attendees modal takes 4 required props

• title: The name of the modal
• attendees: A JS array of objects, that hold information about a member (name, year, major, etc)
• onChange: A function that specifies what to do when the "Close" button is clicked
• opened: A boolean that holds the current status of the modal (opened or not)

Examples of Usage

<ConfirmationModal
     title="Logout"
     message="Are you sure you want to logout?"
     submit={() => console.log('Logged out!')}
     cancel={() => console.log('Cancelled logout request')}
     opened={this.state.modalOpened}
     />

const members = [
    { firstName: 'John', lastName: 'Doe', year: 'Sophomore', major: 'Computer Science', picture: 'https://google.com/doe.png'},
    { firstName: 'Joe', lastName: 'Bruin', year: 'Senior', major: 'Applied Math', picture: 'https://google.com/cute-mascot.png'}
];
<AttendeesModal
     title="Leaderboard"
     attendees={members}
     onChange={() => console.log('Close button clicked!')}
     opened={this.state.modalOpened}
     />