From 3746200f21917dd0a70adad59ae33b37ba256de3 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sat, 13 Jul 2019 12:15:30 +0530 Subject: Implements Bookmarks Listing Grid Adjustments Prepare for release --- icons/icon.png | Bin 0 -> 7225 bytes icons/icon.sketch | Bin 0 -> 25533 bytes icons/~`~icon.sketch | Bin 0 -> 20217 bytes package.json | 2 + src/App.css | 18 +++++++++ src/App.js | 104 ++++++++++++++++++++++++++++++++++++++++----------- yarn.lock | 10 +++++ 7 files changed, 113 insertions(+), 21 deletions(-) create mode 100644 icons/icon.png create mode 100644 icons/icon.sketch create mode 100644 icons/~`~icon.sketch diff --git a/icons/icon.png b/icons/icon.png new file mode 100644 index 0000000..dbdf521 Binary files /dev/null and b/icons/icon.png differ diff --git a/icons/icon.sketch b/icons/icon.sketch new file mode 100644 index 0000000..68ab1c7 Binary files /dev/null and b/icons/icon.sketch differ diff --git a/icons/~`~icon.sketch b/icons/~`~icon.sketch new file mode 100644 index 0000000..0312ba4 Binary files /dev/null and b/icons/~`~icon.sketch differ 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 diff --git a/src/App.js b/src/App.js index adbdf16..11b9321 100644 --- a/src/App.js +++ b/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 {rowData.url} + } + + dateTemplate = (rowData, column) => { + if(rowData.dateAdded){ + return {moment(rowData.dateAdded).format('MM-DD-YYYY hh:ss A')} + }else if(rowData.dateGroupModified){ + return {moment(rowData.dateAdded).format('MM-DD-YYYY hh:ss A')} + }else { + return + } } 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 =
+ + this.setState({globalFilter: e.target.value})} placeholder="Search Bookmarks" size="50"/> + +
; return (
-

DataTable - Sort

-

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.

+ {/*
-

Single Column

- {/* - - - - - - -

Multiple Columns

- - - - - - */} +

BookMarks

+ + + {/* */} + + + + + +
); diff --git a/yarn.lock b/yarn.lock index f4a0be4..aae6f4b 100644 --- a/yarn.lock +++ b/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" -- cgit v1.2.3