create events functionality (AgileVentures#145)

- CreateEventPage to component as it is only presenting info
- EventForm to container as it is changing state
- create helper for timezones

Co-authored-by: Abdellani <abdellani@gmail.com>
Co-authored-by: Mike Aono <aonomike@gmail.com>

Author: 3 people

.gitignore

@@ -8,3 +8,4 @@ cypress/screenshots
 .env
 .vscode/
 yarn-error.log
+.tool-versions

cypress/fixtures/loggedInUser.json

@@ -0,0 +1,31 @@
+{
+  "data": {
+    "id": 1,
+    "email": "mattwr18@gmail.com",
+    "created_at": "2015-01-26T23:19:00.575Z",
+    "updated_at": "2016-08-22T09:23:23.947Z",
+    "first_name": "Matt",
+    "last_name": "Tester",
+    "display_email": null,
+    "slug": "matt-tester",
+    "youtube_id": null,
+    "display_profile": true,
+    "country_name": "Brazil",
+    "city": "Florianopolis",
+    "region": "Santa Catarina",
+    "youtube_user_name": null,
+    "github_profile_url": null,
+    "display_hire_me": null,
+    "receive_mailings": true,
+    "timezone_offset": -18000,
+    "country_code": "BR",
+    "status_count": 0,
+    "deleted_at": null,
+    "event_participation_count": 0,
+    "can_see_dashboard": false,
+    "skill_list": [],
+    "title_list": [
+      "Mentor"
+    ]
+  }
+} 

cypress/fixtures/newlyCreatedEvent.json

@@ -0,0 +1,26 @@
+{
+  "event": {
+     "id": 1,
+     "name": "NewEvent",
+     "category": "PairProgramming",
+     "description": "",
+     "repeats": "never",
+     "repeats_every_n_weeks": null,
+     "repeats_weekly_each_days_of_the_week_mask": 0,
+     "repeat_ends": false,
+     "repeat_ends_on": null,
+     "time_zone": "UTC",
+     "created_at": "2025-01-05T13:02:16.681Z",
+     "updated_at": null,
+     "url": null,
+     "slug": "newevent",
+     "start_datetime": "2025-01-05T00:00:00.000Z",
+     "duration": 30,
+     "exclusions": [],
+     "project_id": null,
+     "creator_id": 3493,
+     "for": "All",
+     "modifier_id": null,
+     "creator_attendance": null
+  }
+}

cypress/integration/common/web_steps.js

@@ -175,3 +175,62 @@ Then("I should see the event's info", () => {
       cy.get('div.embed').should('have.length', 1)
     })
 })
+
+Given('I am logged in', () => {
+  cy.fixture('loggedInUser').then(loggedInUser => {
+    cy.route({
+      method: 'POST',
+      url: /\/users\/sign_in/,
+      response: loggedInUser,
+      status: 200
+    }).as('postLogInInfo')
+    cy.visit('/login')
+      .get('input[name=email]')
+      .type('username@user.com')
+      .get('input[name=password]')
+      .type('user1234')
+      .get('button[type=submit]')
+      .click()
+    cy.window()
+      .its('store')
+      .invoke('dispatch', { type: 'POST_LOGIN_INFO', payload: loggedInUser })
+  })
+  cy.wait('@postLogInInfo')
+})
+
+Then('I should be able to create a new event quickly', () => {
+  cy.fixture('newlyCreatedEvent').then(newlyCreatedEvent => {
+    cy.route({
+      method: 'POST',
+      url: /\/events/,
+      response: newlyCreatedEvent,
+      status: 200
+    }).as('newlyCreatedEvent')
+    cy.visit('/events/new')
+      .get('h1')
+      .should('contain', 'Creating a new Event')
+      .get('input[name=name]')
+      .type('NewEvent')
+      .get('button[type=submit]')
+      .click()
+    cy.window()
+      .its('store')
+      .invoke('dispatch', { type: 'GET_EVENT_INFO', payload: newlyCreatedEvent })
+  })
+  cy.wait('@newlyCreatedEvent')
+})
+
+Then("I should be on the newly created event's page", () => {
+  cy.url().should('include', 'events/newevent')
+    .get('h2')
+    .should('contain', 'NewEvent')
+    .get('p')
+    .should('contain', 'Event type: PairProgramming')
+    .get('p')
+    .should('contain', 'Event for: All')
+    .get('img.ui.circular.image')
+    .should('have.attr', 'src')
+    .and('contain', 'https://www.gravatar.com/avatar/ad5b3d2d4c25801fcb632cf8014fb555?s=80&d=retro')
+    .get('p')
+    .should('contain', 'created by:')
+})

cypress/integration/create_events.feature

@@ -0,0 +1,8 @@
+Feature: Create new event
+  Background:
+    Given the server is running
+
+  Scenario: Quick create
+    Given I am logged in
+    Then I should be able to create a new event quickly
+    And I should be on the newly created event's page

package.json

@@ -35,6 +35,7 @@
     "react": "16.8.0",
     "react-big-calendar": "^0.20.3",
     "react-cookie": "^3.0.8",
+    "react-datepicker": "^2.1.0",
     "react-dom": "16.8.0",
     "react-html-parser": "^2.0.2",
     "react-loading-overlay": "^1.0.1",
@@ -43,6 +44,7 @@
     "react-select": "^2.3.0",
     "react-spinners": "^0.5.1",
     "react-stripe-checkout": "^2.6.3",
+    "recompose": "^0.30.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "semantic-ui-react": "^0.84.0",

src/actions/createEventAction.js

@@ -0,0 +1,61 @@
+import axios from 'axios'
+import { GET_EVENT_INFO, CREATE_EVENT_FAILURE } from '../types'
+
+export let createEvent = props => dispatch => {
+  const {
+    headers,
+    history,
+    name,
+    category,
+    eventFor,
+    startDate,
+    startDateFormatted,
+    startTime,
+    project,
+    description,
+    timezones,
+    duration,
+    repeats,
+    weekdaysLowerCase,
+    repeatEnds,
+    endDate
+  } = props
+  return axios({
+    method: 'POST',
+    url: '/events',
+    data: {
+      event: {
+        name,
+        category,
+        for: eventFor,
+        project_id: project,
+        description,
+        duration,
+        repeats,
+        start_datetime: startDate,
+        time_zone: 'UTC',
+        repeats_weekly_each_days_of_the_week: weekdaysLowerCase,
+        repeat_ends_string: repeatEnds
+      },
+      start_date: startDateFormatted,
+      next_date: startDateFormatted,
+      start_time: startTime,
+      start_time_tz: timezones,
+      repeat_ends_on: endDate
+    },
+    headers: {
+      Authorization: headers,
+      Accept: 'application/json'
+    }
+  })
+    .then(response => {
+      dispatch({ type: GET_EVENT_INFO, payload: response.data })
+      history.push(`/events/${response.data.event.slug}`)
+    })
+    .catch(error => {
+      dispatch({
+        type: CREATE_EVENT_FAILURE,
+        message: error.message
+      })
+    })
+}

src/actions/fetchActiveProjectsAction.js

@@ -0,0 +1,13 @@
+import axios from 'axios'
+import { GET_ACTIVE_PROJECTS, FETCH_PROJECTS_FAILURE } from '../types'
+
+export let fetchActiveProjects = () => dispatch => {
+  return axios.get('/api/v1/projects/active').then(response => {
+    dispatch({ type: GET_ACTIVE_PROJECTS, payload: response.data })
+  }).catch(error => {
+    dispatch({
+      type: FETCH_PROJECTS_FAILURE,
+      message: error.message
+    })
+  })
+}

src/assets/eventForm.css

@@ -0,0 +1,7 @@
+.event-cancel-button {
+  margin-bottom: 0.5rem !important;
+}
+
+.event-save-button {
+  margin-bottom: 2rem !important;
+}

src/components/App.js

@@ -18,6 +18,7 @@ import PremiumF2FMembershipPage from '../containers/PremiumF2FMembershipPage'
 import GettingStartedPage from '../containers/GettingStartedPage'
 import EventsList from '../containers/EventsList'
 import EventInfo from '../containers/EventInfo'
+import EventForm from '../containers/EventForm'
 import { withCookies } from 'react-cookie'
 
 class App extends Component {
@@ -73,6 +74,14 @@ class App extends Component {
           <Route path='/premium-mob' component={PremiumMobMembershipPage} />
           <Route path='/premium-f2f' component={PremiumF2FMembershipPage} />
           <Route exact path='/events' component={EventsList} />
+          <Route path='/events/new' render={props => {
+            return (
+              <EventForm
+                {...props}
+                cookies={this.props.cookies}
+              />)
+          }}
+          />
           <Route path='/events/:slug' component={EventInfo} />
           <Route path='/getting-started' component={GettingStartedPage} />
         </Switch>