Merge pull request #247 from open-source-labs/sam/collections

import export collections, small httpController fix

Author: sam-parsons

main.js

@@ -4,16 +4,18 @@ process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
 // Import parts of electron to use
 // app - Control your application's event lifecycle
 // ipcMain - Communicate asynchronously from the main process to renderer processes
-const { app, BrowserWindow, TouchBar, ipcMain } = require('electron');
+const { app, BrowserWindow, TouchBar, ipcMain, dialog } = require('electron');
 const path = require('path');
 const url = require('url');
+const fs = require('fs');
 
 // Import Auto-Updater- Swell will update itself
 const { autoUpdater } = require('electron-updater');
 const log = require('electron-log');
 // TouchBarButtons are our nav buttons(ex: Select All, Deselect All, Open Selected, Close Selected, Clear All)
 const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
+
 // basic http cookie parser
 const cookie = require('cookie');
 // node-fetch for the fetch request
@@ -25,7 +27,6 @@ const gql = require('graphql-tag');
 const { InMemoryCache } = require('apollo-cache-inmemory');
 const { createHttpLink } = require('apollo-link-http');
 const { ApolloLink } = require('apollo-link');
-const { onError } = require("apollo-link-error");
 
 // configure logging
 autoUpdater.logger = log;
@@ -276,6 +277,94 @@ app.on('activate', () => {
   }
 });
 
+// export collection ipc
+ipcMain.on('export-collection', (event, args) => {
+  let content = JSON.stringify(args.collection);
+
+  dialog.showSaveDialog((fileName) => {
+      if (fileName === undefined){
+          console.log("You didn't save the file");
+          return;
+      }
+
+      // fileName is a string that contains the path and filename created in the save file dialog.  
+      fs.writeFile(fileName, content, (err) => {
+          if(err){
+              console.log("An error ocurred creating the file "+ err.message)
+          }
+      });
+  }); 
+})
+
+ipcMain.on('import-collection', (event, args) => {
+  dialog.showOpenDialog((fileNames) => {
+    // reusable error message options object
+    const options = {
+      type: 'error',
+      buttons: ['Okay'],
+      defaultId: 2,
+      title: 'Error',
+      message: '',
+      detail: '',
+    };
+
+    // fileNames is an array that contains all the selected
+    if(fileNames === undefined){
+        console.log("No file selected");
+        return;
+    }
+
+    // get first file path - not dynamic for multiple files
+    let filepath = fileNames[0];
+
+    // get file extension
+    const ext = path.extname(filepath);
+
+    // make sure if there is an extension that it is .txt
+    if (ext && ext !== '.txt') {
+      options.message = 'Invalid File Type';
+      options.detail = 'Please use a .txt file';
+      dialog.showMessageBox(null, options);
+      return;
+    }
+
+    fs.readFile(filepath, 'utf-8', (err, data) => {
+        if(err){
+            alert("An error ocurred reading the file :" + err.message);
+            return;
+        }
+
+        // parse data, will throw error if not parsable
+        let parsed;
+        try {
+          parsed = JSON.parse(data);
+        } catch {
+          options.message = 'Invalid File Structure';
+          options.detail = 'Please use a JSON object';
+          dialog.showMessageBox(null, options);
+          return;
+        }
+
+        if (parsed) {
+          // validate parsed data type and properties
+          if (typeof parsed !== 'object' || 
+          !parsed['id'] || 
+          !parsed['name'] || 
+          !parsed['reqResArray'] || 
+          !parsed['created_at']) {
+            options.message = 'Invalid File';
+            options.detail = 'Please try again.';
+            dialog.showMessageBox(null, options);
+            return;
+          }
+        }
+
+        // send data to chromium for state update
+        event.sender.send('add-collection', {data});
+    });
+});
+})
+
 
 // ipcMain listener that 
 ipcMain.on('http1-fetch-message', (event, arg) => {

package-lock.json

@@ -365,6 +365,9 @@
   &:hover .collection-delete-image {
 		opacity: 1;
 	}
+  &:hover .collection-export-container {
+		display: flex;
+	}
 }
 .history-text-container, .collection-text-container {
 	align-items: center;
@@ -429,6 +432,40 @@
 	opacity: 0;
 	width: 16px;
 }
+.collection-export-container {
+	display: none;
+	float: right;
+	height: 26px;
+	position: relative;
+	right: 0px;
+	top: -28px;
+	z-index: 0;
+	padding-left: 10px;
+}
+.collection-export-container button {
+	background: transparent;
+	color: rgb(216, 216, 216);
+	border: 0;
+	cursor: pointer;
+	outline: none;
+}
+.collection-import-container {
+	display: flex;
+	float: right;
+	height: 26px;
+	position: relative;
+	right: 0px;
+	top: -28px;
+	z-index: 0;
+	padding-right: 10px;
+}
+.collection-import-container button {
+	background: transparent;
+	color: rgb(216, 216, 216);
+	border: 0;
+	cursor: pointer;
+	outline: none;
+}
 .collections-container {
   min-height: 150px;
   max-height: 400px;

src/assets/style/sidebar.scss

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import * as actions from '../../actions/actions';
 import Collection from '../display/Collection.jsx'
+import collectionsController from '../../controllers/collectionsController';
 
 const mapStateToProps = store => ({
   collections: store.business.collections,
@@ -30,6 +31,9 @@ class CollectionsContainer extends Component {
     return (
       <div className={'collections-container'}>
         <h1>Collections</h1>
+        <div className="collection-import-container">
+          <button className="import-collections" onClick={collectionsController.importCollection}>Import Collection</button>
+        </div>
         {collectionComponents}
       </div>
     )

src/client/components/containers/CollectionsContainer.jsx

@@ -23,8 +23,10 @@ class Collection extends Component {
     return (
       <div className={'collection-container'}>
         <div className={'collection-text-container'} onClick={this.addCollectionToReqResContainer}>
-          <div className={'collection-name'}> {this.props.content.name}
-          </div>
+          <div className={'collection-name'}> {this.props.content.name}</div>
+        </div>
+        <div className="collection-export-container">
+          <button onClick={() => collectionsController.exportCollection(this.props.content.id)}>Export</button>
         </div>
         <div className='collection-delete-container'>
           <div className='collection-delete-fade'>

src/client/components/display/Collection.jsx

@@ -1,7 +1,14 @@
 import * as store from '../store';
 import * as actions from '../actions/actions';
 import db from '../db';
-// import uuid from 'uuid/v4';
+import { ipcRenderer } from 'electron';
+import uuid from 'uuid/v4';
+
+ipcRenderer.on('add-collection', (event, args) => {
+  console.log('here');
+      collectionsController.addCollectionToIndexedDb(JSON.parse(args.data));
+      collectionsController.getCollections();
+});
 
 const collectionsController = {
 
@@ -36,6 +43,24 @@ const collectionsController = {
         });
     });
   },
+
+  exportCollection(id) {
+    db.collections.where('id').equals(id).first(foundCollection => {
+      // change name and id of collection to satisfy uniqueness requirements of db
+      foundCollection.name = foundCollection.name + " import";
+      foundCollection.id = uuid();
+
+      ipcRenderer.send('export-collection', {collection: foundCollection});
+    })
+    .catch((error) => {
+      console.error(error.stack || error);
+      reject(error);
+    });
+  },
+
+  importCollection() {
+    ipcRenderer.send('import-collection');
+  },
 };
 
 export default collectionsController;

src/client/controllers/collectionsController.js

@@ -310,7 +310,7 @@ const httpController = {
         const heads = response.headers;
         reqResObj.response.headers = heads;
 
-          reqResObj.timeSent = Date.now();
+          reqResObj.timeReceived = Date.now();
           store.default.dispatch(actions.reqResUpdate(reqResObj));
 
           const theResponseHeaders = response.headers;