124 lines
4.5 KiB
JavaScript
124 lines
4.5 KiB
JavaScript
/*global chrome*/
|
|
import React, {Component} from 'react';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
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({
|
|
name: "bookmarkArranger"
|
|
});
|
|
|
|
getBookMarks = () => {
|
|
this.port.postMessage({
|
|
code: "getBookMarks"
|
|
});
|
|
}
|
|
|
|
listenMessages = () => {
|
|
this.port.onMessage.addListener(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">
|
|
{/* <Button label="Secondary" className="p-button-raised p-button-secondary" onClick={this.getBookMarks}/> */}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="content-section implementation">
|
|
<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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|