Add to bookmark.

airycanon · Oct 13, 2017 · 0623085 · 0623085
1 parent 97acbb2
commit 0623085
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 25 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -29,7 +29,7 @@ export default class App extends Component {
 
         return (<Layout>
             <Header/>
-            <Modal visible={viewStore.showBookmark} okText="确认" onCancel={() =>{viewStore.showBookmark = false}} cancelText="取消" style={{padding: 10}}>
+            <Modal visible={viewStore.bookmarkHistory !== null} onCancel={() =>{viewStore.bookmarkHistory = null}} style={{padding: 10}} footer={null}>
                 <Breadcrumb>{
                     viewStore.breadcrumbs.map((breadcrumb, index) => (
                         <Breadcrumb.Item style={{cursor: 'pointer'}} onClick={() => this.onBreadcrumbClick(breadcrumb, index)}

diff --git a/src/components/BookmarkItem.js b/src/components/BookmarkItem.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Row, Col, Icon} from 'antd';
+import {Row, Col, Icon, message} from 'antd';
 import PropTypes from 'prop-types';
 import {observer, inject} from "mobx-react";
 
@@ -14,25 +14,23 @@ export default class BookmarkItem extends Component {
     }
 
     onBookmarkSelect(node) {
-        const {viewStore} = this.props;
-        viewStore.selectedBookmark = node;
+        const {bookmarkStore, viewStore} = this.props;
+        bookmarkStore.add(viewStore.bookmarkHistory,node);
+        viewStore.bookmarkHistory = null;
+        message.success(`已添加书签到 ${node.title} 中`, 3);
     }
 
     render() {
         const {viewStore, bookmark} = this.props;
         const style = {wordWrap: 'break-word'};
-        if (viewStore.selectedBookmark && viewStore.selectedBookmark.id === bookmark.id) {
-            style.color = '#3143fa';
-        }
 
         let icon = '';
 
         if (bookmark.children.length) {
             icon = <Icon style={{fontSize: 16}} onClick={() => this.onBookmarkClick(bookmark)} type="right"/>
         }
 
-        return (<Row type="flex" justify="space-between" align="middle"
-                     onClick={() => this.onBookmarkSelect(bookmark)}>
+        return (<Row type="flex" justify="space-between" align="middle" onClick={() => this.onBookmarkSelect(bookmark)}>
             <Col style={style} span={20}>{bookmark.title}</Col>
             <Col span={2}>{icon}</Col>
         </Row>)

diff --git a/src/components/HistoryItem.js b/src/components/HistoryItem.js
@@ -2,14 +2,15 @@ import React, {Component} from 'react';
 import {Row, Col, Checkbox, Icon, Tooltip} from 'antd';
 import PropTypes from 'prop-types';
 import {inject, observer} from 'mobx-react';
-import viewStore from "../stores/ViewStore";
 
 @inject('historyStore', 'viewStore', 'bookmarkStore')
 @observer
 export default class HistoryItem extends Component {
 
     render() {
-        const {historyStore, bookmarkStore, history} = this.props;
+        const {historyStore, viewStore, history} = this.props;
+
+        const star = history.bookmark ? 'star' : 'star-o';
 
         return (<Row className="history-row">
                 <Col span={1}>
@@ -23,9 +24,9 @@ export default class HistoryItem extends Component {
                     <a className="history-label" target="_blank" href={history.url}>{history.title}</a>
                 </Col>
                 <Col className="col-right" span={2}>
-                    <Tooltip placement="top" title="收藏">
-                        <Icon type="star-o" onClick={() => {
-                            viewStore.showBookmark = true;
+                    <Tooltip placement="top" title="添加到书签">
+                        <Icon type={star} onClick={() => {
+                            viewStore.bookmarkHistory = history;
                         }}/>
                     </Tooltip>
                     <Tooltip placement="top" title="删除">

diff --git a/src/service/BookmarkService.js b/src/service/BookmarkService.js
@@ -9,6 +9,27 @@ class BookmarkService {
             });
         });
     }
+
+    async create(bookmark) {
+        return new Promise((resolve) => {
+            chrome.bookmarks.create(bookmark, result => {
+                resolve(result);
+            })
+        });
+    }
+
+    async search(url) {
+        return new Promise((resolve) => {
+            chrome.bookmarks.search({url}, result => {
+                let bookmark = result.length ? result[0] : null
+                resolve(bookmark);
+            })
+        });
+    }
+
+    move(id, parentId) {
+        chrome.bookmarks.move(id, {parentId});
+    }
 }
 
 let service = new BookmarkService();

diff --git a/src/stores/BookmarkStore.js b/src/stores/BookmarkStore.js
@@ -25,7 +25,25 @@ class BookmarkStore {
             bookmark.children = await bookmarkService.getFolder(bookmark.id);
             return bookmark;
         }));
-        console.log(this.nodes);
+    }
+
+    @action
+    async add(history, bookmark) {
+        if (history.bookmark) {
+            bookmarkService.move(history.bookmark.id, bookmark.id);
+        } else {
+            const data = {
+                title: history.title,
+                url: history.url,
+                parentId: bookmark.id
+            }
+            history.bookmark  = await bookmarkService.create(data);
+        }
+    }
+
+    @action
+    async move(bookmark, parent) {
+        bookmarkService.move(bookmark.id, parent.id);
     }
 }
 

diff --git a/src/stores/HistoryStore.js b/src/stores/HistoryStore.js
@@ -1,5 +1,6 @@
 import {observable, action, computed} from 'mobx';
 import historyService from '../service/HistoryService';
+import bookmarkService from '../service/BookmarkService';
 import moment from 'moment';
 
 class History {
@@ -8,8 +9,7 @@ class History {
     url = '';
     rangeKey = '';
     lastVisitTime = '';
-    visitCount = 0;
-    typedCount = 0;
+    @observable bookmark = null;
     @observable checked = false;
 
     constructor(historyObject) {
@@ -113,9 +113,10 @@ class HistoryStore {
         this.ranges = [];
     }
 
-    add(historyItems) {
+    async add(historyItems) {
         for (let historyItem of historyItems) {
             let history = new History(historyItem);
+            history.bookmark = await bookmarkService.search(history.url);
             let range = this.getRange(history.rangeKey);
             range.add(history);
         }

diff --git a/src/stores/ViewStore.js b/src/stores/ViewStore.js
@@ -4,12 +4,10 @@ import historyStore from './HistoryStore';
 class ViewStore {
     @observable checkedHistories = [];
 
-    @observable showBookmark = false;
+    @observable bookmarkHistory = null;
 
     @observable breadcrumbs = [];
 
-    @observable selectedBookmark = null;
-
     @computed
     get hasChecked() {
         return this.checkedHistories.length > 0;
@@ -40,15 +38,11 @@ class ViewStore {
 
     @action
     addBreadcrumb(node) {
-        this.selectedBookmark = null;
         this.breadcrumbs.push(node);
     }
 
     @action
     changeBreadcrumb(index) {
-        if (index !== this.breadcrumbs.length - 1) {
-            this.selectedBookmark = null;
-        }
         this.breadcrumbs.splice(index + 1);
     }
 }