From 94842372fe2b099bd7b7dbbda843d2c546292a00 Mon Sep 17 00:00:00 2001
From: Victor Kotseruba <victor@tutorme.com>
Date: Thu, 14 Mar 2019 17:45:01 +0300
Subject: [PATCH] fix iframe, version 0.2.1

---
 django_happymailer/settings.py |  3 +--
 happymailer/src/App.js         | 12 +++++-----
 happymailer/src/Form.js        | 10 +++++---
 happymailer/src/Notify.js      |  4 ++--
 happymailer/src/Preview.js     | 44 ++++++++++++++++++++++++----------
 setup.py                       |  2 +-
 6 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/django_happymailer/settings.py b/django_happymailer/settings.py
index c36dda3..9b446e9 100644
--- a/django_happymailer/settings.py
+++ b/django_happymailer/settings.py
@@ -40,13 +40,12 @@
     'dummy2'
 ]
 
-MIDDLEWARE_CLASSES = [
+MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
-    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
diff --git a/happymailer/src/App.js b/happymailer/src/App.js
index bdcd73a..d52c736 100644
--- a/happymailer/src/App.js
+++ b/happymailer/src/App.js
@@ -68,7 +68,7 @@ export default class App extends Component {
     });
   }
 
-  async preview(sendTest=false) {
+  preview = async (sendTest=false) => {
       const { template } = this.state;
       const { previewUrl } = this.props;
       let { variables } = this.state;
@@ -96,7 +96,7 @@ export default class App extends Component {
       }
   }
 
-  async save(redirect=true) {
+  save = async (redirect=true) => {
       const { changeUrl, changelistUrl } = this.props;
       const { template } = this.state;
 
@@ -116,7 +116,7 @@ export default class App extends Component {
       }
   }
 
-  async loadVersion(versionId) {
+  loadVersion = async (versionId) => {
     const { changelistUrl } = this.props;
     const { template } = this.state;
     const url = changelistUrl + `${template.pk}/version/${versionId}/`;
@@ -140,9 +140,9 @@ export default class App extends Component {
     const links = Link.state(this, 'template').pick('layout', 'enabled', 'subject', 'body');
 
     const actions = {
-      save: ::this.save,
-      preview: ::this.preview,
-      loadVersion: ::this.loadVersion
+      save: this.save,
+      preview: this.preview,
+      loadVersion: this.loadVersion,
     };
 
     return (
diff --git a/happymailer/src/Form.js b/happymailer/src/Form.js
index 61f6d80..b81ce4f 100644
--- a/happymailer/src/Form.js
+++ b/happymailer/src/Form.js
@@ -61,9 +61,11 @@ export default class Form extends Component {
           <div>{template}</div>
         </Row>
         <Row label='Version'>
-          <div className={styles.error}>{errors.version}</div>
+          {errors &&
+            <div className={styles.error}>{errors.version}</div>
+          }
           <Select value={this.state.version}
-                  onChange={value => ::this.setVersion(value.value)}
+                  onChange={value => this.setVersion(value.value)}
                   clearable={false}
                   options={window.happymailerConfig.history} />
         </Row>
@@ -91,7 +93,9 @@ export default class Form extends Component {
         </Row>
 
         <Row label='Body'>
-          <div className={styles.error}>{errors.template}</div>
+          {errors &&
+            <div className={styles.error}>{errors.template}</div>
+          }
           <Codemirror mode='mjml' valueLink={links.body}/>
         </Row>
 
diff --git a/happymailer/src/Notify.js b/happymailer/src/Notify.js
index 205cc06..57e81bd 100644
--- a/happymailer/src/Notify.js
+++ b/happymailer/src/Notify.js
@@ -38,7 +38,7 @@ export default class Notify extends Component {
         }, duration);
     }
     
-    hideNotification(key) {
+    hideNotification = (key) => {
         console.log('hide: ', key);
         delete this.state[key];
         this.setState(this.state);
@@ -49,7 +49,7 @@ export default class Notify extends Component {
         return (
           <div className={styles.container}>
             {keys.map((key) =>
-              <Item id={key} key={key} hideNotification={::this.hideNotification} {...this.state[key]} />
+              <Item id={key} key={key} hideNotification={this.hideNotification} {...this.state[key]} />
             )}    
           </div>  
         );
diff --git a/happymailer/src/Preview.js b/happymailer/src/Preview.js
index ba1c167..69fff01 100644
--- a/happymailer/src/Preview.js
+++ b/happymailer/src/Preview.js
@@ -1,14 +1,34 @@
 import React from 'react';
 
-const Preview = ({html, iframeKey})=> (
-  <div className={styles.root}>
-    <div className={styles.iphone5}>
-      <iframe seamless
-              key={iframeKey}
-              src={`data:text/html;charset=utf-8,${html}`}
-              className={styles.frame}/>
-    </div>
-  </div>
-);
-
-export default Preview;
+export default class Preview extends React.PureComponent {
+
+  componentDidMount() {
+    this.setIframeContent();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.html !== this.props.html) {
+      this.setIframeContent();
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <div className={styles.iphone5}>
+          <iframe
+            src="about:blank"
+            ref="iframe"
+            className={styles.frame}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  setIframeContent() {
+    this.refs.iframe.contentDocument.write(this.props.html);
+    this.refs.iframe.contentDocument.close();
+  }
+
+}
diff --git a/setup.py b/setup.py
index 2979e09..93fff3a 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@
 
 setup(
     name='django-happymailer',
-    version='0.2.0',
+    version='0.2.1',
     description='django email templates manager',
     author='Victor Kotcheruba',
     author_email='barbuzaster@gmail.com',