Display the event header

packages/client-app/internal_packages/events/lib/event-header.cjsx

@@ -1,7 +1,9 @@
+
 _ = require 'underscore'
 path = require 'path'
 React = require 'react'
 {RetinaImg} = require 'nylas-component-kit'
+icsParser = require './ics-parser'
 {Actions,
  DateUtils,
  Message,
@@ -19,47 +21,61 @@ class EventHeader extends React.Component
     message: React.PropTypes.instanceOf(Message).isRequired
 
   constructor: (@props) ->
+    if this.props.message.events.length > 12
+      eventContent = icsParser.convert( @props.message.events );
+    else 
+      return null;
     @state =
-      event: @props.message.events[0]
+      event: eventContent
+
+    @isEventValid = typeof eventContent == "object";
+    calendarObj = @state.event.VCALENDAR[0];
+
+    @eventDetails = {
+      "title": calendarObj.VEVENT.SUMMARY,
+      "start_time": moment(calendarObj.VEVENT.DTSTART + calendarObj.VTIMEZONE.DAYLIGHT.TZOFFSETTO).tz(DateUtils.timeZone),
+      "end_time": moment(calendarObj.VEVENT.DTEND + calendarObj.VTIMEZONE.DAYLIGHT.TZOFFSETTO).tz(DateUtils.timeZone),
+      "location": calendarObj.VEVENT.LOCATION,
+      "description": calendarObj.VEVENT.DESCRIPTION,
+      "status": calendarObj.VEVENT.STATUS
+    }
 
   _onChange: =>
-    return unless @state.event
-    DatabaseStore.find(Event, @state.event.id).then (event) =>
-      return unless event
-      @setState({event})
+    # TODO
+    return
 
   componentDidMount: =>
     # TODO: This should use observables!
-    @_unlisten = DatabaseStore.listen (change) =>
-      if @state.event and change.objectClass is Event.name
-        updated = _.find change.objects, (o) => o.id is @state.event.id
-        @setState({event: updated}) if updated
-    @_onChange()
+    return
 
   componentWillReceiveProps: (nextProps) =>
-    @setState({event:nextProps.message.events[0]})
-    @_onChange()
+    # TODO
+    return
 
   componentWillUnmount: =>
-    @_unlisten?()
+    #TODO
+    return
 
   render: =>
     timeFormat = DateUtils.getTimeFormat({timeZone: true})
-    if @state.event?
+    if @isEventValid?
       <div className="event-wrapper">
         <div className="event-header">
           <RetinaImg name="[email protected]"
                      mode={RetinaImg.Mode.ContentPreserve}/>
-          <span className="event-title-text">Event: </span><span className="event-title">{@state.event.title}</span>
+          <span className="event-title-text">Event: </span><span className="event-title">{@eventDetails.title}</span>
         </div>
         <div className="event-body">
           <div className="event-date">
             <div className="event-day">
-              {moment(@state.event.start*1000).tz(DateUtils.timeZone).format("dddd, MMMM Do")}
+              {@eventDetails.start_time.format("dddd, MMMM Do")}
             </div>
             <div>
               <div className="event-time">
-                {moment(@state.event.start*1000).tz(DateUtils.timeZone).format(timeFormat)}
+                {@eventDetails.start_time.format("h:mm a") + " - " + @eventDetails.end_time.format("h:mm a")}
+              </div>
+              <div className="event-description">
+                {@eventDetails.description}
               </div>
               {@_renderEventActions()}
             </div>
@@ -70,23 +86,11 @@ class EventHeader extends React.Component
       <div></div>
 
   _renderEventActions: =>
-    me = @state.event.participantForMe()
-    return false unless me
-
-    actions = [["yes", "Accept"], ["maybe", "Maybe"], ["no", "Decline"]]
-
-    <div className="event-actions">
-      {actions.map ([status, label]) =>
-        classes = "btn-rsvp "
-        classes += status if me.status is status
-        <div key={status} className={classes} onClick={=> @_rsvp(status)}>
-          {label}
-        </div>
-      }
-    </div>
+    # TODO Later
+    return
 
   _rsvp: (status) =>
-    me = @state.event.participantForMe()
-    Actions.queueTask(new EventRSVPTask(@state.event, me.email, status))
+    # TODO Later
+    return
 
 module.exports = EventHeader

packages/client-app/internal_packages/thread-list/lib/thread-list-columns.cjsx

@@ -92,8 +92,14 @@ c3 = new ListTabular.Column
   flex: 4
   resolver: (thread) =>
     attachment = false
+    invite = false
+
     messages = thread.__messages || []
 
+    hasInvite = thread.hasAttachments and messages.find (m) -> Utils.showIconForInvites(m.files)
+    if hasInvite
+      invite = <div className="thread-icon thread-icon-calendar"></div>
+
     hasAttachments = thread.hasAttachments and messages.find (m) -> Utils.showIconForAttachments(m.files)
     if hasAttachments
       attachment = <div className="thread-icon thread-icon-attachment"></div>
@@ -102,6 +108,7 @@ c3 = new ListTabular.Column
       <MailLabelSet thread={thread} />
       <span className="subject">{subject(thread.subject)}</span>
       <span className="snippet">{getSnippet(thread)}</span>
+      {invite}
       {attachment}
     </span>
 
@@ -142,8 +149,13 @@ cNarrow = new ListTabular.Column
   resolver: (thread) =>
     pencil = false
     attachment = false
+    invite = false
     messages = thread.__messages || []
 
+    hasInvite = thread.hasAttachments and messages.find (m) -> Utils.showIconForInvites(m.files)
+    if hasInvite
+      invite = <div className="thread-icon thread-icon-calendar"></div>
+
     hasAttachments = thread.hasAttachments and messages.find (m) -> Utils.showIconForAttachments(m.files)
     if hasAttachments
       attachment = <div className="thread-icon thread-icon-attachment"></div>
@@ -177,6 +189,7 @@ cNarrow = new ListTabular.Column
           <ThreadListParticipants thread={thread} />
           {pencil}
           <span style={flex:1}></span>
+          {invite}
           {attachment}
           <InjectedComponent
             key="thread-injected-timestamp"

packages/client-app/internal_packages/thread-list/stylesheets/thread-list.less

@@ -263,6 +263,11 @@
       margin-right:0;
       margin-left:0;
     }
+    &.thread-icon-calendar {
+      background-image:url(../static/images/thread-list/[email protected]);
+      margin-right:0;
+      margin-left:0;
+    }
     &.thread-icon-unread {
       background-image:url(../static/images/thread-list/[email protected]);
     }

packages/client-app/src/flux/models/message.es6

@@ -135,9 +135,9 @@ export default class Message extends ModelWithMetadata {
       modelKey: 'unread',
     }),
 
-    events: Attributes.Collection({
+    events: Attributes.String({
       modelKey: 'events',
-      itemClass: Event,
+    /*  itemClass: Event, */
     }),
 
     starred: Attributes.Boolean({
@@ -229,10 +229,6 @@ Message(date DESC) WHERE draft = 1`,
       json.object = 'draft'
     }
 
-    if (this.events && this.events.length) {
-      json.event_id = this.events[0].serverId
-    }
-
     return json
   }
 

packages/client-app/src/flux/models/utils.coffee

@@ -27,6 +27,10 @@ Utils =
     return false unless files instanceof Array
     return files.find (f) -> !f.contentId or f.size > 12 * 1024
 
+  showIconForInvites: (files) ->
+    return false unless files instanceof Array
+    return files.find (f) -> `f.contentType == "text/calendar"`;
+
   extractTextFromHtml: (html, {maxLength} = {}) ->
     if (html ? "").trim().length is 0 then return ""
     if maxLength and html.length > maxLength

packages/client-sync/src/local-sync-worker/sync-tasks/fetch-messages-in-folder.imap.es6

@@ -158,7 +158,7 @@ class FetchMessagesInFolderIMAP extends SyncTask {
     const desired = [];
     const available = [];
     const unseen = [struct];
-    const desiredTypes = new Set(['text/plain', 'text/html']);
+    const desiredTypes = new Set(['text/plain', 'text/html', 'text/calendar']);
     // MIME structures can be REALLY FREAKING COMPLICATED. To simplify
     // processing, we flatten the MIME structure by walking it depth-first,
     // throwing away all multipart headers with the exception of
@@ -177,6 +177,12 @@ class FetchMessagesInFolderIMAP extends SyncTask {
         part.shift();
         const alternativeParts = this._getDesiredMIMEParts(part);
         if (alternativeParts.length > 0) {
+          // We need the ICS body to capture the invite information
+          alternativeParts.forEach( function(alternativePart) {
+            if( alternativePart.mimeType == 'text/calendar') {
+              desired.push(alternativePart);  
+            }
+          });
           // With reference to RFC2046, we keep only the last supported part.
           desired.push(alternativeParts[alternativeParts.length - 1]);
         }

packages/client-sync/src/models/message.js

@@ -42,6 +42,7 @@ module.exports = (sequelize, Sequelize) => {
         }));
       },
     },
+    events: Sequelize.TEXT,
     subject: Sequelize.STRING(500),
     snippet: Sequelize.STRING(255),
     date: Sequelize.DATE,

packages/isomorphic-core/src/message-utils.es6

@@ -171,7 +171,9 @@ function bodyFromParts(imapMessage, desiredParts) {
     //
     // This may seem kind of weird, but some MUAs _do_ send out whack stuff
     // like an HTML body followed by a plaintext footer.
-    if (mimeType === 'text/plain') {
+    if ( mimeType === 'text/calendar' ) {
+
+    } else if (mimeType === 'text/plain') {
       body += htmlifyPlaintext(decoded);
     } else {
       body += decoded;
@@ -184,6 +186,26 @@ function bodyFromParts(imapMessage, desiredParts) {
   return body;
 }
 
+// Parse events from text/calendar part of the email
+function parseEvents(imapMessage, desiredParts) {
+  let body = '';
+  for (const {id, mimeType, transferEncoding, charset} of desiredParts) {
+    let decoded = '';
+    if ((/quot(ed)?[-/]print(ed|able)?/gi).test(transferEncoding)) {
+      decoded = mimelib.decodeQuotedPrintable(imapMessage.parts[id], charset);
+    } else if ((/base64/gi).test(transferEncoding)) {
+      decoded = mimelib.decodeBase64(imapMessage.parts[id], charset);
+    } else {
+      decoded = encoding.convert(imapMessage.parts[id], 'utf-8', charset).toString('utf-8');
+    }
+
+    if ( mimeType === 'text/calendar' && (/base64/gi).test(transferEncoding) ) {
+      body += decoded;
+    }
+  }
+  return body;
+}
+
 // Since we only fetch the MIME structure and specific desired MIME parts from
 // IMAP, we unfortunately can't use an existing library like mailparser to parse
 // the message, and have to do fun stuff like deal with character sets and
@@ -210,6 +232,7 @@ async function parseFromImap(imapMessage, desiredParts, {db, accountId, folder})
     replyTo: parseContacts(parsedHeaders['reply-to']),
     accountId: accountId,
     body: bodyFromParts(imapMessage, desiredParts),
+    events: parseEvents(imapMessage, desiredParts),
     snippet: null,
     unread: !attributes.flags.includes('\\Seen'),
     starred: attributes.flags.includes('\\Flagged'),

packages/isomorphic-core/src/migrations/20171017123924-alter-messages-add-events.js

@@ -0,0 +1,10 @@
+/* eslint no-unused-vars: 0 */
+
+module.exports = {
+  up: function up(queryInterface, Sequelize) {
+    return Sequelize.query("ALTER TABLE messages ADD events TEXT;");
+  },
+  down: function down(queryInterface, Sequelize) {
+    return true;
+  },
+};