Import ics file #69

src/components/settings/AddDeleteSetting.js

@@ -115,7 +115,7 @@ class AddDeleteSetting extends Component {
     const showDelete = d.name !== 'default' || d.type !== 'private'
     return (
       <div key={i} className="d-inline-block">
-        <div style={{ display: 'inline-block', width: '80%' }}>
+        <div style={{ display: 'inline-block' }}>
           {ItemRenderer && (
             <ItemRenderer
               item={d}
@@ -147,7 +147,7 @@ class AddDeleteSetting extends Component {
     } = this.state
     return (
       <div className="settings">
-        <Panel style={{ width: '80%' }}>
+        <Panel style={{}}>
           <Panel.Heading>{addTitle}</Panel.Heading>
           <Panel.Body>
             {renderAdd()}
@@ -162,7 +162,7 @@ class AddDeleteSetting extends Component {
           </Panel.Body>
         </Panel>
 
-        <Panel style={{ width: '80%' }}>
+        <Panel style={{}}>
           <Panel.Heading>{listTitle}</Panel.Heading>
           <Panel.Body>
             <div>

src/components/settings/Calendars.js

@@ -162,7 +162,23 @@ export default class Calendars extends AddDeleteSetting {
   }
 
   handleSelect = (eventKey, event) => {
-    this.setState({ valueOfAdd: this.state.menuItems[eventKey] })
+    const { verifyNewCalendar } = this.props
+    const { addValueToItem } = this.state
+
+    this.setState({
+      hexColor: guaranteeHexColor(null),
+    })
+
+    addValueToItem(this.state.menuItems[eventKey], ({ item, error }) => {
+      if (error) {
+        this.setState({
+          valueOfAdd: this.state.menuItems[eventKey],
+          errorOfAdd: (error || '').toString(),
+        })
+      } else {
+        verifyNewCalendar(item)
+      }
+    })
   }
 
   renderOrSeparator = () => (
@@ -203,14 +219,55 @@ export default class Calendars extends AddDeleteSetting {
     this.setState({ hexColor })
   }
 
+  handleFileInputChange = event => {
+    const { verifyNewCalendar } = this.props
+
+    console.log('selected files', event.target.files[0])
+    if (event.target.files[0]) {
+      let file = event.target.files[0]
+
+      let fileReader = new FileReader()
+      fileReader.onloadend = e => {
+        console.log('read file complete')
+
+        let calendar = {
+          uid: uuid(),
+          type: 'ics-raw',
+          name: this.state.calendarName,
+          hexColor: this.state.hexColor,
+          mode: '',
+          data: {
+            events: fileReader.result,
+          },
+        }
+
+        verifyNewCalendar(calendar)
+      }
+
+      fileReader.readAsText(file)
+    }
+  }
+
+  handleAddCalendarClick = event => {
+    const { verifiedNewCalendarData, addItem } = this.props
+
+    if (verifiedNewCalendarData.status === 'ok') {
+      let calendar = Object.assign({}, verifiedNewCalendarData.calendar)
+      calendar.name = this.state.calendarName
+      calendar.hexColor = this.state.hexColor
+
+      addItem(calendar)
+    }
+  }
+
   render() {
     const {
       items: itemList,
       user,
       calendars,
       verifiedNewCalendarData,
     } = this.props
-    const { renderItem, onAddItem } = this.bound
+    const { renderItem } = this.bound
     const {
       valueOfAdd,
       addTitle,
@@ -219,9 +276,14 @@ export default class Calendars extends AddDeleteSetting {
       errorOfAdd,
     } = this.state
 
+    const canAddCalendar =
+      verifiedNewCalendarData.status === 'ok' &&
+      this.state.calendarName != null &&
+      this.state.calendarName.trim() !== ''
+
     return (
       <div className="settings">
-        <Panel style={{ width: '80%' }}>
+        <Panel style={{}}>
           <Panel.Heading>{addTitle}</Panel.Heading>
           <Panel.Body>
             <Row>
@@ -235,10 +297,27 @@ export default class Calendars extends AddDeleteSetting {
                     Verify
                   </Button>
                 </Row>
+                {verifiedNewCalendarData.status === 'error' && (
+                  <Row style={{ padding: '5px' }}>
+                    <Col sm={12} style={{ textAlign: 'center' }}>
+                      <Alert style={{ marginBottom: '0px' }} bsStyle="danger">
+                        Failed to verify calendar
+                      </Alert>
+                    </Col>
+                  </Row>
+                )}
                 {this.renderOrSeparator()}
                 <Row style={{ padding: '5px' }}>
                   <Col sm={12} style={{ textAlign: 'center' }}>
-                    <Button disabled>Upload file...</Button>
+                    <label>
+                      Upload .ics calendar file:
+                      <br />
+                      <input
+                        id="fileInputIcs"
+                        type="file"
+                        onChange={this.handleFileInputChange}
+                      />
+                    </label>
                   </Col>
                 </Row>
                 {this.renderOrSeparator()}
@@ -303,10 +382,8 @@ export default class Calendars extends AddDeleteSetting {
                 <Row style={{ padding: '5px' }}>
                   <Col sm={12} style={{ textAlign: 'center' }}>
                     <Button
-                      onClick={onAddItem}
-                      disabled={
-                        !valueOfAdd || verifiedNewCalendarData.status !== 'ok'
-                      }
+                      onClick={this.handleAddCalendarClick}
+                      disabled={!canAddCalendar}
                       style={{ margin: 8 }}
                     >
                       Add Calendar
@@ -319,7 +396,7 @@ export default class Calendars extends AddDeleteSetting {
           </Panel.Body>
         </Panel>
 
-        <Panel style={{ width: '80%' }}>
+        <Panel style={{}}>
           <Panel.Heading>{listTitle}</Panel.Heading>
           <Panel.Body>
             <div>

src/components/settings/Settings.js

@@ -8,8 +8,12 @@ class SettingsPage extends Component {
   render() {
     const { CalendarsContent, ContactsContent, handleHide } = this.props
     return (
-      <div className="text-left" style={{ marginLeft: 100 }}>
+      <div
+        className="bodyContainer"
+        style={{ textAlign: 'left', marginTop: '10px' }}
+      >
         <h4>Settings</h4>
+
         {CalendarsContent}
         {ContactsContent}
         <Button onClick={handleHide}>Done</Button>

src/flow/io/event.js

@@ -310,8 +310,12 @@ export function importCalendarEvents(calendar, user, defaultEvents) {
   const { type, data, name } = calendar || {}
   let fn = () => {}
   let config
+
   if (type === 'ics') {
     fn = fetchAndParseIcal
+  } else if (type === 'ics-raw') {
+    fn = fetchFromIcsRaw
+    config = { events: data.events }
   } else if (type === 'blockstack-user') {
     config = { decrypt: false, username: data.user }
     fn = fetchFromBlockstack
@@ -363,6 +367,10 @@ function fetchAndParseIcal(src) {
     .then(iCalParseEvents)
 }
 
+function fetchFromIcsRaw(src, config) {
+  return Promise.resolve(iCalParseEvents(config.events))
+}
+
 export function handleIntentsInQueryString(
   query,
   convertEvent,

src/flow/io/ical.js

@@ -17,6 +17,7 @@ export function iCalParseEvents(icsContent, formatEvent) {
   try {
     var jCal = parse(icsContent)
     var comp = new Component(jCal)
+    console.log('comp', comp)
     var vevents = comp.getAllSubcomponents('vevent')
     return vevents.map(eventFromIcal)
   } catch (e) {

src/flow/store/event/eventActionLazy.js

@@ -441,15 +441,11 @@ export function verifyNewCalendar(calendar) {
 
     importCalendarEvents(calendar, defaultEvents).then(
       events => {
-        const calendarEvents = {
-          name: calendar.name,
-          events,
-        }
-        console.log('import ok', calendarEvents)
+        console.log('import ok')
         dispatch(
           setCalendarVerificationStatus({
             status: 'ok',
-            calendarEvents,
+            calendar,
             eventsCount: Object.keys(events).length,
           })
         )

src/flow/store/event/eventReducer.js

@@ -236,17 +236,6 @@ export default function reduce(state = initialState, action = {}) {
         ...state,
         verifiedNewCalendarData: payload,
       }
-      if (
-        payload.calendar &&
-        payload.calendar.data &&
-        payload.calendar.data.src
-      ) {
-        newState['showSettingsAddCalendarUrl'] = payload.calendar.data.src
-      }
-
-      if (payload.clearShowSettingsAddCalendarUrl) {
-        newState['showSettingsAddCalendarUrl'] = null
-      }
       break
     default:
       newState = state