From 6f71d328995c3a59ec0d0f96f0dc02c2436da4df Mon Sep 17 00:00:00 2001
From: anniegw2 <annie.wu701@gmail.com>
Date: Sun, 7 Jul 2019 17:02:06 -0500
Subject: [PATCH] Ref #284 Detailed overview of single event

---
 .../src/components/interviewSectionModular.js |   8 +-
 frontend/src/pages/dashboard.js               |   4 +-
 frontend/src/pages/eventdetails.js            | 109 +++++++++++++
 frontend/src/pages/interviewlist.js           | 146 +++++++++---------
 4 files changed, 189 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/pages/eventdetails.js

diff --git a/frontend/src/components/interviewSectionModular.js b/frontend/src/components/interviewSectionModular.js
index cd0afb97..3523e522 100644
--- a/frontend/src/components/interviewSectionModular.js
+++ b/frontend/src/components/interviewSectionModular.js
@@ -15,9 +15,7 @@ class InterviewSectionModular extends Component {
         name="Time Commitment"
         id="time-commitment-input"
       >
-        {options.map(option => (
-          <option value={option.value}>{option.name}</option>
-        ))}
+        {options.map(option => <option value={option.value}>{option.name}</option>)}
       </Input>
     )
   }
@@ -96,8 +94,8 @@ class InterviewSectionModular extends Component {
         {this.props.type == 'notes'
           ? null
           : this.props.type == 'dropdown'
-          ? this.mapOptionsDropdown(options)
-          : this.mapOptionsMultipleChoice(options)}
+            ? this.mapOptionsDropdown(options)
+            : this.mapOptionsMultipleChoice(options)}
         {this.props.type != 'notes' && this.props.notesPrompt ? (
           <>
             <br />
diff --git a/frontend/src/pages/dashboard.js b/frontend/src/pages/dashboard.js
index 5f2e261b..4513a9b3 100644
--- a/frontend/src/pages/dashboard.js
+++ b/frontend/src/pages/dashboard.js
@@ -46,8 +46,8 @@ var sortByMultipleProperties = function(property1, property2) {
     return x[property1][property2] === y[property1][property2]
       ? 0
       : x[property1][property2] > y[property1][property2]
-      ? 1
-      : -1
+        ? 1
+        : -1
   }
 }
 
diff --git a/frontend/src/pages/eventdetails.js b/frontend/src/pages/eventdetails.js
new file mode 100644
index 00000000..4ab2e05f
--- /dev/null
+++ b/frontend/src/pages/eventdetails.js
@@ -0,0 +1,109 @@
+import React from 'react'
+import { Table, Row, Button, Col, FormGroup, Label, Input, Container } from 'reactstrap'
+import ActionButton from '../components/actionButton'
+import Nav from '../components/nav'
+
+class Events extends React.Component<Props> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      events: []
+    }
+  }
+
+  async componentDidMount() {
+    //   const events = await getEvents() // api call
+    //   if (events !== undefined) {
+    //       this.setState({
+    //           events
+    //       });
+    //     }
+    //   }
+    this.setState({
+      events: [
+        {
+          name: "Alice's Event",
+          date: 'July 1',
+          startTime: 5,
+          endTime: 7,
+          location: 'Brew Lab',
+          attendees: 30,
+          fbLink: 'https://www.brewlab.coffee/'
+        }
+      ]
+    })
+  }
+
+  render() {
+    return (
+      <>
+        <Nav />
+        <div className="page-content-wrapper">
+          <Container fluid>
+            <Table>
+              <thead>
+                <h2>Event Name</h2>
+                <tr>
+                  <th>Date</th>
+                  <th>Start Time</th>
+                  <th>End Time</th>
+                  <th>Location</th>
+                  <th>Total Attendees</th>
+                  <th>Facebook Event Page</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {this.state.events.map(event => (
+                  <tr>
+                    <td>{event.date}</td>
+                    <td>{event.startTime}</td>
+                    <td>{event.endTime}</td>
+                    <td>{event.location}</td>
+                    <td>{event.attendees}</td>
+                    <td>{event.fbLink}</td>
+                    <td />
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+            <Table>
+              <thead>
+                <h4> Attendees List </h4>
+              </thead>
+              <tbody>
+                <Row style={{ marginBottom: '25px', marginTop: '30px' }}>
+                  <ActionButton text="Strawberry" link="/interviewlist" />
+                  <ActionButton text="Peach" link="/interviewlist" />
+                  <ActionButton text="Mango" link="/interviewlist" />
+                  <ActionButton text="Boba" link="/interviewlist" />
+                  <ActionButton text="Pizza" link="/interviewlist" />
+                  <ActionButton text="Snow" link="/interviewlist" />
+                  <ActionButton text="Mango" link="/interviewlist" />
+                </Row>
+                <Row style={{ marginBottom: '25px', marginTop: '30px' }}>
+                  <ActionButton text="Lime" link="/interviewlist" />
+                  <ActionButton text="Orange" link="/interviewlist" />
+                  <ActionButton text="Blueberry" link="/interviewlist" />
+                  <ActionButton text="Hotdog" link="/interviewlist" />
+                  <ActionButton text="Ice Cream" link="/interviewlist" />
+                  <ActionButton text="Sorbet" link="/interviewlist" />
+                </Row>
+                <Row style={{ marginBottom: '25px', marginTop: '30px' }}>
+                  <ActionButton text="Durian" link="/interviewlist" />
+                  <ActionButton text="Strawberry" link="/interviewlist" />
+                  <ActionButton text="Raspberry" link="/interviewlist" />
+                  <ActionButton text="Pineapple" link="/interviewlist" />
+                  <ActionButton text="Grapes" link="/interviewlist" />
+                  <ActionButton text="Tomato" link="/interviewlist" />
+                </Row>
+              </tbody>
+            </Table>
+          </Container>
+        </div>
+      </>
+    )
+  }
+}
+
+export default Events
diff --git a/frontend/src/pages/interviewlist.js b/frontend/src/pages/interviewlist.js
index e33bfe6d..781e175d 100644
--- a/frontend/src/pages/interviewlist.js
+++ b/frontend/src/pages/interviewlist.js
@@ -98,15 +98,16 @@ class InterviewListPage extends React.Component<Props> {
                           <h5 style={{ display: 'block' }}>Candidates in {category}</h5>
                         </Row>
                         <div className="m-2">
-                          {this.state.interviewingInterviews.map(interview =>
-                            interviewGetCategorySection(interview) !== null &&
-                            interviewGetCategorySection(interview).response.text === category ? (
-                              <li>
-                                <Link href={`/candidate?id=${interview.candidate_id}`}>
-                                  {interview.candidate_name}
-                                </Link>
-                              </li>
-                            ) : null
+                          {this.state.interviewingInterviews.map(
+                            interview =>
+                              interviewGetCategorySection(interview) !== null &&
+                              interviewGetCategorySection(interview).response.text === category ? (
+                                <li>
+                                  <Link href={`/candidate?id=${interview.candidate_id}`}>
+                                    {interview.candidate_name}
+                                  </Link>
+                                </li>
+                              ) : null
                           )}
                         </div>
                       </Container>
@@ -116,72 +117,75 @@ class InterviewListPage extends React.Component<Props> {
             </Row>
           ) : (
             <Row className="candidate-list-box">
-              {candidates.map(candidate =>
-                candidate.interviews.length === 0 ? null : (
-                  <>
-                    <CandidateInterviewsModal
-                      isOpen={this.state.modalOpen}
-                      candidateId={candidate._id}
-                      exitModal={this.toggleModal}
-                      candidateName={currentCandidate === undefined ? '' : currentCandidate.name}
-                    />
-                    <CardCol key={candidate._id}>
-                      <Card className="candidate-card h-100">
-                        <CardTitle style={{ margin: '15px 0 0 0' }}>
-                          {candidate.name ? (
-                            <>
-                              <Link href={{ pathname: '/candidate', query: { id: candidate._id } }}>
-                                <a className="m-3 card-title inline">{candidate.name}</a>
-                              </Link>
-                              <p
-                                className="text-muted"
-                                style={{
-                                  float: 'right',
-                                  marginBottom: 0,
-                                  paddingRight: '5px',
-                                  fontSize: '12px'
-                                }}
-                              >
-                                Avg Score: {avgInterviewScore(candidate.interviews)}
-                                <br />
-                                interviews: {candidate.interviews.length}
-                              </p>
-                            </>
-                          ) : (
-                            <></>
-                          )}
-                        </CardTitle>
-                        <CardBody>
-                          <p>
-                            <b>Graduating: </b>
-                            {candidate.graduationDate}
-                          </p>
-                          {this.state.interviews
-                            .filter(interview => interview.candidate_id == candidate._id)
-                            .map(interview => (
-                              <div className="pb-1">
-                                <p className="no-buffer">
-                                  <b>Interviewer: </b>
-                                  {interview.interviewer_name}
+              {candidates.map(
+                candidate =>
+                  candidate.interviews.length === 0 ? null : (
+                    <>
+                      <CandidateInterviewsModal
+                        isOpen={this.state.modalOpen}
+                        candidateId={candidate._id}
+                        exitModal={this.toggleModal}
+                        candidateName={currentCandidate === undefined ? '' : currentCandidate.name}
+                      />
+                      <CardCol key={candidate._id}>
+                        <Card className="candidate-card h-100">
+                          <CardTitle style={{ margin: '15px 0 0 0' }}>
+                            {candidate.name ? (
+                              <>
+                                <Link
+                                  href={{ pathname: '/candidate', query: { id: candidate._id } }}
+                                >
+                                  <a className="m-3 card-title inline">{candidate.name}</a>
+                                </Link>
+                                <p
+                                  className="text-muted"
+                                  style={{
+                                    float: 'right',
+                                    marginBottom: 0,
+                                    paddingRight: '5px',
+                                    fontSize: '12px'
+                                  }}
+                                >
+                                  Avg Score: {avgInterviewScore(candidate.interviews)}
+                                  <br />
+                                  interviews: {candidate.interviews.length}
                                 </p>
-                                <div style={{ paddingLeft: '5px' }}>
+                              </>
+                            ) : (
+                              <></>
+                            )}
+                          </CardTitle>
+                          <CardBody>
+                            <p>
+                              <b>Graduating: </b>
+                              {candidate.graduationDate}
+                            </p>
+                            {this.state.interviews
+                              .filter(interview => interview.candidate_id == candidate._id)
+                              .map(interview => (
+                                <div className="pb-1">
                                   <p className="no-buffer">
-                                    <i>Category: </i> {interview.category}
-                                    <br />
-                                    <i>Score: </i> {interview.overall_score}
+                                    <b>Interviewer: </b>
+                                    {interview.interviewer_name}
                                   </p>
+                                  <div style={{ paddingLeft: '5px' }}>
+                                    <p className="no-buffer">
+                                      <i>Category: </i> {interview.category}
+                                      <br />
+                                      <i>Score: </i> {interview.overall_score}
+                                    </p>
+                                  </div>
                                 </div>
-                              </div>
-                            ))}
-                          <ActionLink
-                            text="View interviews"
-                            onClick={() => this.toggleModal(candidate._id)}
-                          />
-                        </CardBody>
-                      </Card>
-                    </CardCol>
-                  </>
-                )
+                              ))}
+                            <ActionLink
+                              text="View interviews"
+                              onClick={() => this.toggleModal(candidate._id)}
+                            />
+                          </CardBody>
+                        </Card>
+                      </CardCol>
+                    </>
+                  )
               )}
             </Row>
           )}