render()

in lti-components/web/src/components/EventPanel.js [104:178]
75 lines of code
3 McCabe index (conditional complexity)

    render() {
        return (
            <div className="w-100">
                {this.state.eventsLoaded && (
                    <Tabs 
                        activeKey={this.state.selectedTab} 
                        onSelect={this.handleEventTabSelection} 
                        id="eventTab" 
                        className="w-100 justify-content-center d-flex mt-3">
                        <Tab className="w-100" eventKey={1} title={`Past Weeks [${this.state.events.filter(this.isEventOfPast).length}]`}>
                            <div className="w-100 justify-content-center d-flex flex-wrap mt-3">
                            {
                                this.state.events.filter(this.isEventOfPast).map((event) => {
                                    return <EventCard 
                                        key={event.eventId} 
                                        principal={this.props.principal} 
                                        event={event} />
                                })
                            }
                            </div>
                        </Tab>
                        <Tab className="w-100" eventKey={2} title={`Last Week [${this.state.events.filter(this.isEventOfLastWeek).length}]`}>
                            <div className="w-100 justify-content-center d-flex flex-wrap mt-3">
                            {
                                this.state.events.filter(this.isEventOfLastWeek).map((event) => {
                                    return <EventCard 
                                        key={event.eventId}
                                        principal={this.props.principal} 
                                        event={event} />
                                })
                            }
                            </div>
                        </Tab>
                        <Tab className="w-100" eventKey={3} title={`This Week [${this.state.events.filter(this.isEventOfThisWeek).length}]`}>
                            <div className="w-100 justify-content-center d-flex flex-wrap mt-3">
                            {
                                this.state.events.filter((e) => moment().isSame(e.moment, `week`)).map((event) => {
                                    return <EventCard 
                                        key={event.eventId}
                                        principal={this.props.principal}
                                        event={event} />
                                })
                            }
                            </div>
                        </Tab>
                        <Tab className="w-100" eventKey={4} title={`Next Week [${this.state.events.filter(this.isEventOfNextWeek).length}]`}>
                            <div className="w-100 justify-content-center d-flex flex-wrap mt-3">
                            {
                                this.state.events.filter(this.isEventOfNextWeek).map((event) => {
                                    return <EventCard 
                                        key={event.eventId}
                                        principal={this.props.principal} 
                                        event={event} />
                                })
                            }
                            </div>
                        </Tab>
                        <Tab className="w-100" eventKey={5} title={`After Next Weeks [${this.state.events.filter(this.isEventOfFuture).length}]`}>
                            <div className="w-100 justify-content-center d-flex flex-wrap mt-3">
                            {
                                this.state.events.filter(this.isEventOfFuture).map((event) => {
                                    return <EventCard 
                                        key={event.eventId}
                                        principal={this.props.principal}
                                        event={event} />
                                })
                            }
                            </div>
                        </Tab>
                    </Tabs>
                )}
                {!this.state.eventsLoaded && (<Alert>{this.state.status}</Alert>)}
            </div>
        );
    }