Rename test-only MessageParents to ConversationContext

js/react/conversation/Message.md

@@ -1,6 +1,6 @@
 
 ```jsx
-<util.MessageParents theme={util.theme}>
+<util.ConversationContext theme={util.theme}>
   <Message />
-</util.MessageParents>
+</util.ConversationContext>
 ```

js/react/util/BackboneWrapper.md

@@ -1,4 +1,4 @@
-Rendering a real `Whisper.MessageView` using `<util.MessageParents />` and
+Rendering a real `Whisper.MessageView` using `<util.ConversationContextProvider />` and
 `<util.BackboneWrapper />`.
 
 ```jsx
@@ -11,10 +11,10 @@ const View = Whisper.MessageView;
 const options = {
   model,
 };
-<util.MessageParents theme={util.theme}>
+<util.ConversationContext theme={util.theme}>
   <util.BackboneWrapper
     View={View}
     options={options}
   />
-</util.MessageParents>
+</util.ConversationContext>
 ```

js/react/util/BackboneWrapper.tsx

@@ -22,24 +22,28 @@ interface BackboneViewConstructor {
  * while we slowly replace the internals of a given Backbone view with React.
  */
 export class BackboneWrapper extends React.Component<Props, {}> {
-  protected el: Element | null;
+  protected el: Element | null = null;
-  protected view: BackboneView | null;
+  protected view: BackboneView | null = null;
-  protected setEl: (element: HTMLDivElement | null) => void;
 
-  constructor(props: Props) {
+  public componentWillUnmount() {
-    super(props);
+    this.teardown();
+  }
 
-    this.el = null;
+  public shouldComponentUpdate() {
-    this.view = null;
+    // we're handling all updates manually
+    return false;
+  }
+
+  public render() {
+    return <div ref={this.setEl} />;
+  }
 
-    this.setEl = (element: HTMLDivElement | null) => {
+  protected setEl = (element: HTMLDivElement | null) => {
-      this.el = element;
+    this.el = element;
-      this.setup();
+    this.setup();
-    };
-    this.setup = this.setup.bind(this);
   }
 
-  public setup() {
+  protected setup = () => {
     const { el } = this;
     const { View, options } = this.props;
 
@@ -54,7 +58,7 @@ export class BackboneWrapper extends React.Component<Props, {}> {
     el.appendChild(this.view.el);
   }
 
-  public teardown() {
+  protected teardown() {
     if (!this.view) {
       return;
     }
@@ -62,17 +66,4 @@ export class BackboneWrapper extends React.Component<Props, {}> {
     this.view.remove();
     this.view = null;
   }
-
-  public componentWillUnmount() {
-    this.teardown();
-  }
-
-  public shouldComponentUpdate() {
-    // we're handling all updates manually
-    return false;
-  }
-
-  public render() {
-    return <div ref={this.setEl} />;
-  }
 }

js/react/util/ConversationContext.md

@@ -0,0 +1,8 @@
+
+The simplest example of using the `<ConversationContext />` component:
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <div>Just a plain bit of text</div>
+</util.ConversationContext>
+```

js/react/util/ConversationContext.tsx

@@ -12,7 +12,7 @@ interface Props {
  * Provides the parent elements necessary to allow the main Signal Desktop stylesheet to
  * apply (with no changes) to messages in this context.
  */
-export class MessageParents extends React.Component<Props, {}> {
+export class ConversationContext extends React.Component<Props, {}> {
   public render() {
     const { theme } = this.props;
 

js/react/util/MessageParents.md

@@ -1,8 +0,0 @@
-
-The simplest example of using the `<MessagesParents />` component:
-
-```jsx
-<util.MessageParents theme={util.theme}>
-  <div>Just a plain bit of text</div>
-</util.MessageParents>
-```

js/react/util/index.ts

@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 // Helper components used in the styleguide, exposed at 'util' in the global scope via the
 //   context option in react-styleguidist.
 
-export { MessageParents } from './MessageParents';
+export { ConversationContext } from './ConversationContext';
 export { BackboneWrapper } from './BackboneWrapper';
 
 // Here we can make things inside Webpack available to Backbone views like preload.js.