List blocked users in settings.

js/blocked_number_controller.js

@@ -13,6 +13,14 @@
     window.getBlockedNumbers = () => blockedNumbers;
   
     window.BlockedNumberController = {
+      getAll() {
+        try {
+          this.load();
+        } catch (e) {
+          console.warn(e);
+        }
+        return blockedNumbers;
+      },
       reset() {
         blockedNumbers.reset([]);
       },

js/settings_start.js

@@ -1,4 +1,4 @@
-/* global $, Whisper */
+/* global $, Whisper, storage */
 
 $(document).on('keyup', e => {
   'use strict';
@@ -35,6 +35,8 @@ window.initialRequest = getInitialData();
 window.initialRequest.then(data => {
   'use strict';
 
+  storage.fetch();
+
   window.initialData = data;
   window.view = new Whisper.SettingsView();
   window.view.$el.appendTo($body);

js/views/blocked_number_view.js

@@ -0,0 +1,56 @@
+/* global BlockedNumberController: false */
+/* global Whisper: false */
+/* global storage: false */
+/* global $: false */
+
+/* eslint-disable no-new */
+
+// eslint-disable-next-line func-names
+(function() {
+    'use strict';
+  
+    window.Whisper = window.Whisper || {};
+
+    Whisper.BlockedNumberView = Whisper.View.extend({
+      templateName: 'blockedUserSettings',
+      className: 'blockedUserSettings',
+      events: {
+        'click .sync': 'sync',
+      },
+      initialize() {
+        storage.onready(() => {
+          this.collection = BlockedNumberController.getAll();
+          this.listView = new Whisper.BlockedNumberListView({
+            collection: this.collection,
+          });
+
+          this.listView.render();
+          this.$('.content').append(this.listView.el);
+        });
+      },
+      render_attributes() {
+        return {
+          blockedHeader: 'Blocked Users',
+        };
+      },
+    });
+
+
+  Whisper.BlockedNumberListView = Whisper.ListView.extend({
+    tagName: 'div',
+    itemView: Whisper.View.extend({
+      tagName: 'div',
+      templateName: 'blockedNumber',
+      initialize() {
+        this.listenTo(this.model, 'change', this.render);
+      },
+      render_attributes() {
+        const number = (this.model && this.model.get('number')) || '-';
+        return {
+          number,
+        }
+      },
+    }),
+  });
+  })();
+  

js/views/settings_view.js

@@ -117,6 +117,10 @@
         value: window.initialData.mediaPermissions,
         setFn: window.setMediaPermissions,
       });
+
+      const blockedNumberView = new Whisper.BlockedNumberView().render();
+      this.$('.blocked-user-setting').append(blockedNumberView.el);
+
       if (!window.initialData.isPrimary) {
         const syncView = new SyncView().render();
         this.$('.sync-setting').append(syncView.el);

settings.html

@@ -34,6 +34,15 @@
       </p>
     </div>
 </script>
+<script type='text/x-tmpl-mustache' id='blockedNumber'>
+  <div>{{ number }}</div>
+  </div>
+</script>
+<script type='text/x-tmpl-mustache' id='blockedUserSettings'>
+  <h3>{{ blockedHeader }}</h3>
+  <div class='content'>
+  </div>
+</script>
 <script type='text/x-tmpl-mustache' id='settings'>
   <div class='content'>
     <a class='x close' alt='close settings' href='#'></a>
@@ -111,12 +120,17 @@
     </div>
     <hr>
     <div class='blocked-user-setting'>
-      <h3>{{ blockedHeader }}</h3>
     </div>
   </div>
 </script>
+
 <script type='text/javascript' src='js/components.js'></script>
+<script type='text/javascript' src='js/storage.js'></script>
+<script type='text/javascript' src='js/models/blockedNumbers.js'></script>
+<script type='text/javascript' src='js/blocked_number_controller.js'></script>
 <script type='text/javascript' src='js/views/whisper_view.js'></script>
+<script type='text/javascript' src='js/views/list_view.js'></script>
+<script type='text/javascript' src='js/views/blocked_number_view.js'></script>
 <script type='text/javascript' src='js/views/settings_view.js'></script>
 <script type='text/javascript' src='js/settings_start.js'></script>
 </html>