diff options
| -rw-r--r-- | icons/icon.png | bin | 0 -> 7225 bytes | |||
| -rw-r--r-- | icons/icon.sketch | bin | 0 -> 25533 bytes | |||
| -rw-r--r-- | icons/~`~icon.sketch | bin | 0 -> 20217 bytes | |||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/App.css | 18 | ||||
| -rw-r--r-- | src/App.js | 104 | ||||
| -rw-r--r-- | yarn.lock | 10 |
7 files changed, 113 insertions, 21 deletions
diff --git a/icons/icon.png b/icons/icon.png Binary files differnew file mode 100644 index 0000000..dbdf521 --- /dev/null +++ b/icons/icon.png diff --git a/icons/icon.sketch b/icons/icon.sketch Binary files differnew file mode 100644 index 0000000..68ab1c7 --- /dev/null +++ b/icons/icon.sketch diff --git a/icons/~`~icon.sketch b/icons/~`~icon.sketch Binary files differnew file mode 100644 index 0000000..0312ba4 --- /dev/null +++ b/icons/~`~icon.sketch diff --git a/package.json b/package.json index ce0b14c..19c165b 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index e69de29..db20a8c 100644 --- a/src/App.css +++ b/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; +}
\ No newline at end of file @@ -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} /> - </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> */} + <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> </div> </div> ); @@ -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" |
