Implements Firebase as datastore for bookmarks.

graphicbeacon · Apr 4, 2019 · 739cdf0 · 739cdf0
1 parent 29ba041
commit 739cdf0
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 46 deletions.
diff --git a/lib/src/bm_form/bm_form_component.dart b/lib/src/bm_form/bm_form_component.dart
@@ -19,6 +19,10 @@ class BookmarkFormComponent implements OnInit {
   @Output('onDelete')
   Stream get formDelete => _formDeleteCtrl.stream;
 
+  final _formUpdateCtrl = StreamController();
+  @Output('onUpdate')
+  Stream get formUpdate => _formUpdateCtrl.stream;
+
   bool submitted = false;
 
   @override
@@ -32,8 +36,8 @@ class BookmarkFormComponent implements OnInit {
     if (form.valid) {
       bookmark
         ..update(editedBookmark)
-        ..edit = false
-        ..isFresh = false;
+        ..edit = false;
+      _formUpdateCtrl.add(null);
     }
   }
 

diff --git a/lib/src/bm_form/bm_form_component.html b/lib/src/bm_form/bm_form_component.html
@@ -61,12 +61,13 @@
   </button>
   <button
     class="btn btn-warning"
-    *ngIf="!bookmark.isFresh"
+    *ngIf="bookmark.id != null"
+    type="button"
     (click)="bookmark.edit = false"
   >
     Cancel
   </button>
-  <button class="btn btn-danger" (click)="removeBookmark()">
+  <button class="btn btn-danger" type="button" (click)="removeBookmark()">
     Delete
   </button>
 </form>
diff --git a/lib/src/bm_scaffold/bm_scaffold_component.dart b/lib/src/bm_scaffold/bm_scaffold_component.dart
@@ -2,43 +2,33 @@ import 'package:angular/angular.dart';
 
 import '../model/bookmark.dart';
 import '../bm_form/bm_form_component.dart';
+import '../services/bookmark_service.dart';
 
 @Component(
-  selector: 'bm-scaffold',
-  templateUrl: 'bm_scaffold_component.html',
-  directives: [
-    coreDirectives,
-    BookmarkFormComponent,
-  ],
-)
-class BookmarkScaffoldComponent {
-  final List bookmarks = [
-    Bookmark(
-      title: 'Creative Bracket',
-      description:
-          'Go-to Dart blog containing Dart resources for beginners and beyond',
-      url: 'https://creativebracket.com',
-      edit: false,
-      isFresh: false,
-    ),
-    Bookmark(
-      title: 'Dartlang Home',
-      description: 'Documentation website for the Dart language and tools',
-      url: 'https://dartlang.org',
-      edit: false,
-      isFresh: false,
-    ),
-    Bookmark(
-      title: 'Flutter',
-      description: 'Build native mobile apps with the Flutter SDK',
-      url: 'https://flutter.io',
-      edit: false,
-      isFresh: false,
-    )
-  ];
+    selector: 'bm-scaffold',
+    templateUrl: 'bm_scaffold_component.html',
+    directives: [
+      coreDirectives,
+      BookmarkFormComponent,
+    ],
+    providers: [
+      ClassProvider(BookmarkService)
+    ])
+class BookmarkScaffoldComponent implements OnInit {
+  BookmarkScaffoldComponent(this._bmService);
+
+  final BookmarkService _bmService;
+  List bookmarks = [];
+  bool isLoading = true;
 
   Bookmark editedBookmark;
 
+  @override
+  Future<Null> ngOnInit() async {
+    bookmarks = await _bmService.getBookmarks();
+    isLoading = false;
+  }
+
   addBookmark() {
     bookmarks.add(Bookmark());
   }
@@ -47,7 +37,19 @@ class BookmarkScaffoldComponent {
     bookmarks[index].edit = true;
   }
 
-  removeBookmark(int index) {
+  removeBookmark(int index) async {
+    await _bmService.removeBookmark(bookmarks[index]);
     bookmarks.removeAt(index);
   }
+
+  updateBookmark(int index) async {
+    var bm = bookmarks[index];
+
+    if (bm.id == null) {
+      var resId = await _bmService.addBookmark(bm);
+      bm.id = resId;
+    } else {
+      await _bmService.updateBookmark(bm);
+    }
+  }
 }
diff --git a/lib/src/bm_scaffold/bm_scaffold_component.html b/lib/src/bm_scaffold/bm_scaffold_component.html
@@ -4,7 +4,14 @@
 <div class="container">
   <div class="row">
     <div class="col-sm-12" *ngIf="bookmarks.isEmpty">
-      <div class="alert text-center">No bookmarks added.</div>
+      <div class="alert text-center">
+        <template [ngIf]="!isLoading">
+          No bookmarks added.
+        </template>
+        <template [ngIf]="isLoading">
+          Loading bookmarks from database...
+        </template>
+      </div>
     </div>
     <div
       class="col-md-4 mb-3"
@@ -23,6 +30,7 @@ <h5 class="card-title">{{ bookmark.title }}</h5>
           <bm-form
             [bookmark]="bookmark"
             (onDelete)="removeBookmark($i)"
+            (onUpdate)="updateBookmark($i)"
           ></bm-form>
         </div>
       </div>

diff --git a/lib/src/model/bookmark.dart b/lib/src/model/bookmark.dart
@@ -1,23 +1,37 @@
 class Bookmark {
   Bookmark({
+    this.id,
     this.title = '',
     this.description = '',
     this.url = '',
     this.edit = true,
-    this.isFresh = true,
   });
 
+  Bookmark.fromMap(Map bm)
+      : this(
+          id: bm['id'],
+          title: bm['title'],
+          description: bm['description'],
+          url: bm['url'],
+          edit: bm['edit'] ?? false,
+        );
+
+  String id;
+  String title;
+  String description;
+  String url;
+  bool edit;
+
+  asMap() => {
+        'title': title,
+        'description': description,
+        'url': url,
+      };
+
   update(Bookmark bm) {
     title = bm.title;
     description = bm.description;
     url = bm.url;
     edit = bm.edit;
-    isFresh = bm.isFresh;
   }
-
-  String title;
-  String description;
-  String url;
-  bool edit;
-  bool isFresh;
 }
diff --git a/lib/src/services/bookmark_service.dart b/lib/src/services/bookmark_service.dart
@@ -0,0 +1,54 @@
+import 'dart:async';
+
+import 'package:angular/angular.dart';
+import 'package:firebase/firebase.dart';
+
+import '../model/bookmark.dart';
+
+@Injectable()
+class BookmarkService {
+  BookmarkService() {
+    initializeApp(
+      apiKey: "AIzaSyDz0_Z9cSleynEWUD0Xtx_kLDguxbrRjAU",
+      authDomain: "bookmark-manager-1e87a.firebaseapp.com",
+      databaseURL: "https://bookmark-manager-1e87a.firebaseio.com",
+      projectId: "bookmark-manager-1e87a",
+      storageBucket: "bookmark-manager-1e87a.appspot.com",
+      messagingSenderId: "666842763609",
+    );
+
+    _db = database();
+    _ref = _db.ref('bookmarks').ref;
+  }
+
+  Database _db;
+  DatabaseReference _ref;
+
+  Future<List<Bookmark>> getBookmarks() async {
+    final List<Bookmark> bookmarks = [];
+    final queryEvent = await _ref.once('value');
+    final DataSnapshot snapshot = queryEvent.snapshot;
+    final bmData = snapshot.val();
+
+    bmData.forEach((key, val) {
+      var details = val as Map<String, dynamic>;
+      details['id'] = key;
+      bookmarks.add(Bookmark.fromMap(details));
+    });
+
+    return bookmarks;
+  }
+
+  Future addBookmark(Bookmark bm) async {
+    var res = await _ref.push(bm.asMap());
+    return res.key;
+  }
+
+  Future updateBookmark(Bookmark bm) async {
+    return await _ref.child(bm.id).set(bm.asMap());
+  }
+
+  Future removeBookmark(Bookmark bm) async {
+    return await _ref.child(bm.id).remove();
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -10,6 +10,7 @@ environment:
 dependencies:
   angular: ^5.2.0
   angular_components: ^0.11.0
+  firebase: ^5.0.0
 
 dev_dependencies:
   angular_test: ^2.2.0

diff --git a/web/index.html b/web/index.html
@@ -27,6 +27,7 @@
       integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
       crossorigin="anonymous"
     ></script>
+    <script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script>
     <script defer src="main.dart.js"></script>
   </head>
   <body>