Merge pull request #159 from ubclaunchpad/frontend/create_event

frontend: create event

frontend/src/components/App.js

@@ -9,7 +9,8 @@ import Reset from './Reset';
 import Signup from './Signup';
 import Navbar from './Navbar';
 import CreateApplicationPeriod from '../scenes/ApplicationPeriod/create';
-
+import CreateEvent from '../scenes/Event/create';
+import EventType from '../scenes/Event/type';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class App extends Component {
@@ -74,6 +75,8 @@ class App extends Component {
             <Route exact path="/reset" component={Reset} />
             <Route exact path="/signup" component={() => <Signup client={client} />} />
             <Route exact path="/scenes/applicationperiod" component={CreateApplicationPeriod} />
+            <Route exact path="/event" component={CreateEvent} />
+            <Route exact path="/event/type" component={EventType} />
           </Switch>
         </div>
       </BrowserRouter>

frontend/src/scenes/Event/create.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import Notification from '../../components/Notification';
+class CreateEvent extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      eventname: '',
+      notification: null,
+    };
+    this.updateTextFields = this.updateTextFields.bind(this);
+  }
+
+  updateTextFields(e) {
+    const infoField = e.target.getAttribute('name');
+    this.setState({ [infoField]: e.target.value });
+  }
+
+  async checkEventName() {
+    const { eventname } = this.state;
+
+    if (!eventname) {
+      this.setState({
+        notification: {
+          type: 'error',
+          message: 'Event name cannot be empty',
+        },
+      });
+    }
+  }
+
+  render() {
+    const { notification, eventname } = this.state;
+    return (
+      <div>
+        <div className="card card-smallpad card-box margin-top-100 margin-sides-auto w-800">
+          <div>
+            <a href="/login">Go Back</a>
+            <div className="card-align-right"><a href="/login">X</a></div>
+          </div>
+          <div className="pad-left-100 title card-title">Create Event</div>
+          <Notification {...notification} />
+          <h2 className="pad-left-100 fw-normal card-description pad-bot-m">Add a point of data entry to your application period</h2>
+          <h2 className="pad-left-100 flex-ai-start pad-top- fw-normal card-text">Event Name</h2>
+          <div className="pad-left-100 flex-inlinegrid margin-top-xs margin-bottom-xs pad-bot-m">
+            <input className="input-box input-large" name="eventname" type="eventname" placeholder="Eg. Launch Pad Interview Notes" onChange={this.updateTextFields} />
+          </div>
+          <div className="pad-ends-25 flex-al-center">
+            <button className="button-click button-small animate-button margin-ends-xs margin-right-s" type="submit" eventname={eventname} onClick={this.checkEventName}><a href="/event/type">Next</a></button>
+            <a href="/login" className="card-underline">Cancel</a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CreateEvent;

frontend/src/scenes/Event/type.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import Notification from '../../components/Notification';
+class CreateEvent extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      eventtype: '',
+      notification: null,
+    };
+    this.updateTextFields = this.updateTextFields.bind(this);
+  }
+
+  updateTextFields(e) {
+    const infoField = e.target.getAttribute('name');
+    this.setState({ [infoField]: e.target.value });
+    this.attemptCreateEvent();
+  }
+
+  // TODO once endpoint is set up, currently does nothing
+  async attemptCreateEvent() {
+    const {
+      eventtype,
+    } = this.state;
+    const { client, eventname } = this.props;
+
+    if (!eventtype) {
+      this.setState({
+        notification: {
+          type: 'error',
+          message: 'Event type cannot be empty',
+        },
+      });
+    } else {
+      try {
+        await client.createEvent({ eventname, eventtype });
+      } catch (e) {
+        this.setState({
+          notification: {
+            type: 'error',
+            message: 'Failed to create a new event.',
+          },
+        });
+      }
+    }
+  }
+
+  render() {
+    const { notification } = this.state;
+    return (
+      <div>
+        <div className="card card-smallpad card-box margin-top-100 margin-sides-auto w-600">
+          <div>
+            <a href="/event">Go Back</a>
+            <div className="card-align-right"><a href="/event">Skip</a></div>
+          </div>
+          <div className="pad-left-50 title card-title">Event type</div>
+          <Notification {...notification} />
+          <h2 className="pad-left-50 fw-normal card-description pad-bot-xs">Pick an event type</h2>
+          <div className="pad-ends-25 flex-al-center">
+            <button className="button-click button-small animate-button margin-ends-xs margin-right-s" type="submit" name="email" onClick={this.updateTextFields}><a href="/event/type">Email</a></button>
+            <button className="button-click button-small animate-button margin-ends-xs margin-right-s" type="submit" name="form" onClick={this.updateTextFields}><a href="/event/type">Form</a></button>
+            <button className="button-click button-small animate-button margin-ends-xs margin-right-s" type="submit" name="interview" onClick={this.updateTextFields}><a href="/event/type">Interview</a></button>
+            <button className="button-click button-small animate-button margin-ends-xs margin-right-s" type="submit" name="notes" onClick={this.updateTextFields}><a href="/event/type">Notes</a></button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CreateEvent;

frontend/src/styles/components/card.scss

@@ -1,10 +1,45 @@
 // Default Card (without fixed weight and height)
 .card {
   background: white;
+  padding: 25px 50px;  
+  &-smallpad { padding: 10px 15px; }
+
   border-radius: 50px;
-  padding: 25px 50px;
+  &-box { border-radius: 10px; }
+
   .card {
     &-title { color: $gray-2; }
     &-text { color: $gray-3; }
+    &-underline { 
+        &:hover {
+        text-decoration: underline;
+        transition: all $transition-time ease-in-out;
+        }
+    }
+    &-description { font-size: 16px; color: $gray-3; }
+  }
+  &-align-right { 
+    right: 15px;
+    top: 5px;
+    float: right;
+  }
+  &-button {
+    background-color: rgb(243, 62, 62);
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    border-radius: 12px;
+
+    .button {
+        &-small { font-size: 14px; }
+        &-large { font-size: 16px; }
+    }
+  }
+  &-row {
+    display: flex;
+    flex-direction: row;
   }
 }

frontend/src/styles/utils/heights-and-widths.scss

@@ -2,7 +2,9 @@
   &-100p { height: 100%; }
 }
 .w {
+  &-800 { width: 800px; }
   &-400 { width: 400px; }
   &-500 { width: 500px; }
+  &-600 { width: 600px; }
   &-100p { width: 100%; }
 }

frontend/src/styles/utils/spacing.scss

@@ -12,6 +12,7 @@ $spacing-xxl: 48px;
 $spacing-nav: 60px;
 $spacing-25:  25px;
 $spacing-50:  50px;
+$spacing-80:  80px;
 $spacing-100: 100px;
 $spacing-200: 200px;
 $spacing-300: 300px;
@@ -28,6 +29,8 @@ $spacing-300: 300px;
   // left padding
   &-left, &-sides {
     &-m { padding-left: $spacing-m; }
+    &-50 { padding-left: $spacing-50; }
+    &-100 { padding-left: $spacing-100; }
     &-300 { padding-left: $spacing-300; }
   }