Merge pull request #16 from jasonleibowitz/luxon

Luxon Docs, Versatile Duration & More Testing

Author: jasonleibowitz

README.md

@@ -52,7 +52,7 @@ All of these properties are required.
 | Prop         | Type          | Description |
 |--------------|---------------|-------------|
 |description   |string  |Description of event. Put in the notes or body section of event.                                                                                 |
-|duration      |string  |Duration of event in hours. Must be four digits, e.g. `0200` or `0130`. This is only used for Yahoo.                                                                     |
+|duration      |string or number  |Duration of event in hours. If string, must be four digits, e.g. `'0200'` or `'0130'`. If number, must represent hours in decimal form, i.e. `2` or `2.15`. This is only used for Yahoo.                                                                     |
 |endDatetime   |string  |End date time of event. Must be formatted in `YYYYMMDDTHHmmssZ` format or `YYYYMMDDTHHmmss` if timezone is also provided. Use any date lib you want, but the format must match this.               |
 |location      |string  |Location of event. Use an address for best specificity and for Google Maps to populate a Map. Sometimes a location name will also populate a map. |
 |startDatetime |string  |Start date time of event. Must be formatted in `YYYYMMDDTHHmmssZ` format or `YYYYMMDDTHHmmss` if timezone is also provided. Use any date lib you want, but the format must match this.             |

lib/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildShareUrl = exports.isInternetExplorer = exports.isMobile = exports.formatDate = void 0;
+exports.buildShareUrl = exports.isInternetExplorer = exports.isMobile = exports.formatDuration = exports.formatDate = void 0;
 
 var _enums = require("./enums");
 
@@ -16,13 +16,28 @@ var _enums = require("./enums");
 var formatDate = function formatDate(date) {
   return date && date.replace('+00:00', 'Z');
 };
+
+exports.formatDate = formatDate;
+
+var formatDuration = function formatDuration(duration) {
+  if (typeof duration === 'string') return duration;
+  var parts = duration.toString().split('.');
+
+  if (parts.length < 2) {
+    parts.push('00');
+  }
+
+  return parts.map(function (part) {
+    return part.length === 2 ? part : "0".concat(part);
+  }).join('');
+};
 /**
  * Tests provided UserAgent against Known Mobile User Agents
  * @returns {bool} isMobileDevice
  */
 
 
-exports.formatDate = formatDate;
+exports.formatDuration = formatDuration;
 
 var isMobile = function isMobile() {
   return /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(window.navigator.userAgent || window.navigator.vendor || window.opera);
@@ -58,7 +73,7 @@ var googleShareUrl = function googleShareUrl(_ref) {
       startDatetime = _ref.startDatetime,
       timezone = _ref.timezone,
       title = _ref.title;
-  return "https://calendar.google.com/calendar/render?action=TEMPLATE&dates=".concat(startDatetime, "/").concat(endDatetime, "&ctz=").concat(timezone, "&location=").concat(location, "&text=").concat(title, "&details=").concat(description);
+  return "https://calendar.google.com/calendar/render?action=TEMPLATE&dates=".concat(startDatetime, "/").concat(endDatetime).concat(timezone && "&ctz=".concat(timezone), "&location=").concat(location, "&text=").concat(title, "&details=").concat(description);
 };
 /**
  * Takes an event object and returns a Yahoo Calendar Event URL
@@ -136,7 +151,7 @@ var buildShareUrl = function buildShareUrl(_ref4, type) {
   var encodeURI = type !== _enums.SHARE_SITES.ICAL && type !== _enums.SHARE_SITES.OUTLOOK;
   var data = {
     description: encodeURI ? encodeURIComponent(description) : description,
-    duration: duration,
+    duration: formatDuration(duration),
     endDatetime: formatDate(endDatetime),
     location: encodeURI ? encodeURIComponent(location) : location,
     startDatetime: formatDate(startDatetime),

package.json

@@ -39,6 +39,7 @@
     "emotion": "^9.1.3",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.1.0",
+    "luxon": "^1.4.4",
     "moment-timezone": "^0.5.21",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",

src/docs/index.jsx

@@ -5,10 +5,11 @@ import React from "react";
 import { render } from "react-dom";
 import AddToCalendarHOC, { SHARE_SITES } from "../../lib";
 import Button from './Button';
-import Dropdown from './Dropdown';
 import CalendarModal from './Modal';
-import moment from 'moment-timezone';
 import CodeSnippet from './CodeSnippet';
+import Dropdown from './Dropdown';
+import { DateTime } from 'luxon';
+import moment from 'moment-timezone';
 import { css } from 'emotion';
 import "./styles.css";
 
@@ -68,9 +69,10 @@ const paragraphStyles = css`
 
 const startDatetime = moment().utc().add(2, 'days');
 const endDatetime = startDatetime.clone().add(2, 'hours');
+const duration = endDatetime.diff(startDatetime, 'hours');
 const event = {
   description: 'Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.',
-  duration: '0200',
+  duration,
   endDatetime: endDatetime.format('YYYYMMDDTHHmmssZ'),
   location: 'NYC',
   startDatetime: startDatetime.format('YYYYMMDDTHHmmssZ'),
@@ -85,6 +87,16 @@ const eventInDifferentTimezone = {
   timezone: 'Europe/London',
 }
 
+const luxonStart = DateTime.fromObject({ year: 2018, month: 10, day: 24, hour: 12, minute: 15, zone: 'America/New_York' });
+const luxonEnd = DateTime.fromObject({ year: 2018, month: 10, day: 24, hour: 14, minute: 15, zone: 'America/New_York' });
+const luxonEvent = {
+  ...event,
+  startDatetime: `${luxonStart.toFormat('yyyyLLdd')}T${luxonStart.toFormat('HHmmss')}`,
+  endDatetime: `${luxonEnd.toFormat('yyyyLLdd')}T${luxonEnd.toFormat('HHmmss')}`,
+  location: 'NYC',
+  timezone: 'America/New_York',
+}
+
 const AddToCalendarDropdown = AddToCalendarHOC(Button, Dropdown);
 const AddToCalendarModal = AddToCalendarHOC(Button, CalendarModal);
 const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
@@ -101,7 +113,7 @@ function Demo() {
           {`
   const startDatetime = moment().utc().add(2, 'days');
   const endDatetime = startDatetime.clone().add(2, 'hours');
-  const duration = endDatetime.diff(startDatetime, 'hours');
+  const duration = moment.duration(endDatetime.diff(startDatetime)).asHours();
   const event = {
     description: 'Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.',
     duration,
@@ -253,6 +265,43 @@ function Demo() {
     timezone: 'Europe/London',
   }
   ...
+  <AddToCalendarModal
+    className={componentStyles}
+    linkProps={{
+      className: linkStyles,
+    }}
+    event={eventInDifferentTimezone}
+  />
+      `}
+      </CodeSnippet>
+
+          <h2 className={subTitleStyles}>Use Moment Alternative</h2>
+      <p className={paragraphStyles}>Moment is known to be a MASSIVE library. v2.22.2 is 64.2kb minified + gzipped and moment-timezone v0.5.21 is 89.8kb minified + gzipped. There are plenty of other date time libraries for JS that are way smaller. Using one of these helps you avoid overly bloating your application and sending too many vendor files to the client. One great option is Luxon. Luxon v.1.4.4 is 16.9kb minified + gzipped.</p>
+      <p className={paragraphStyles}>This example shows how to use the Luxon library (instead of Moment) to construct <span className={highlightText}>startDatetime</span> and <span className={highlightText}>endDatetime</span></p>
+      <AddToCalendarModal
+        className={componentStyles}
+        linkProps={{
+          className: linkStyles,
+        }}
+        event={luxonEvent}
+      />
+      <CodeSnippet>
+      {`
+  const AddToCalendarModal = AddToCalendarHOC(Button, CalendarModal);
+  const startTime = DateTime.fromObject({ year: 2018, month: 10, day, 25, hour: 12 });
+  const endTime = startTime.plus({ hours: 2 });
+  const duration = endDatetime.diff(startDatetime).as('hours');
+  const eventInDifferentTimezone = {
+    ...event,
+    description: 'Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.',
+    duration,
+    endDatetime: endTime.toFormat('YYYYMMDDTHHmmss'),
+    location: 'London',
+    startDatetime: startTime.toFormat('YYYYMMDDTHHmmss'),
+    timezone: 'Europe/London',
+    title: 'Super Fun Event',
+  }
+  ...
   <AddToCalendarModal
     className={componentStyles}
     linkProps={{

src/lib/utils.js

@@ -9,6 +9,16 @@ import { SHARE_SITES } from './enums';
  */
 export const formatDate = date => date && date.replace('+00:00', 'Z');
 
+export const formatDuration = duration => {
+  if (typeof duration === 'string') return duration;
+  const parts = duration.toString().split('.');
+  if (parts.length < 2) {
+    parts.push('00');
+  }
+
+  return parts.map(part => part.length === 2 ? part : `0${part}`).join('');
+};
+
 /**
  * Tests provided UserAgent against Known Mobile User Agents
  * @returns {bool} isMobileDevice
@@ -40,7 +50,7 @@ const googleShareUrl = ({
 }) =>
   `https://calendar.google.com/calendar/render?action=TEMPLATE&dates=${
     startDatetime
-  }/${endDatetime}&ctz=${timezone}&location=${location}&text=${title}&details=${description}`;
+  }/${endDatetime}${timezone && `&ctz=${timezone}`}&location=${location}&text=${title}&details=${description}`;
 
 /**
  * Takes an event object and returns a Yahoo Calendar Event URL
@@ -119,7 +129,7 @@ export const buildShareUrl = (
 
   const data = {
     description: encodeURI ? encodeURIComponent(description) : description,
-    duration,
+    duration: formatDuration(duration),
     endDatetime: formatDate(endDatetime),
     location: encodeURI ? encodeURIComponent(location) : location,
     startDatetime: formatDate(startDatetime),

src/lib/utils.test.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { SHARE_SITES } from './enums';
-import { buildShareUrl, formatDate, padString } from './utils';
+import { buildShareUrl, formatDate, formatDuration, isInternetExplorer, isMobile } from './utils';
 
 const testEvent = {
   description: 'Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.',
@@ -11,34 +11,143 @@ const testEvent = {
   title: 'Super Fun Event',
 }
 
+const expectedOutputs = {
+  google: 'https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20150126T000000Z/20150126T020000Z&location=NYC&text=Super%20Fun%20Event&details=Description%20of%20event.%20Going%20to%20have%20a%20lot%20of%20fun%20doing%20things%20that%20we%20scheduled%20ahead%20of%20time.',
+  yahoo: 'https://calendar.yahoo.com/?v=60&view=d&type=20&title=Super%20Fun%20Event&st=20150126T000000Z&dur=0200&desc=Description%20of%20event.%20Going%20to%20have%20a%20lot%20of%20fun%20doing%20things%20that%20we%20scheduled%20ahead%20of%20time.&in_loc=NYC',
+  ics: 'BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nURL:about:blank\nMETHOD:PUBLISH\nDTSTART:20150126T000000Z\nDTEND:20150126T020000Z\nSUMMARY:Super Fun Event\nDESCRIPTION:Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.\nLOCATION:NYC\nEND:VEVENT\nEND:VCALENDAR',
+  icsMobile: 'data:text/calendar;charset=utf8,BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nURL:about:blank\nMETHOD:PUBLISH\nDTSTART:20150126T000000Z\nDTEND:20150126T020000Z\nSUMMARY:Super Fun Event\nDESCRIPTION:Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.\nLOCATION:NYC\nEND:VEVENT\nEND:VCALENDAR',
+}
+
 describe('formatDate', () => {
   it('replaces +00:00 from a date string with Z', () => {
     expect(formatDate('20180603T172721+00:00')).toEqual('20180603T172721Z');
   });
 });
 
+describe('formatDuration', () => {
+  it ('converts number 2 to string 0200', () => {
+    expect(formatDuration(2)).toEqual('0200');
+  });
+
+  it('converts number 2.25 to 0225', () => {
+    expect(formatDuration(2.25)).toEqual('0225');
+  });
+
+  it('returns string 0200 as it was received', () => {
+    expect(formatDuration('0200')).toEqual('0200');
+  });
+});
+
 describe('buildShareUrl', () => {
-  it('returns a proper Google share URL', () => {
-    const result = buildShareUrl(testEvent, SHARE_SITES.GOOGLE);
-    expect(result).toEqual('https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20150126T000000Z/20150126T020000Z&location=NYC&text=Super%20Fun%20Event&details=Description%20of%20event.%20Going%20to%20have%20a%20lot%20of%20fun%20doing%20things%20that%20we%20scheduled%20ahead%20of%20time.');
+  describe('Google', () => {
+    it('returns a proper Google share URL', () => {
+      const result = buildShareUrl(testEvent, SHARE_SITES.GOOGLE);
+      expect(result).toEqual(expectedOutputs.google);
+    });
   });
 
-  it('returns a proper Yahoo share URL', () => {
-    const result = buildShareUrl(testEvent, SHARE_SITES.YAHOO);
-    expect(result).toEqual('https://calendar.yahoo.com/?v=60&view=d&type=20&title=Super%20Fun%20Event&st=20150126T000000Z&dur=0200&desc=Description%20of%20event.%20Going%20to%20have%20a%20lot%20of%20fun%20doing%20things%20that%20we%20scheduled%20ahead%20of%20time.&in_loc=NYC')
+  describe('Yahoo', () => {
+    it('returns a proper Yahoo share URL', () => {
+      const result = buildShareUrl(testEvent, SHARE_SITES.YAHOO);
+      expect(result).toEqual(expectedOutputs.yahoo)
+    });
+
+    it('returns a proper Yahoo share URL when duration is a number', () => {
+      const result = buildShareUrl({...testEvent, duration: 2}, SHARE_SITES.YAHOO);
+      expect(result).toEqual(expectedOutputs.yahoo);
+    });
   });
 
-  it('returns a proper iCal content object', () => {
-    const result = buildShareUrl(testEvent, SHARE_SITES.ICAL);
-    expect(result).toEqual('BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nURL:about:blank\nMETHOD:PUBLISH\nDTSTART:20150126T000000Z\nDTEND:20150126T020000Z\nSUMMARY:Super Fun Event\nDESCRIPTION:Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.\nLOCATION:NYC\nEND:VEVENT\nEND:VCALENDAR');
+
+  describe('iCal', () => {
+    it('returns a proper iCal content object', () => {
+      const result = buildShareUrl(testEvent, SHARE_SITES.ICAL);
+      expect(result).toEqual(expectedOutputs.ics);
+    });
+
+    it('prepends a data URL when userAgent is mobile', () => {
+      navigator.__defineGetter__('userAgent', function(){
+        return "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1";
+      });
+
+      const result = buildShareUrl(testEvent, SHARE_SITES.ICAL);
+      expect(result).toEqual(encodeURI(expectedOutputs.icsMobile));
+    });
   });
+});
 
-  it('prepends a data URL when userAgent is mobile', () => {
+describe('isInternetExplorer', () => {
+  it('returns true is userAgent is IE 11', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko";
+    });
+
+    const result = isInternetExplorer();
+    expect(result).toBe(true);
+  });
+
+  it('returns true is userAgent is IE 10', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)";
+    });
+
+    const result = isInternetExplorer();
+    expect(result).toBe(true);
+  });
+
+  it('returns true is userAgent is IE 9', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)";
+    });
+
+    const result = isInternetExplorer();
+    expect(result).toBe(true);
+  });
+
+  it('returns false is userAgent is MS Edge', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36";
+    });
+
+    const result = isInternetExplorer();
+    expect(result).toBe(false);
+  });
+
+  it('returns false is userAgent is not IE', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36";
+    });
+
+    const result = isInternetExplorer();
+    expect(result).toBe(false);
+  });
+})
+
+describe('isMobile', () => {
+  it('returns true if userAgent is iPhone', () => {
     navigator.__defineGetter__('userAgent', function(){
       return "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1";
     });
 
-    const result = buildShareUrl(testEvent, SHARE_SITES.ICAL);
-    expect(result).toEqual(encodeURI('data:text/calendar;charset=utf8,BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nURL:about:blank\nMETHOD:PUBLISH\nDTSTART:20150126T000000Z\nDTEND:20150126T020000Z\nSUMMARY:Super Fun Event\nDESCRIPTION:Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.\nLOCATION:NYC\nEND:VEVENT\nEND:VCALENDAR'));
+    const result = isMobile();
+    expect(result).toBe(true);
   });
+
+  it('returns true if userAgent is Android', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (Linux; Android 8.0.0; SM-G965F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36";
+    });
+
+    const result = isMobile();
+    expect(result).toBe(true);
+  });
+
+  it('returns false if userAgent is desktop', () => {
+    navigator.__defineGetter__('userAgent', function(){
+      return "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36";
+    });
+
+    const result = isMobile();
+    expect(result).toBe(false);
+  })
 });

yarn.lock

@@ -6155,6 +6155,11 @@ lru-cache@^4.0.1, lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+luxon@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.4.4.tgz#36929fb9559d4119bec4a1b8bdee1516ddb63bf5"
+  integrity sha512-M21p8nbKZRLqVnQ0XAhhCo+2Z3Z6+zm9tuogDMZ2vlkFkw8AREF+d5/abn8tz1/ycu4cemNlqcQcc7HqjhrpTw==
+
 make-dir@^1.0.0, make-dir@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"