[WIP]164 project search functionality fixed

cypress/integration/journey.feature

@@ -20,3 +20,4 @@ Feature: Journey test
     Then I should see a calendar with events
     When I click on an event in the calendar
     Then I should see the event's info
+

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "connected-react-router": "^6.4.0",
     "dotenv-webpack": "^1.7.0",
     "global": "^4.3.2",
     "izitoast": "^1.4.0",

package.json~

@@ -0,0 +1,103 @@
+{
+  "name": "WebsiteOne-FE",
+  "version": "1.0.0",
+  "description": "Front end for WebsiteOne",
+  "main": "index.js",
+  "repository": "[email protected]:AgileVentures/WebsiteOne-FE.git",
+  "author": "AgileVentures",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open",
+    "start-test-server": "webpack-dev-server --mode development --port 8082",
+    "build": "webpack --mode production",
+    "fix": "standard --fix",
+    "test": "export NODE_ENV=testing && standard && jest",
+    "windows-test": "set NODE_ENV=testing&& standard && jest",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "cypress:ci": "cypress run",
+    "cypress:local": "cypress open --config baseUrl=http://localhost:8082",
+    "cypress:install": "cypress install",
+    "e2e:local": "start-server-and-test start-test-server http://localhost:8082 cypress:local",
+    "e2e:ci": "npm-run-all --parallel --race start:ci 'cypress:ci --config baseUrl=http://localhost:8082'",
+    "start:ci": "webpack-dev-server --config ./webpack.config.js --port 8082 --mode production",
+    "now-build": "yarn build"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "dotenv-webpack": "^1.7.0",
+    "global": "^4.3.2",
+    "izitoast": "^1.4.0",
+    "moment-timezone": "^0.5.23",
+    "moment-with-locales-es6": "^1.0.1",
+    "query-string": "^6.2.0",
+    "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",
+    "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
+    "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",
+    "url": "^0.11.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "7",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "coveralls": "^3.0.2",
+    "css-loader": "^2.0.1",
+    "cypress": "^3.1.5",
+    "cypress-cucumber-preprocessor": "^1.9.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "eslint-plugin-react-hooks": "^1.0.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.6.0",
+    "jest-transform-css": "^2.0.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "moxios": "^0.4.0",
+    "node-sass": "^4.11.0",
+    "npm-run-all": "^4.1.5",
+    "redux-mock-store": "^1.5.3",
+    "regenerator-runtime": "^0.13.1",
+    "sass-loader": "^7.1.0",
+    "standard": "^12.0.1",
+    "start-server-and-test": "^1.7.11",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "src/assets/*"
+    ],
+    "env": [
+      "jest"
+    ],
+    "globals": [
+      "cy"
+    ]
+  }
+}

src/actions/getEventInfoAction.js~

@@ -0,0 +1,31 @@
+import axios from 'axios'
+import { GET_PROJECT_INFO } from '../types'
+
+export let fetchEventInfo = slug => dispatch => {
+  return axios
+    .get(`/api/v1/events/${slug}`)
+    .then(response => {
+      let {
+        event,
+        videos,
+        creator,
+        creatorGravatarUrl,
+        createdAt,
+        modifier,
+        modifierGravatarUrl,
+        updatedAt,
+        nextScheduledEvent
+      } = response.data
+      event.videos = videos
+      event.creator = creator
+      event.creatorGravatarUrl = creatorGravatarUrl
+      event.modifier = modifier
+      event.modifierGravatarUrl = modifierGravatarUrl
+      event.createdAt = createdAt
+      event.updatedAt = updatedAt
+      event.nextScheduledEvent = nextScheduledEvent
+
+      dispatch({ type: GET_EVENT_INFO, payload: event })
+    })
+}
+

src/actions/userSearchResultAction.js

@@ -0,0 +1,15 @@
+import { SELECTED_LANGUAGE, FILTERED_PROJECTS_STATE } from '../types'
+
+export let selectedLanguageAction = selectedLanguage => {
+  return {
+    type: SELECTED_LANGUAGE,
+    payload: selectedLanguage
+  }
+}
+
+export let filteredProjectsAction = props => {
+  return {
+    type: FILTERED_PROJECTS_STATE,
+    payload: props
+  }
+}

src/components/EventSummary.js~

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react'
+import { Header, Segment, Grid, Image, Icon } from 'semantic-ui-react'
+import CustomRingLoader from './CustomRingLoader'
+import Videos from './Videos'
+import ReactHtmlParser from 'react-html-parser'
+import moment from 'moment-timezone'
+
+const EventSummary = props => {
+  let { event } = props
+  if (event) {
+    let startTime = moment(event.start_datetime)
+    let endTime = startTime.clone().add(Number(event.duration), 'minutes')
+    let timeRange = `${startTime.format('HH:mm')} - ${endTime.format('HH:mm')}  ${moment.tz.guess()}`
+    return (
+      <Fragment>
+        <Grid columns={2} stackable>
+          <Grid.Column width={12}>
+            <Segment vertical>
+              <Header as='h2'>{event.name}</Header>
+            </Segment>
+            <Segment padded='very' vertical>
+              <Header as='h5'>{ReactHtmlParser(event.description)}</Header>
+            </Segment>
+            <Segment padded='very' vertical>
+              <p>Event type: {event.category}</p>
+              <p>Event for: {event.for}</p>
+            </Segment>
+            <Segment padded='very' vertical>
+              <Grid columns={2} stackable>
+                <Grid.Column width={8}>
+                  {event.nextScheduledEvent
+                    ? <Fragment>
+                      <Header as='h5'>Next scheduled event:</Header>
+                      <Icon name='calendar plus outline' size='large' />
+                      {moment(event.nextScheduledEvent.time).format('MMMM Do YYYY')}
+                      <br />
+                      <br />
+                    </Fragment>
+                    : null}
+                  <Icon name='clock outline' size='large' />
+                  {timeRange}
+                </Grid.Column>
+                <Grid.Column width={8}>
+                  <Grid columns={2} stackable>
+                    <Grid.Column>
+                      <Image src={event.creatorGravatarUrl} circular />
+                      <p>created by:</p>
+                      <p>{event.creator}</p>
+                    </Grid.Column>
+                    <Grid.Column>
+                      {event.modifier
+                        ? (
+                          <Fragment>
+                            <Image src={event.modifierGravatarUrl} circular />
+                            <p>updated by:</p>
+                            <p>{event.modifier}</p>
+                          </Fragment>
+                        ) : null}
+                    </Grid.Column>
+                  </Grid>
+                </Grid.Column>
+              </Grid>
+            </Segment>
+          </Grid.Column>
+          <Videos name={event} id='event-info-videos' />
+        </Grid>
+      </Fragment>
+    )
+  } else {
+    return <CustomRingLoader />
+  }
+}
+
+export default EventSummary

src/components/Navbar.js

@@ -4,29 +4,26 @@ import { Link } from 'react-router-dom'
 import { withRouter } from 'react-router'
 import logo from '../images/av-logo.svg'
 import queryString from 'query-string'
-
 import '../assets/Navbar.css'
 
 export class Navbar extends Component {
-  state = { showHamburgerMenu: false, isLoggedIn: false }
-
-  componentDidMount () {
-    const parsed = queryString.parse(this.props.location.search)
-    if (parsed.token) {
-      this.props.cookies.set(process.env.SESSION || 'WebsiteOne_session', parsed.token, {
-        path: '/'
-      })
-      this.setState({ isLoggedIn: true })
+    state = { showHamburgerMenu: false, isLoggedIn: false }
+    componentDidMount () {
+      const parsed = queryString.parse(this.props.location.search)
+      if (parsed.token) {
+        this.props.cookies.set(process.env.SESSION || 'WebsiteOne_session', parsed.token, {
+          path: '/'
+        })
+        this.setState({ isLoggedIn: true })
+      }
     }
-  }
-
-  currentPath () {
+    currentPath () {
     // this.props.location.split("/") returns ["", ""] when on homepage
     // and ["", "users", "123"] when on /users/123
     // This function is used to highlight the nav link
-    const pathArray = this.props.location.pathname.split('/')
-    return pathArray[1]
-  }
+      const pathArray = this.props.location.pathname.split('/')
+      return pathArray[1]
+    }
 
   handleRemoveCookies = () => {
     this.setState({ isLoggedIn: false })
@@ -74,7 +71,6 @@ export class Navbar extends Component {
             <Menu.Item name='events' active={activeItem === 'events'}>
               <Link to='/events'>Events</Link>
             </Menu.Item>
-
             <Menu.Item
               name='getting-started'
               active={activeItem === 'getting-started'}

src/containers/EventInfo.js~

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { fetchEventInfo } from '../actions/getEventInfoAction'
+import { setLastLocation } from '../actions/setLastLocationAction'
+import { Container } from 'semantic-ui-react'
+import EventSummary from '../components/EventSummary'
+
+export class EventInfo extends Component {
+  state = { event: null };
+
+  componentDidMount () {
+    const eventSlug = this.props.match.params.slug
+    this.props.setLastLocation(this.props.location.pathname)
+    if (this.props.event.slug === this.props.match.params.slug) {
+      this.setState({ event: this.props.event })
+    } else {
+      this.props.fetchEventInfo(eventSlug)
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.props.event !== nextProps.event) {
+      this.setState({ event: nextProps.event })
+    }
+  }
+
+  render () {
+    let { event } = this.state
+    return (
+      <Container className='event-info-container'>
+        <EventSummary event={event} />
+      </Container>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  events: state.event,
+  event: state.eventInfo
+})
+export default connect(
+  mapStateToProps,
+  { fetchEventInfo, setLastLocation }
+)(EventInfo)