Style Guide: Additional message examples, a few fixes to enable

js/models/messages.js

@@ -207,12 +207,12 @@
       return ConversationController.getUnsafe(this.get('conversationId'));
     },
     getExpirationTimerUpdateSource() {
-      if (this.isExpirationTimerUpdate()) {
-        const conversationId = this.get('expirationTimerUpdate').source;
-        return ConversationController.getOrCreate(conversationId, 'private');
+      if (!this.isExpirationTimerUpdate()) {
+        throw new Error('Message is not a timer update!');
       }
 
-      return Promise.resolve();
+      const conversationId = this.get('expirationTimerUpdate').source;
+      return ConversationController.getOrCreate(conversationId, 'private');
     },
     getContact() {
       let conversationId = this.get('source');

js/views/message_view.js

@@ -45,8 +45,10 @@
     tagName: 'span',
     className: 'some-failed',
     templateName: 'some-failed',
-    render_attributes: {
-      someFailed: i18n('someRecipientsFailed'),
+    render_attributes() {
+      return {
+        someFailed: i18n('someRecipientsFailed'),
+      };
     },
   });
   const TimerView = Whisper.View.extend({

test/styleguide/legacy_bridge.js

@@ -35,6 +35,14 @@ window.Signal.Migrations = {
       next();
     },
     version: 1,
+  }, {
+    migrate: (transaction, next) => {
+      console.log('migration version 2');
+      const messages = transaction.db.createObjectStore('messages');
+      messages.createIndex('expires_at', 'expireTimer', { unique: false });
+      next();
+    },
+    version: 2,
   }],
   loadAttachmentData: attachment => Promise.resolve(attachment),
 };

test/styleguide/legacy_templates.js

@@ -63,4 +63,11 @@ window.Whisper.View.Templates = {
       <div class='fileSize'>{{ fileSize }}</div>
     </div>
   `,
+  'error-icon': `
+    <span class='error-icon'>
+    </span>
+    {{ #message }}
+      <span class='error-message'>{{message}}</span>
+    {{ /message }}
+  `,
 };

ts/components/conversation/Message.md

@@ -40,7 +40,7 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: 'How are you doing this fine day?',
-  sent_at: Date.now() - 18000,
+  sent_at: Date.now() - 200000,
 });
 const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   source: '+12025550003',
@@ -59,6 +59,239 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
+### With an error
+
+#### General error
+
+```jsx
+const error = new Error('Something went wrong!');
+
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: "This message won't get through...",
+  sent_at: Date.now() - 200000,
+  errors: [error],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+  body: null,
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+#### Network error (outgoing only)
+
+```jsx
+const error = new Error('Something went wrong!');
+error.name = 'MessageError';
+
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  sent_at: Date.now() - 200000,
+  errors: [error],
+  body: "This message won't get through...",
+});
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme} type="group" >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+#### Network error, partial send in group (outgoing only)
+
+```jsx
+const error = new Error('Something went wrong!');
+error.name = 'MessageError';
+
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  sent_at: Date.now() - 200000,
+  errors: [error],
+  conversationId: util.groupNumber,
+  body: "This message won't get through...",
+});
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme} type="group" >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Disappearing
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  sent_at: Date.now() - 200000,
+  expireTimer: 120,
+  expirationStartTimestamp: Date.now() - 1000,
+  body: 'This message will self-destruct in two minutes',
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+}));
+
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme} >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+### Notfications
+
+#### Timer change
+
+```jsx
+const fromOther = new Whisper.Message({
+  type: 'incoming',
+  flags: textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE,
+  source: '+12025550003',
+  sent_at: Date.now() - 200000,
+  expireTimer: 120,
+  expirationStartTimestamp: Date.now() - 1000,
+  expirationTimerUpdate: {
+    source: '+12025550003',
+  }
+});
+const fromUpdate = new Whisper.Message({
+  type: 'incoming',
+  flags: textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE,
+  source: util.ourNumber,
+  sent_at: Date.now() - 200000,
+  expireTimer: 120,
+  expirationStartTimestamp: Date.now() - 1000,
+  expirationTimerUpdate: {
+    fromSync: true,
+    source: util.ourNumber,
+  }
+});
+const fromMe = new Whisper.Message({
+  type: 'incoming',
+  flags: textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE,
+  source: util.ourNumber,
+  sent_at: Date.now() - 200000,
+  expireTimer: 120,
+  expirationStartTimestamp: Date.now() - 1000,
+  expirationTimerUpdate: {
+    source: util.ourNumber,
+  }
+});
+const View = Whisper.ExpirationTimerUpdateView;
+<util.ConversationContext theme={util.theme} >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: fromOther }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: fromUpdate }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: fromMe }}
+  />
+</util.ConversationContext>
+```
+
+#### Safety number change
+
+```js
+const incoming = new Whisper.Message({
+  type: 'keychange',
+  sent_at: Date.now() - 200000,
+  key_changed: '+12025550003',
+});
+const View = Whisper.KeyChangeView;
+<util.ConversationContext theme={util.theme} >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+</util.ConversationContext>
+```
+
+#### Marking as verified
+
+```js
+const fromPrimary = new Whisper.Message({
+  type: 'verified-change',
+  sent_at: Date.now() - 200000,
+  verifiedChanged: '+12025550003',
+  verified: true,
+});
+const local = new Whisper.Message({
+  type: 'verified-change',
+  sent_at: Date.now() - 200000,
+  verifiedChanged: '+12025550003',
+  local: true,
+  verified: true,
+});
+
+const View = Whisper.VerifiedChangeView;
+<util.ConversationContext theme={util.theme} >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: fromPrimary }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: local }}
+  />
+</util.ConversationContext>
+```
+
+#### Marking as not verified
+
+```js
+const fromPrimary = new Whisper.Message({
+  type: 'verified-change',
+  sent_at: Date.now() - 200000,
+  verifiedChanged: '+12025550003',
+});
+const local = new Whisper.Message({
+  type: 'verified-change',
+  sent_at: Date.now() - 200000,
+  verifiedChanged: '+12025550003',
+  local: true,
+});
+
+const View = Whisper.VerifiedChangeView;
+<util.ConversationContext theme={util.theme} >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: fromPrimary }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: local }}
+  />
+</util.ConversationContext>
+```
+
 ### With an attachment
 
 #### Image with caption

ts/styleguide/StyleGuideUtil.ts

@@ -66,6 +66,8 @@ function makeObjectUrl(data: ArrayBuffer, contentType: string): string {
 }
 
 const ourNumber = '+12025559999';
+const groupNumber = '+12025550099';
+
 
 export {
   mp3,
@@ -87,6 +89,7 @@ export {
   portraitTeal,
   portraitTealObjectUrl,
   ourNumber,
+  groupNumber,
 };
 
 
@@ -180,10 +183,22 @@ const me = parent.ConversationController.dangerouslyCreateAndAdd({
   color: 'light_blue',
 });
 
+const group = parent.ConversationController.dangerouslyCreateAndAdd({
+  id: groupNumber,
+  name: 'A place for sharing cats',
+  type: 'group',
+});
+
+group.contactCollection.add(me);
+group.contactCollection.add(CONTACTS[0]);
+group.contactCollection.add(CONTACTS[1]);
+group.contactCollection.add(CONTACTS[2]);
+
 export {
   COLORS,
   CONTACTS,
   me,
+  group,
 };
 
 parent.textsecure.storage.user.getNumber = () => ourNumber;