From 658b2b033208a2f036a0eab5dff281fc75befbd0 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Mon, 19 Nov 2018 12:22:35 +1100
Subject: [PATCH] List blocked users in settings.

---
 js/blocked_number_controller.js |  8 +++++
 js/settings_start.js            |  4 ++-
 js/views/blocked_number_view.js | 56 +++++++++++++++++++++++++++++++++
 js/views/settings_view.js       |  4 +++
 settings.html                   | 16 +++++++++-
 5 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 js/views/blocked_number_view.js

diff --git a/js/blocked_number_controller.js b/js/blocked_number_controller.js
index 4e4fac2d0..ab71238c5 100644
--- a/js/blocked_number_controller.js
+++ b/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([]);
       },
diff --git a/js/settings_start.js b/js/settings_start.js
index c81438577..f29d09224 100644
--- a/js/settings_start.js
+++ b/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);
diff --git a/js/views/blocked_number_view.js b/js/views/blocked_number_view.js
new file mode 100644
index 000000000..98837cae6
--- /dev/null
+++ b/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,
+        }
+      },
+    }),
+  });
+  })();
+  
\ No newline at end of file
diff --git a/js/views/settings_view.js b/js/views/settings_view.js
index 52675463f..5604e8599 100644
--- a/js/views/settings_view.js
+++ b/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);
diff --git a/settings.html b/settings.html
index 24586d0c9..95f834449 100644
--- a/settings.html
+++ b/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>