Implements Bookmarks Listing

Grid Adjustments
Prepare for release

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "classnames": "^2.2.6",
+    "lodash": "^4.17.14",
+    "moment": "^2.24.0",
     "primeicons": "^1.0.0",
     "primereact": "^3.1.7",
     "react": "^16.8.6",

src/App.css

@@ -0,0 +1,18 @@
+button.refresh{
+    float: right;
+    background: black;
+    border: none;
+    color: #fff;
+    /* padding: 6px; */
+    border-radius: 3px;
+    width: 28px;
+    height: 28px;
+    padding-top: 3px;
+    cursor: pointer;
+}
+
+.header {
+    text-align: center;
+    font-size: 17px;
+    color: #000;
+}

src/App.js

@@ -1,8 +1,19 @@
 /*global chrome*/
-import React from 'react';
+import React, {Component} from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
-class App extends React.Component {
+import {Button} from 'primereact/button';
+import {InputText} from 'primereact/inputtext';
+import _ from 'lodash';
+import moment from 'moment';
+import './App.css';
+
+class App extends Component {
+
+  state = {
+    bookMarkDataRaw: [],
+    bookMarks: []
+  }
 
   /* Open port on popup file */
   port = chrome.runtime.connect({
@@ -17,41 +28,92 @@ class App extends React.Component {
 
   listenMessages = () => {
     this.port.onMessage.addListener(message => {
-      console.log(message)
+      if(message.bookMarkData){
+        this.setState({
+          bookMarkDataRaw: message.bookMarkData[0]
+        }, ()=>{           
+          let collected = this.iterateBookMarks(this.state.bookMarkDataRaw.children, []);
+          collected = _.map(collected, (nodes)=>{
+            if(nodes.parentId){
+              let parentNode = _.find(collected, {id: nodes.parentId});
+              nodes.parentNode = parentNode ? parentNode.title : "";
+            }
+            return nodes;
+          })
+          this.setState({
+            bookMarks: collected
+          })
+        })
+      }
     });
+    this.getBookMarks();
+  }
+
+  linkTemplate = (rowData, column) => {
+    return <a style={{overflowWrap: 'break-word'}} href={rowData.url}>{rowData.url}</a>
+  }
+
+  dateTemplate = (rowData, column) => {
+    if(rowData.dateAdded){
+      return <span>{moment(rowData.dateAdded).format('MM-DD-YYYY hh:ss A')}</span>
+    }else if(rowData.dateGroupModified){
+      return <span>{moment(rowData.dateAdded).format('MM-DD-YYYY hh:ss A')}</span>
+    }else {
+      return <span></span>
+    }
   }
 
   componentDidMount(){
     this.listenMessages();
   }
 
+  iterateBookMarks = (children, consolidatedChildrens)=>{
+    let bookMarkChildren = _.each(children, (child)=>{
+      if(child.children && child.children.length>0){
+        let currentNode = child;
+        let currentNodeChildren = currentNode.children;
+        console.log(currentNodeChildren);
+        delete currentNode.children;
+        consolidatedChildrens.push(currentNode);
+        console.log(currentNodeChildren);
+        this.iterateBookMarks(currentNodeChildren, consolidatedChildrens);
+      }else{
+        consolidatedChildrens.push(child);
+      }
+    });
+
+    return consolidatedChildrens;
+  }
+
   render(){
+    var header = <div style={{'textAlign':'left'}}>
+                        <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
+                        <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Search Bookmarks" size="50"/>
+                        <button className="refresh" onClick={this.getBookMarks}>
+                          <span className="pi pi-refresh"></span>
+                        </button>
+                    </div>;
     return (
       <div>
         <div className="content-section introduction">
           <div className="feature-intro">
-            <h1>DataTable - Sort</h1>
-            <p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and
-                  used with metaKey.</p>
+          {/* <Button label="Secondary" className="p-button-raised p-button-secondary" onClick={this.getBookMarks}/> */}
           </div>
         </div>
   
         <div className="content-section implementation">
-          <h3>Single Column</h3>
-          {/* <DataTable value={this.state.cars}>
-            <Column field="vin" header="Vin" sortable={true} />
-            <Column field="year" header="Year" sortable={true} />
-            <Column field="brand" header="Brand" sortable={true} />
-            <Column field="color" header="Color" sortable={true} />
+          <h3 className="header">BookMarks</h3>
+          <DataTable value={this.state.bookMarks} sortMode="multiple" paginator={true} rows={10} header={header}
+                        globalFilter={this.state.globalFilter} emptyMessage="No records found" resizableColumns={true} columnResizeMode="fit"
+                        rowsPerPageOptions={[5,10,20,100,500]}>
+                        <Column field="id" header="Id" sortable={true} style={{width:'93px'}}/>
+                        {/* <Column field="index" header="Index" sortable={true} style={{width:'93px'}}/> */}
+                        <Column field="parentNode" header="Parent" sortable={true} style={{width:'150px'}}/>
+                        <Column field="title" header="Title" sortable={true} style={{width:'500px'}}/>
+                        <Column field="url" header="Url" sortable={true}  style={{width:'402px'}} body={this.linkTemplate}/>
+                        <Column field="dateAdded" header="Date Added" sortable={true} style={{width:'190px'}} body={this.dateTemplate}/>
+                        <Column field="dateGroupModified" header="Date Modified" sortable={true} style={{width:'190px'}} body={this.dateTemplate}/>
                     </DataTable>
-  
-          <h3>Multiple Columns</h3>
-          <DataTable value={this.state.cars} sortMode="multiple">
-            <Column field="vin" header="Vin" sortable={true} />
-            <Column field="year" header="Year" sortable={true} />
-            <Column field="brand" header="Brand" sortable={true} />
-            <Column field="color" header="Color" sortable={true} />
-          </DataTable> */}
         </div>
       </div>
     );

yarn.lock

@@ -5890,6 +5890,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
+lodash@^4.17.14:
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
+  integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
+
 loglevel@^1.4.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
@@ -6179,6 +6184,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
   dependencies:
     minimist "0.0.8"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"