Merge pull request #37 from oslabs-beta/collections

Collections

src/assets/style/grid.scss

@@ -40,7 +40,7 @@
 .grid-4 {
 	border-bottom: 1px solid $bordergray;
 	display: grid;
-	grid-template-columns: 25% 25% 40% 10%;
+	grid-template-columns: 20% 35% 35% 10%;
 	height: 30px;
 	width: 100%;
 	div {

src/assets/style/sidebar.scss

@@ -41,7 +41,6 @@
 }
 .composer_submit {
 	-webkit-appearance: none;
-
 	border: none;
 	border-radius: 5px;
 	color: white;
@@ -316,13 +315,15 @@
 	margin-top: 0px;
 }
 .historyDate-container {
-	margin-top: 15px;
+  border-top: 1px solid #ddd;
+	// margin-top: 10px;
 	overflow-y: scroll;
-	overflow-x: none;
+  overflow-x: none;
+  height: 360px;
 }
 .historyDate-container::-webkit-scrollbar {
 }
-.historyDate h1 {
+.historyDate h1, .collections-container h1 {
 	font-weight: 700;
 	margin-bottom: 5px;
 	margin-top: 15px;
@@ -347,21 +348,22 @@
 		opacity: 1;
 	}
 }
-.history-text-container {
+.history-text-container, .collection-text-container {
 	align-items: center;
-	display: flex;
-	flex-shrink: 100;
+  display: flex;
+  justify-self: center;
+  flex-shrink: 100;
 }
 .history-method {
 	font-weight: bold;
 	height: 28px;
 	line-height: 20px;
 	padding: 4px 6px;
 }
-.history-url {
+.history-url, .collection-name {
 	margin-left: 4px;
 }
-.history-delete-container {
+.history-delete-container, .collection-delete-container {
 	display: flex;
 	float: right;
 	height: 26px;
@@ -370,22 +372,45 @@
 	top: -28px;
 	z-index: 0;
 }
-.history-delete-fade {
+.history-delete-fade, .collection-delete-fade {
 	background: linear-gradient(to right, rgba(40, 40, 40, 0), rgba(40, 40, 40, 1));
 	color: white;
 	height: 26px;
-	width: 30px;
+	width: 32px;
 }
-.history-delete-button {
+.history-delete-button, .collection-delete-button {
 	// flex-grow: 1;
 	background: rgba(40, 40, 40, 1);
 	height: 100%;
 	width: 20px;
 }
-.history-delete-image {
+.history-delete-image, .collection-delete-image {
 	height: 22px;
 	margin-left: 2px;
 	margin-top: 2px;
-	opacity: 0;
+	opacity: 0.5;
 	width: 16px;
 }
+.collections-container {
+  margin-top: 10px;
+  width: 100%;
+}
+.collection-container {
+  border: 1px solid #282828;
+	border-radius: 5px;
+	color: white;
+	cursor: pointer;
+	font-size: .95rem;
+	height: 28px;
+  margin: 1px 0px 1px 0px;
+  overflow-y: scroll;
+  overflow-x: none;
+	// overflow: hidden;
+	width: 465px;
+	&:hover {
+		border: 1px solid #808080;
+	}
+	&:hover .collection-delete-image {
+		opacity: 1;
+	}  
+}

src/client/actions/actionTypes.js

@@ -7,6 +7,10 @@ export const REQRES_UPDATE = 'REQRES_UPDATE';
 export const GET_HISTORY = 'GET_HISTORY';
 export const DELETE_HISTORY = 'DELETE_HISTORY';
 
+export const GET_COLLECTIONS = 'GET_COLLECTIONS';
+export const DELETE_COLLECTION = 'DELETE_COLLECTION';
+export const COLLECTION_TO_REQRES = 'COLLECTION_TO_REQRES';
+
 export const SET_COMPOSER_WARNING_MESSAGE = "SET_COMPOSER_WARNING_MESSAGE";
 
 export const SET_NEW_REQUEST_FIELDS = "SET_NEW_REQUEST_FIELDS";

src/client/actions/actions.js

@@ -13,6 +13,21 @@ export const deleteFromHistory = reqRes => ({
   payload: reqRes,
 });
 
+export const getCollections = collections => ({
+  type: types.GET_COLLECTIONS,
+  payload: collections,
+});
+
+export const deleteFromCollection = collection => ({
+  type: types.DELETE_COLLECTION,
+  payload: collection,
+});
+
+export const collectionToReqRes = reqResArray => ({
+  type: types.COLLECTION_TO_REQRES,
+  payload: reqResArray,
+});
+
 export const reqResClear = () => ({
   type: types.REQRES_CLEAR,
 });

src/client/components/composer/NewRequest/HeaderEntryForm.jsx

@@ -93,7 +93,7 @@ class HeaderEntryForm extends Component {
 
   addHeader(headersDeepCopy) {
     headersDeepCopy.push({
-      id: this.props.newRequestHeaders.count,
+      id: this.props.newRequestHeaders.count+1,
       active: false,
       key: '',
       value: '',

src/client/components/containers/App.jsx

@@ -6,6 +6,7 @@ import ReqResCtrl from '../../controllers/reqResController';
 import SidebarContainer from './SidebarContainer.jsx';
 import UpdatePopUpContainer from './UpdatePopUpContainer.jsx';
 import historyController from '../../controllers/historyController'
+import collectionsController from '../../controllers/collectionsController'
 
 
 class App extends Component {
@@ -25,6 +26,8 @@ class App extends Component {
       // console.log('Message from updater: ', text)
     });
     historyController.getHistory();
+    collectionsController.getCollections();
+
   }
 
   render() {

src/client/components/containers/CollectionsContainer.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../../actions/actions';
+import collectionsController from '../../controllers/collectionsController'
+import Collection from '../display/Collection.jsx'
+
+const mapStateToProps = store => ({
+  collections: store.business.collections,
+});
+
+const mapDispatchToProps = dispatch => ({
+  deleteFromCollection: (collection) => { dispatch(actions.deleteFromCollection(collection)) },  
+  collectionToReqRes: (reqResArray) => { dispatch(actions.collectionToReqRes(reqResArray)) },  
+});
+
+class CollectionsContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+    let collectionComponents = this.props.collections.map((collection, idx) => {
+      return <Collection 
+        content={collection} key={idx}
+        deleteFromCollection = {this.props.deleteFromCollection}
+        collectionToReqRes = {this.props.collectionToReqRes}
+      />
+    })
+
+    return (
+      <div className={'collections-container'}>
+        <h1>Collections</h1>
+        {collectionComponents}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CollectionsContainer);

src/client/components/containers/SidebarContainer.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-
 import ComposerContainer from '../composer/ComposerContainer.jsx';
 import HistoryContainer from './HistoryContainer.jsx';
+import CollectionsContainer from './CollectionsContainer.jsx';
 
 class SidebarContainer extends Component {
   constructor(props) {
@@ -12,6 +12,7 @@ class SidebarContainer extends Component {
     return (
       <div className="sidebar_composer-console">
         <ComposerContainer />
+        <CollectionsContainer />
         <HistoryContainer />
       </div>
     );

src/client/components/display/Collection.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import collectionsController from '../../controllers/collectionsController';
+import Trashcan from '../../../assets/img/Trashcan.png'
+
+class Collection extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.deleteCollection = this.deleteCollection.bind(this);
+    this.addCollectionToReqResContainer = this.addCollectionToReqResContainer.bind(this);
+  }
+
+  addCollectionToReqResContainer() {
+    this.props.collectionToReqRes(this.props.content.reqResArray)
+  }
+
+  deleteCollection(e) {
+    this.props.deleteFromCollection(this.props.content); //a function we need to make in the container
+    collectionsController.deleteCollectionFromIndexedDb(e.target.id);
+  }
+
+  render() {
+    return (
+      <>
+        <div className={'collection-container collection-text-container'} onClick={this.addCollectionToReqResContainer}>
+          <div className={'collection-name'}> {this.props.content.name}
+          </div>
+        </div>
+        <div className='collection-delete-container'>
+          <div className='collection-delete-fade'>
+          </div>
+          <div className={'collection-delete-button'} onClick={this.deleteCollection}>
+            <img className='collection-delete-image' src={Trashcan} id={this.props.content.id} ></img>
+          </div>
+        </div>
+      </>
+    )
+  }
+}
+
+export default Collection;

src/client/components/display/History.jsx

@@ -31,7 +31,7 @@ class History extends Component {
     }
     const requestHeadersObj = {
       headersArr: deeperCopy ? deeperCopy : [],
-      count: this.props.content.request.headers ? this.props.content.request.headers.length : 0,
+      count: deeperCopy ? deeperCopy.length : 1, //TO FIX
     }
     const requestCookiesObj = {
       cookiesArr: this.props.content.request.cookies ? this.props.content.request.cookies : [],
@@ -56,7 +56,6 @@ class History extends Component {
     historyController.deleteHistoryFromIndexedDb(e.target.id);
   }
 
-
   render() {
     return (
       <div className={'history-container'} onClick={this.props.focusOnForm} >

src/client/components/display/HistoryDate.jsx

@@ -27,7 +27,6 @@ class HistoryDate extends Component {
 
     let histArray = current.history.map((history, i) => {
       return <History
-        className="historyChild"
         content={history} key={i}
         focusOnForm={this.focusOnForm}
         deleteFromHistory={this.props.deleteFromHistory}

src/client/components/display/SSERow.jsx

@@ -29,22 +29,19 @@ class SSERow extends Component {
         <div className={'grid-4'}>
           <div>
             <span className="tertiary-title">
-              ID
-              {this.props.content.id}
+              ID {this.props.content.id}
             </span>
           </div>
 
           <div>
             <span className="tertiary-title">
-              Event
-              {this.props.content.event}
+              Event {this.props.content.event}
             </span>
           </div>
 
           <div>
             <span className="tertiary-title">
-              Time Received
-              {this.props.content.timeReceived}
+              Time Received {this.props.content.timeReceived}
             </span>
           </div>
 

src/client/controllers/collectionsController.js

@@ -17,21 +17,15 @@ const collectionsController = {
       .catch((err) => console.log('Error in deleteFromCollection', err))
   },
 
-  getCollection() {
+  getCollections() {
     console.log("IN GET COLLECTION")
     db.table('collections')
       .toArray()
       .then(collections => {
-        console.log(collections)
-        // let collectionsArr = Object.keys(collection).sort((a, b) => parse(b) - parse(a)).map(date => {
-        //   return {
-        //     date: date,
-        //     collections: collectionsGroupsObj[date]
-        //   };
-        // });
-        // store.default.dispatch(actions.getCollection(collectionsArr));
+        const collectionsArr = collections.sort((a, b) => b.created_at - a.created_at);
+        store.default.dispatch(actions.getCollections(collectionsArr));
       })
-      .catch(err => console.log('Error in getCollection', err));
+      .catch(err => console.log('Error in getCollections', err));
   }
 }