Added ability to remove bookmarks

Summary: Here I add the ability to remove bookmarks. If a bookmark already exists, a different dialouge menu appears.

Reviewed By: danielbuechele

Differential Revision: D16540394

fbshipit-source-id: 5d6737e1efb1a9663519bf17084ef3b55a6ba28e

src/plugins/navigation/components/SaveBookmarkDialog.js

@@ -13,8 +13,10 @@ import type {Bookmark} from '../flow-types';
 
 type Props = {|
   uri: ?string,
+  edit: boolean,
   shouldShow: boolean,
   onHide: ?() => void,
+  onRemove: string => void,
   onSubmit: Bookmark => void,
 |};
 
@@ -47,7 +49,7 @@ const NameInput = styled(Input)({
 });
 
 export default (props: Props) => {
-  const {shouldShow, onHide, onSubmit, uri} = props;
+  const {edit, shouldShow, onHide, onRemove, onSubmit, uri} = props;
   const [commonName, setCommonName] = useState('');
   if (uri == null || !shouldShow) {
     return null;
@@ -57,7 +59,9 @@ export default (props: Props) => {
         {hide => {
           return (
             <Container>
-              <Title>Save to bookmarks...</Title>
+              <Title>
+                {edit ? 'Edit bookmark...' : 'Save to bookmarks...'}
+              </Title>
               <NameInput
                 placeholder="Name..."
                 value={commonName}
@@ -74,6 +78,20 @@ export default (props: Props) => {
                   padded>
                   Cancel
                 </Button>
+                {edit ? (
+                  <Button
+                    type="danger"
+                    onClick={() => {
+                      hide();
+                      onRemove(uri);
+                      setCommonName('');
+                    }}
+                    compact
+                    padded>
+                    Remove
+                  </Button>
+                ) : null}
+
                 <Button
                   type="primary"
                   onClick={() => {

src/plugins/navigation/index.js

@@ -14,7 +14,11 @@ import {
   Timeline,
   ScrollableFlexColumn,
 } from './components';
-import {readBookmarksFromDB, writeBookmarkToDB} from './util/indexedDB';
+import {
+  removeBookmark,
+  readBookmarksFromDB,
+  writeBookmarkToDB,
+} from './util/indexedDB';
 
 import type {
   State,
@@ -97,8 +101,19 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     this.setState({bookmarks: newMapRef});
   };
 
+  removeBookmark = (uri: string) => {
+    removeBookmark(uri);
+    const newMapRef = this.state.bookmarks;
+    newMapRef.delete(uri);
+    this.setState({bookmarks: newMapRef});
+  };
+
   render() {
-    const {bookmarks, shouldShowSaveBookmarkDialog} = this.state;
+    const {
+      bookmarks,
+      saveBookmarkURI,
+      shouldShowSaveBookmarkDialog,
+    } = this.state;
     const {navigationEvents} = this.props.persistedState;
     return (
       <ScrollableFlexColumn>
@@ -116,9 +131,13 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
         <BookmarksSidebar bookmarks={bookmarks} onNavigate={this.navigateTo} />
         <SaveBookmarkDialog
           shouldShow={shouldShowSaveBookmarkDialog}
-          uri={this.state.saveBookmarkURI}
+          uri={saveBookmarkURI}
           onHide={() => this.setState({shouldShowSaveBookmarkDialog: false})}
+          edit={
+            saveBookmarkURI != null ? bookmarks.has(saveBookmarkURI) : false
+          }
           onSubmit={this.addBookmark}
+          onRemove={this.removeBookmark}
         />
       </ScrollableFlexColumn>
     );

src/plugins/navigation/util/indexedDB.js

@@ -92,3 +92,18 @@ export const readBookmarksFromDB: () => Promise<Map<string, Bookmark>> = () => {
       .catch(reject);
   });
 };
+
+export const removeBookmark: (uri: string) => Promise<void> = uri => {
+  return new Promise((resolve, reject) => {
+    openNavigationPluginDB()
+      .then((db: IDBDatabase) => {
+        const bookmarksObjectStore = db
+          .transaction(BOOKMARKS_KEY, 'readwrite')
+          .objectStore(BOOKMARKS_KEY);
+        const request = bookmarksObjectStore.delete(uri);
+        request.onsuccess = resolve;
+        request.onerror = event => reject(event.target.error);
+      })
+      .catch(reject);
+  });
+};