Fix content tab redirection on campaign creation

frontend/my/src/Campaign.js

@@ -128,9 +128,12 @@ class Editor extends React.PureComponent {
                     modules={ this.quillModules }
                     defaultValue={ this.props.record.body }
                     ref={ (o) => {
-                        if(o) {
+                        if(!o) {
-                            this.setState({ quill: o })
+                            return
                         }
+
+                        this.setState({ quill: o })
+                        document.querySelector(".ql-editor").focus()
                     }}
                     onChange={ () => {
                         if(!this.state.quill) {
@@ -218,10 +221,7 @@ class TheFormDef extends React.PureComponent {
                         message: "Campaign created",
                         description: `"${values["name"]}" created` })
 
-                    this.props.route.history.push(cs.Routes.ViewCampaign.replace(":id", resp.data.data.id))
+                    this.props.route.history.push(cs.Routes.ViewCampaign.replace(":id", resp.data.data.id) + "#content")
-                    this.props.fetchRecord(resp.data.data.id)
-                    this.props.setCurrentTab("content")
-                    this.setState({ loading: false })
                 }).catch(e => {
                     notification["error"]({ placement: cs.MsgPosition, message: "Error", description: e.message })
                     this.setState({ loading: false })
@@ -428,6 +428,11 @@ class Campaign extends React.PureComponent {
         } else {
             this.setState({ loading: false })
         }
+
+        // Content tab?
+        if(document.location.hash === "#content") {
+            this.setCurrentTab("content")
+        }
     }
 
     fetchRecord = (id) => {
@@ -498,22 +503,29 @@ class Campaign extends React.PureComponent {
                         </Spin>
                     </Tabs.TabPane>
                     <Tabs.TabPane tab="Content" disabled={ this.state.record.id ? false : true } key="content">
-                        <Editor { ...this.props }
+                        { this.state.record.id &&
-                            ref={ (e) => {
+                            <div>
-                                // Take the editor's reference and save it in the state
+                                <Editor { ...this.props }
-                                // so that it's insertMedia() function can be passed to <Media />
+                                    ref={ (e) => {
-                                this.setState({ editor: e })
+                                        // Take the editor's reference and save it in the state
-                            }}
+                                        // so that it's insertMedia() function can be passed to <Media />
-                            isSingle={ this.state.record.id ? true : false }
+                                        this.setState({ editor: e })
-                            record={ this.state.record }
+                                    }}
-                            visible={ this.state.editorVisible }
+                                    isSingle={ this.state.record.id ? true : false }
-                            toggleMedia={ this.toggleMedia }
+                                    record={ this.state.record }
-                            setContent={ this.setContent }
+                                    visible={ this.state.editorVisible }
-                            formDisabled={ this.state.formDisabled }
+                                    toggleMedia={ this.toggleMedia }
-                        />
+                                    setContent={ this.setContent }
-                        <div className="content-actions">
+                                    formDisabled={ this.state.formDisabled }
-                            <p><Button icon="search"  onClick={() => this.handlePreview(this.state.record)}>Preview</Button></p>
+                                    />
-                        </div>
+                                <div className="content-actions">
+                                    <p><Button icon="search"  onClick={() => this.handlePreview(this.state.record)}>Preview</Button></p>
+                                </div>
+                            </div>
+                        }
+                        { !this.state.record.id &&
+                            <Spin className="empty-spinner"></Spin>
+                        }
                     </Tabs.TabPane>
                 </Tabs>
 

frontend/my/src/ModalPreview.js

@@ -30,7 +30,7 @@ class ModalPreview extends React.PureComponent {
                 onOk={ this.props.onCancel }>
                 <div className="preview-iframe-container">
                         <Spin className="preview-iframe-spinner"></Spin>
-                        <iframe key="xxxxxxxxx" onLoad={() => {
+                        <iframe key="preview-iframe" onLoad={() => {
                             // If state is used to manage the spinner, it causes
                             // the iframe to re-render and reload everything.
                             // Hack the spinner away from the DOM directly instead.

frontend/my/src/index.css

@@ -40,6 +40,10 @@ hr {
   display: none;
 }
 
+.empty-spinner {
+  padding: 30px !important;
+}
+
 /* Layout */
 body {
   margin: 0;