From 7dea9bf315c6402ace78f06352240224cd68bf8b Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Mon, 25 Sep 2017 17:53:40 -0400
Subject: [PATCH 1/9] fix for #206, add scroll to author & article pages

---
 src/components/editor/EditorArticleController.jsx   | 13 ++++++++++++-
 .../editor/EditorArticleListController.jsx          |  4 ++--
 src/components/editor/EditorAuthorController.jsx    | 13 ++++++++++++-
 .../editor/EditorAuthorListController.jsx           |  2 +-
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index add5e13f..c42a1268 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -119,6 +119,17 @@ export default class EditorArticleController extends FalcorController {
       // The update wasn't due to a change in article
       this.debouncedHandleFormStateChanges();
     }
+    // scroll to article editor once page loads
+    const { hash } = window.location;
+    if (hash) {
+      setTimeout(() => {
+        const id = hash.replace('#', '');
+        const element = document.getElementById(id);
+        if (element) {
+          element.scrollIntoView();
+        }
+      }, 0);
+    }
   }
 
   handleSaveChanges(event) {
@@ -349,7 +360,7 @@ export default class EditorArticleController extends FalcorController {
       }
 
       return (
-        <div style={styles.innerPaper}>
+        <div style={styles.innerPaper} id="article-editor">
           <h2>Article Editor: {article.title}</h2>
           <Divider />
           <TextField
diff --git a/src/components/editor/EditorArticleListController.jsx b/src/components/editor/EditorArticleListController.jsx
index 8a1fa10a..97504a87 100644
--- a/src/components/editor/EditorArticleListController.jsx
+++ b/src/components/editor/EditorArticleListController.jsx
@@ -65,14 +65,14 @@ export default class EditorArticleListController extends FalcorController {
 
   clickSearchSuggestion(article) {
     const page = this.props.params.page;
-    const path = `/articles/page/${page}/slug/${article.slug}`;
+    const path = `/articles/page/${page}/slug/${article.slug}#article-editor`;
     browserHistory.push(path);
   }
 
   createListElement(article) {
     const page = this.props.params.page;
     return (
-      <Link to={`/articles/page/${page}/slug/${article.slug}`} key={article.slug}>
+      <Link to={`/articles/page/${page}/slug/${article.slug}#article-editor`} key={article.slug}>
         <ListItem
           primaryText={article.title}
           secondaryText={
diff --git a/src/components/editor/EditorAuthorController.jsx b/src/components/editor/EditorAuthorController.jsx
index ff059295..9d94e286 100644
--- a/src/components/editor/EditorAuthorController.jsx
+++ b/src/components/editor/EditorAuthorController.jsx
@@ -127,6 +127,17 @@ export default class EditorAuthorController extends FalcorController {
       // The update wasn't due to a change in article
       this.debouncedHandleFormStateChanges();
     }
+    // scroll to author profile once page loads
+    const { hash } = window.location;
+    if (hash) {
+      setTimeout(() => {
+        const id = hash.replace('#', '');
+        const element = document.getElementById(id);
+        if (element) {
+          element.scrollIntoView();
+        }
+      }, 0);
+    }
   }
 
   handleSaveChanges(event) {
@@ -245,7 +256,7 @@ export default class EditorAuthorController extends FalcorController {
       }
 
       return (
-        <div style={styles.authorProfile}>
+        <div style={styles.authorProfile} id="author-profile">
           <h3>Author Profile: {this.state.name}</h3>
           <Divider />
           <form onSubmit={this.handleSaveChanges}>
diff --git a/src/components/editor/EditorAuthorListController.jsx b/src/components/editor/EditorAuthorListController.jsx
index 2bd04447..872d6ae3 100644
--- a/src/components/editor/EditorAuthorListController.jsx
+++ b/src/components/editor/EditorAuthorListController.jsx
@@ -60,7 +60,7 @@ export default class EditorAuthorListController extends FalcorController {
   }
 
   handleClickAuthor(author) {
-    browserHistory.push(`/authors/${author.slug}`);
+    browserHistory.push(`/authors/${author.slug}#author-profile`);
   }
 
   handleCreateAuthorChange() {

From d3498a1028b85085b60b6e1b8e596793e60b245f Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Mon, 25 Sep 2017 23:50:40 -0400
Subject: [PATCH 2/9] move hash scroll to admin-client.js, add support for
 Issues page

---
 src/client-scripts/admin-client.js             | 18 ++++++++++++++++++
 .../editor/EditorArticleController.jsx         | 11 -----------
 .../editor/EditorAuthorController.jsx          | 11 -----------
 .../editor/EditorIssueListController.jsx       | 10 +++++-----
 4 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/client-scripts/admin-client.js b/src/client-scripts/admin-client.js
index b53a9cd9..9dec7836 100644
--- a/src/client-scripts/admin-client.js
+++ b/src/client-scripts/admin-client.js
@@ -13,10 +13,28 @@ const clientModel = new falcor.Model({
   source: new HttpDataSource('/model.json'),
 });
 
+function hashLinkScroll(retryCount = 0, retryLimit = 200) {
+  // scroll to the hash location once page loads,
+  // if element is not rendered yet, try again in 100ms
+  const { hash } = window.location;
+  if (hash) {
+    window.requestAnimationFrame(() => {
+      const id = hash.replace('#', '');
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollIntoView();
+      } else if (retryCount < retryLimit) {
+        setTimeout(hashLinkScroll(retryCount + 1), 100);
+      }
+    }, 0);
+  }
+}
+
 ReactDOM.render(
   <Router
     history={browserHistory}
     routes={routes}
     createElement={injectModelCreateElement(clientModel)}
+    onUpdate={hashLinkScroll}
   />,
 document.getElementById('main'));
diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index c42a1268..0e888eb4 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -119,17 +119,6 @@ export default class EditorArticleController extends FalcorController {
       // The update wasn't due to a change in article
       this.debouncedHandleFormStateChanges();
     }
-    // scroll to article editor once page loads
-    const { hash } = window.location;
-    if (hash) {
-      setTimeout(() => {
-        const id = hash.replace('#', '');
-        const element = document.getElementById(id);
-        if (element) {
-          element.scrollIntoView();
-        }
-      }, 0);
-    }
   }
 
   handleSaveChanges(event) {
diff --git a/src/components/editor/EditorAuthorController.jsx b/src/components/editor/EditorAuthorController.jsx
index 9d94e286..29da3b77 100644
--- a/src/components/editor/EditorAuthorController.jsx
+++ b/src/components/editor/EditorAuthorController.jsx
@@ -127,17 +127,6 @@ export default class EditorAuthorController extends FalcorController {
       // The update wasn't due to a change in article
       this.debouncedHandleFormStateChanges();
     }
-    // scroll to author profile once page loads
-    const { hash } = window.location;
-    if (hash) {
-      setTimeout(() => {
-        const id = hash.replace('#', '');
-        const element = document.getElementById(id);
-        if (element) {
-          element.scrollIntoView();
-        }
-      }, 0);
-    }
   }
 
   handleSaveChanges(event) {
diff --git a/src/components/editor/EditorIssueListController.jsx b/src/components/editor/EditorIssueListController.jsx
index d0423e89..bc66393b 100644
--- a/src/components/editor/EditorIssueListController.jsx
+++ b/src/components/editor/EditorIssueListController.jsx
@@ -82,7 +82,7 @@ export default class EditorIssueListController extends FalcorController {
       if (issueNumber === 'none') {
         browserHistory.push('/issues');
       } else {
-        browserHistory.push(`/issues/${issueNumber}/main`);
+        browserHistory.push(`/issues/${issueNumber}/main#issue-editor`);
       }
     }
   }
@@ -227,7 +227,7 @@ export default class EditorIssueListController extends FalcorController {
               </Tab>
             </Tabs>
           </Paper>
-          <Paper style={styles.paper} zDepth={2}>
+          <Paper id="issue-editor" style={styles.paper} zDepth={2}>
             {
               currentIssueNumber ?
                 <div>
@@ -236,19 +236,19 @@ export default class EditorIssueListController extends FalcorController {
                       label="MAIN"
                       value="main"
                       icon={<Home />}
-                      containerElement={<Link to={`${baseUrl}/main`} />}
+                      containerElement={<Link to={`${baseUrl}/main#issue-editor`} />}
                     />
                     <Tab
                       label="ARTICLES"
                       value="articles"
                       icon={<Description />}
-                      containerElement={<Link to={`${baseUrl}/articles`} />}
+                      containerElement={<Link to={`${baseUrl}/articles#issue-editor`} />}
                     />
                     <Tab
                       label="CATEGORIES"
                       value="categories"
                       icon={<Reorder />}
-                      containerElement={<Link to={`${baseUrl}/categories`} />}
+                      containerElement={<Link to={`${baseUrl}/categories#issue-editor`} />}
                     />
                   </Tabs>
                   <div style={styles.tabs}>

From 477d011da67eb70d65f3796beaa78e6e73d105c5 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Wed, 27 Sep 2017 14:36:44 -0400
Subject: [PATCH 3/9] revert to 17c8d7a, cancel the scroll fix

---
 src/client-scripts/admin-client.js             | 18 ------------------
 .../editor/EditorArticleController.jsx         |  2 +-
 .../editor/EditorArticleListController.jsx     |  4 ++--
 .../editor/EditorAuthorController.jsx          |  2 +-
 .../editor/EditorAuthorListController.jsx      |  2 +-
 .../editor/EditorIssueListController.jsx       | 10 +++++-----
 6 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/src/client-scripts/admin-client.js b/src/client-scripts/admin-client.js
index 9dec7836..b53a9cd9 100644
--- a/src/client-scripts/admin-client.js
+++ b/src/client-scripts/admin-client.js
@@ -13,28 +13,10 @@ const clientModel = new falcor.Model({
   source: new HttpDataSource('/model.json'),
 });
 
-function hashLinkScroll(retryCount = 0, retryLimit = 200) {
-  // scroll to the hash location once page loads,
-  // if element is not rendered yet, try again in 100ms
-  const { hash } = window.location;
-  if (hash) {
-    window.requestAnimationFrame(() => {
-      const id = hash.replace('#', '');
-      const element = document.getElementById(id);
-      if (element) {
-        element.scrollIntoView();
-      } else if (retryCount < retryLimit) {
-        setTimeout(hashLinkScroll(retryCount + 1), 100);
-      }
-    }, 0);
-  }
-}
-
 ReactDOM.render(
   <Router
     history={browserHistory}
     routes={routes}
     createElement={injectModelCreateElement(clientModel)}
-    onUpdate={hashLinkScroll}
   />,
 document.getElementById('main'));
diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index 0e888eb4..add5e13f 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -349,7 +349,7 @@ export default class EditorArticleController extends FalcorController {
       }
 
       return (
-        <div style={styles.innerPaper} id="article-editor">
+        <div style={styles.innerPaper}>
           <h2>Article Editor: {article.title}</h2>
           <Divider />
           <TextField
diff --git a/src/components/editor/EditorArticleListController.jsx b/src/components/editor/EditorArticleListController.jsx
index 97504a87..8a1fa10a 100644
--- a/src/components/editor/EditorArticleListController.jsx
+++ b/src/components/editor/EditorArticleListController.jsx
@@ -65,14 +65,14 @@ export default class EditorArticleListController extends FalcorController {
 
   clickSearchSuggestion(article) {
     const page = this.props.params.page;
-    const path = `/articles/page/${page}/slug/${article.slug}#article-editor`;
+    const path = `/articles/page/${page}/slug/${article.slug}`;
     browserHistory.push(path);
   }
 
   createListElement(article) {
     const page = this.props.params.page;
     return (
-      <Link to={`/articles/page/${page}/slug/${article.slug}#article-editor`} key={article.slug}>
+      <Link to={`/articles/page/${page}/slug/${article.slug}`} key={article.slug}>
         <ListItem
           primaryText={article.title}
           secondaryText={
diff --git a/src/components/editor/EditorAuthorController.jsx b/src/components/editor/EditorAuthorController.jsx
index 29da3b77..ff059295 100644
--- a/src/components/editor/EditorAuthorController.jsx
+++ b/src/components/editor/EditorAuthorController.jsx
@@ -245,7 +245,7 @@ export default class EditorAuthorController extends FalcorController {
       }
 
       return (
-        <div style={styles.authorProfile} id="author-profile">
+        <div style={styles.authorProfile}>
           <h3>Author Profile: {this.state.name}</h3>
           <Divider />
           <form onSubmit={this.handleSaveChanges}>
diff --git a/src/components/editor/EditorAuthorListController.jsx b/src/components/editor/EditorAuthorListController.jsx
index 872d6ae3..2bd04447 100644
--- a/src/components/editor/EditorAuthorListController.jsx
+++ b/src/components/editor/EditorAuthorListController.jsx
@@ -60,7 +60,7 @@ export default class EditorAuthorListController extends FalcorController {
   }
 
   handleClickAuthor(author) {
-    browserHistory.push(`/authors/${author.slug}#author-profile`);
+    browserHistory.push(`/authors/${author.slug}`);
   }
 
   handleCreateAuthorChange() {
diff --git a/src/components/editor/EditorIssueListController.jsx b/src/components/editor/EditorIssueListController.jsx
index bc66393b..d0423e89 100644
--- a/src/components/editor/EditorIssueListController.jsx
+++ b/src/components/editor/EditorIssueListController.jsx
@@ -82,7 +82,7 @@ export default class EditorIssueListController extends FalcorController {
       if (issueNumber === 'none') {
         browserHistory.push('/issues');
       } else {
-        browserHistory.push(`/issues/${issueNumber}/main#issue-editor`);
+        browserHistory.push(`/issues/${issueNumber}/main`);
       }
     }
   }
@@ -227,7 +227,7 @@ export default class EditorIssueListController extends FalcorController {
               </Tab>
             </Tabs>
           </Paper>
-          <Paper id="issue-editor" style={styles.paper} zDepth={2}>
+          <Paper style={styles.paper} zDepth={2}>
             {
               currentIssueNumber ?
                 <div>
@@ -236,19 +236,19 @@ export default class EditorIssueListController extends FalcorController {
                       label="MAIN"
                       value="main"
                       icon={<Home />}
-                      containerElement={<Link to={`${baseUrl}/main#issue-editor`} />}
+                      containerElement={<Link to={`${baseUrl}/main`} />}
                     />
                     <Tab
                       label="ARTICLES"
                       value="articles"
                       icon={<Description />}
-                      containerElement={<Link to={`${baseUrl}/articles#issue-editor`} />}
+                      containerElement={<Link to={`${baseUrl}/articles`} />}
                     />
                     <Tab
                       label="CATEGORIES"
                       value="categories"
                       icon={<Reorder />}
-                      containerElement={<Link to={`${baseUrl}/categories#issue-editor`} />}
+                      containerElement={<Link to={`${baseUrl}/categories`} />}
                     />
                   </Tabs>
                   <div style={styles.tabs}>

From 6c19b951d1c33f7eaa9cd63efae435e85a617f6f Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Wed, 27 Sep 2017 16:17:44 -0400
Subject: [PATCH 4/9] add material ui Dialog to admin articles page

---
 .../editor/EditorArticleController.jsx        | 178 ++++++++++--------
 1 file changed, 100 insertions(+), 78 deletions(-)

diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index add5e13f..18be1ad9 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -8,6 +8,7 @@ import moment from 'moment';
 import { updateFieldValue } from 'components/editor/lib/form-field-updaters';
 
 // material-ui
+import Dialog from 'material-ui/Dialog';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
 import Divider from 'material-ui/Divider';
@@ -21,6 +22,7 @@ const MAX_TEASER_LENGTH = 156;
 export default class EditorArticleController extends FalcorController {
   constructor(props) {
     super(props);
+    this.handleDialogClose = this.handleDialogClose.bind(this);
     this.isFormChanged = this.isFormChanged.bind(this);
     this.handleSaveChanges = this.handleSaveChanges.bind(this);
     this.handleAddAuthor = this.handleAddAuthor.bind(this);
@@ -36,6 +38,7 @@ export default class EditorArticleController extends FalcorController {
       image: updateFieldValue.bind(this, 'image', undefined),
     };
     this.safeSetState({
+      open: true,
       changed: false,
       saving: false,
       authors: [],
@@ -92,6 +95,7 @@ export default class EditorArticleController extends FalcorController {
     super.componentWillReceiveProps(nextProps, undefined, falcorCallback);
 
     this.safeSetState({
+      open: true,
       changed: false,
       saving: false,
       authors: [],
@@ -121,6 +125,10 @@ export default class EditorArticleController extends FalcorController {
     }
   }
 
+  handleDialogClose() {
+    this.safeSetState({ open: false });
+  }
+
   handleSaveChanges(event) {
     event.preventDefault();
 
@@ -348,93 +356,107 @@ export default class EditorArticleController extends FalcorController {
         }
       }
 
+      // Dialog action button
+      const actions = [
+        <RaisedButton
+          label={changedStateMessage}
+          primary
+          style={styles.buttons}
+          type="submit"
+          onClick={this.handleDialogClose}
+          disabled={!this.state.changed || this.state.saving}
+        />,
+      ];
+
       return (
         <div style={styles.innerPaper}>
-          <h2>Article Editor: {article.title}</h2>
-          <Divider />
-          <TextField
-            disabled
-            defaultValue={article.title}
-            floatingLabelText="Title"
-            fullWidth
-          />
-          <form
-            onSubmit={this.handleSaveChanges}
+          <Dialog
+            title="Article Editor"
+            actions={actions}
+            open={this.state.open}
+            modal={false}
+            autoScrollBodyContent={true}
+            onRequestClose={this.handleDialogClose}
           >
-            <SelectField
-              floatingLabelText="Category"
-              maxHeight={400}
-              value={this.state.category}
-              onChange={this.fieldUpdaters.category}
-              disabled={this.state.saving}
-              autoWidth={false}
-              style={{ width: 200 }}
-            >
-              {
-                _.map(categories, category => (
-                  <MenuItem
-                    value={category.slug}
-                    key={category.slug}
-                    primaryText={category.name}
-                  />
-                ))
-              }
-            </SelectField>
+            <h2>{article.title}</h2>
+            <Divider />
             <TextField
-              name="image"
-              value={this.state.image}
-              floatingLabelText="Image (Remember to use https:// not http://)"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.image}
+              disabled
+              defaultValue={article.title}
+              floatingLabelText="Title"
               fullWidth
-            /><br />
-            <TextField
-              name="teaser"
-              floatingLabelText={
-                `Teaser (${this.state.teaser.length} of ${MAX_TEASER_LENGTH} characters)`
-              }
-              value={this.state.teaser}
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.teaser}
-              multiLine
-              rows={2}
-              fullWidth
-            /><br />
-            <EditAuthorsForm
-              authors={this.state.authors}
-              onChange={this.debouncedHandleFormStateChanges}
-              handleAddAuthor={this.handleAddAuthor}
-              handleDeleteAuthor={this.handleDeleteAuthor}
-              model={this.props.model}
-              disabled={this.state.saving}
             />
+            <form
+              onSubmit={this.handleSaveChanges}
+            >
+              <SelectField
+                floatingLabelText="Category"
+                maxHeight={400}
+                value={this.state.category}
+                onChange={this.fieldUpdaters.category}
+                disabled={this.state.saving}
+                autoWidth={false}
+                style={{ width: 200 }}
+              >
+                {
+                  _.map(categories, category => (
+                    <MenuItem
+                      value={category.slug}
+                      key={category.slug}
+                      primaryText={category.name}
+                    />
+                  ))
+                }
+              </SelectField>
+              <TextField
+                name="image"
+                value={this.state.image}
+                floatingLabelText="Image (Remember to use https:// not http://)"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.image}
+                fullWidth
+              /><br />
+              <TextField
+                name="teaser"
+                floatingLabelText={
+                  `Teaser (${this.state.teaser.length} of ${MAX_TEASER_LENGTH} characters)`
+                }
+                value={this.state.teaser}
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.teaser}
+                multiLine
+                rows={2}
+                fullWidth
+              /><br />
+              <EditAuthorsForm
+                authors={this.state.authors}
+                onChange={this.debouncedHandleFormStateChanges}
+                handleAddAuthor={this.handleAddAuthor}
+                handleDeleteAuthor={this.handleDeleteAuthor}
+                model={this.props.model}
+                disabled={this.state.saving}
+              />
+            </form>
+            <br />
+            <Divider />
+            <br />
+            {
+              article.published_at
+                ? `This article was published on ${
+                    moment(article.published_at).format('MMMM DD, YYYY')
+                  }.`
+                : 'The article has yet to be published. It will be published automatically ' +
+                  'when you publish the issue that contains it.'
+            } <br />
             <RaisedButton
-              label={changedStateMessage}
-              primary
+              label="Unpublish Article"
+              secondary
               style={styles.buttons}
-              type="submit"
-              disabled={!this.state.changed || this.state.saving}
+              disabled={!article.published_at}
+              onClick={this.unpublish}
+              icon={<Warning />}
             />
-          </form>
-          <br />
-          <Divider />
-          <br />
-          {
-            article.published_at
-              ? `This article was published on ${
-                  moment(article.published_at).format('MMMM DD, YYYY')
-                }.`
-              : 'The article has yet to be published. It will be published automatically ' +
-                'when you publish the issue that contains it.'
-          } <br />
-          <RaisedButton
-            label="Unpublish Article"
-            secondary
-            style={styles.buttons}
-            disabled={!article.published_at}
-            onClick={this.unpublish}
-            icon={<Warning />}
-          />
+          </Dialog>
         </div>
       );
     }

From 804300f0d31b39a07a1704bfdad3fa6d5eb65c80 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Sun, 1 Oct 2017 23:14:20 -0400
Subject: [PATCH 5/9] fix submit issue, enable page redirect in articles page

---
 .../editor/EditorArticleController.jsx        | 188 +++++++++---------
 1 file changed, 92 insertions(+), 96 deletions(-)

diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index 18be1ad9..65643783 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import FalcorController from 'lib/falcor/FalcorController';
+import { browserHistory } from 'react-router';
 import _ from 'lodash';
 import EditAuthorsForm from './EditAuthorsForm';
 import { debounce } from 'lib/utilities';
@@ -95,7 +96,6 @@ export default class EditorArticleController extends FalcorController {
     super.componentWillReceiveProps(nextProps, undefined, falcorCallback);
 
     this.safeSetState({
-      open: true,
       changed: false,
       saving: false,
       authors: [],
@@ -126,7 +126,11 @@ export default class EditorArticleController extends FalcorController {
   }
 
   handleDialogClose() {
-    this.safeSetState({ open: false });
+    if (this.state.saving) return;
+
+    const page = this.props.params.page;
+    const path = `/articles/page/${page}`;
+    browserHistory.push(path);
   }
 
   handleSaveChanges(event) {
@@ -356,108 +360,100 @@ export default class EditorArticleController extends FalcorController {
         }
       }
 
-      // Dialog action button
-      const actions = [
-        <RaisedButton
-          label={changedStateMessage}
-          primary
-          style={styles.buttons}
-          type="submit"
-          onClick={this.handleDialogClose}
-          disabled={!this.state.changed || this.state.saving}
-        />,
-      ];
-
       return (
-        <div style={styles.innerPaper}>
-          <Dialog
-            title="Article Editor"
-            actions={actions}
-            open={this.state.open}
-            modal={false}
-            autoScrollBodyContent={true}
-            onRequestClose={this.handleDialogClose}
+        <Dialog
+          title="Article Editor"
+          open={this.state.open}
+          modal={false}
+          autoScrollBodyContent
+          onRequestClose={this.handleDialogClose}
+        >
+          <h2>{article.title}</h2>
+          <Divider />
+          <TextField
+            disabled
+            defaultValue={article.title}
+            floatingLabelText="Title"
+            fullWidth
+          />
+          <form
+            onSubmit={this.handleSaveChanges}
           >
-            <h2>{article.title}</h2>
-            <Divider />
+            <SelectField
+              floatingLabelText="Category"
+              maxHeight={400}
+              value={this.state.category}
+              onChange={this.fieldUpdaters.category}
+              disabled={this.state.saving}
+              autoWidth={false}
+              style={{ width: 200 }}
+            >
+              {
+                _.map(categories, category => (
+                  <MenuItem
+                    value={category.slug}
+                    key={category.slug}
+                    primaryText={category.name}
+                  />
+                ))
+              }
+            </SelectField>
+            <TextField
+              name="image"
+              value={this.state.image}
+              floatingLabelText="Image (Remember to use https:// not http://)"
+              disabled={this.state.saving}
+              onChange={this.fieldUpdaters.image}
+              fullWidth
+            /><br />
             <TextField
-              disabled
-              defaultValue={article.title}
-              floatingLabelText="Title"
+              name="teaser"
+              floatingLabelText={
+                `Teaser (${this.state.teaser.length} of ${MAX_TEASER_LENGTH} characters)`
+              }
+              value={this.state.teaser}
+              disabled={this.state.saving}
+              onChange={this.fieldUpdaters.teaser}
+              multiLine
+              rows={2}
               fullWidth
+            /><br />
+            <EditAuthorsForm
+              authors={this.state.authors}
+              onChange={this.debouncedHandleFormStateChanges}
+              handleAddAuthor={this.handleAddAuthor}
+              handleDeleteAuthor={this.handleDeleteAuthor}
+              model={this.props.model}
+              disabled={this.state.saving}
             />
-            <form
-              onSubmit={this.handleSaveChanges}
-            >
-              <SelectField
-                floatingLabelText="Category"
-                maxHeight={400}
-                value={this.state.category}
-                onChange={this.fieldUpdaters.category}
-                disabled={this.state.saving}
-                autoWidth={false}
-                style={{ width: 200 }}
-              >
-                {
-                  _.map(categories, category => (
-                    <MenuItem
-                      value={category.slug}
-                      key={category.slug}
-                      primaryText={category.name}
-                    />
-                  ))
-                }
-              </SelectField>
-              <TextField
-                name="image"
-                value={this.state.image}
-                floatingLabelText="Image (Remember to use https:// not http://)"
-                disabled={this.state.saving}
-                onChange={this.fieldUpdaters.image}
-                fullWidth
-              /><br />
-              <TextField
-                name="teaser"
-                floatingLabelText={
-                  `Teaser (${this.state.teaser.length} of ${MAX_TEASER_LENGTH} characters)`
-                }
-                value={this.state.teaser}
-                disabled={this.state.saving}
-                onChange={this.fieldUpdaters.teaser}
-                multiLine
-                rows={2}
-                fullWidth
-              /><br />
-              <EditAuthorsForm
-                authors={this.state.authors}
-                onChange={this.debouncedHandleFormStateChanges}
-                handleAddAuthor={this.handleAddAuthor}
-                handleDeleteAuthor={this.handleDeleteAuthor}
-                model={this.props.model}
-                disabled={this.state.saving}
-              />
-            </form>
-            <br />
-            <Divider />
-            <br />
-            {
-              article.published_at
-                ? `This article was published on ${
-                    moment(article.published_at).format('MMMM DD, YYYY')
-                  }.`
-                : 'The article has yet to be published. It will be published automatically ' +
-                  'when you publish the issue that contains it.'
-            } <br />
             <RaisedButton
-              label="Unpublish Article"
-              secondary
+              label={changedStateMessage}
+              primary
               style={styles.buttons}
-              disabled={!article.published_at}
-              onClick={this.unpublish}
-              icon={<Warning />}
+              type="submit"
+              disabled={!this.state.changed || this.state.saving}
             />
-          </Dialog>
-        </div>
+          </form>
+          <br />
+          <Divider />
+          <br />
+          {
+            article.published_at
+              ? `This article was published on ${
+                  moment(article.published_at).format('MMMM DD, YYYY')
+                }.`
+              : 'The article has yet to be published. It will be published automatically ' +
+                'when you publish the issue that contains it.'
+          } <br />
+          <RaisedButton
+            label="Unpublish Article"
+            secondary
+            style={styles.buttons}
+            disabled={!article.published_at}
+            onClick={this.unpublish}
+            icon={<Warning />}
+          />
+        </Dialog>
       );
     }
     return (

From 651ec48c40c6294fbb12602aece0022cb197bfe2 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Tue, 3 Oct 2017 21:47:51 -0400
Subject: [PATCH 6/9] fix small problems with Dialog and add to Authors &
 Issues page

---
 .../editor/EditorArticleController.jsx        |   3 +-
 .../editor/EditorAuthorController.jsx         | 121 ++++++++++--------
 .../editor/EditorIssueListController.jsx      |  24 +++-
 3 files changed, 89 insertions(+), 59 deletions(-)

diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index 65643783..fbff32c6 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -39,7 +39,6 @@ export default class EditorArticleController extends FalcorController {
       image: updateFieldValue.bind(this, 'image', undefined),
     };
     this.safeSetState({
-      open: true,
       changed: false,
       saving: false,
       authors: [],
@@ -363,7 +362,7 @@ export default class EditorArticleController extends FalcorController {
       return (
         <Dialog
           title="Article Editor"
-          open={this.state.open}
+          open
           modal={false}
           autoScrollBodyContent
           onRequestClose={this.handleDialogClose}
diff --git a/src/components/editor/EditorAuthorController.jsx b/src/components/editor/EditorAuthorController.jsx
index ff059295..727834c5 100644
--- a/src/components/editor/EditorAuthorController.jsx
+++ b/src/components/editor/EditorAuthorController.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import { browserHistory } from 'react-router';
 import FalcorController from 'lib/falcor/FalcorController';
 import { debounce, markdownLength } from 'lib/utilities';
 import { updateFieldValue } from './lib/form-field-updaters';
 
 // material-ui
+import Dialog from 'material-ui/Dialog';
 import CircularProgress from 'material-ui/CircularProgress';
 import Divider from 'material-ui/Divider';
 import TextField from 'material-ui/TextField';
@@ -27,6 +29,7 @@ const styles = {
 export default class EditorAuthorController extends FalcorController {
   constructor(props) {
     super(props);
+    this.handleDialogClose = this.handleDialogClose.bind(this);
     this.handleSaveChanges = this.handleSaveChanges.bind(this);
     this.fieldUpdaters = {
       name: updateFieldValue.bind(this, 'name', undefined),
@@ -129,6 +132,13 @@ export default class EditorAuthorController extends FalcorController {
     }
   }
 
+  handleDialogClose() {
+    if (this.state.saving) return;
+
+    const path = '/authors';
+    browserHistory.push(path);
+  }
+
   handleSaveChanges(event) {
     event.preventDefault();
 
@@ -245,58 +255,65 @@ export default class EditorAuthorController extends FalcorController {
       }
 
       return (
-        <div style={styles.authorProfile}>
-          <h3>Author Profile: {this.state.name}</h3>
-          <Divider />
-          <form onSubmit={this.handleSaveChanges}>
-            <TextField
-              value={this.state.name}
-              floatingLabelText="Name"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.name}
-            /><br />
-            <TextField
-              value={this.state.slug}
-              floatingLabelText="Slug"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.slug}
-            /><br />
-            <TextField
-              value={this.state.jobTitle}
-              floatingLabelText="Job Title"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.jobTitle}
-            /><br />
-            <TextField
-              name="image"
-              value={this.state.image}
-              floatingLabelText="Image (Remember to use https:// not http://)"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.image}
-              fullWidth
-            /><br />
-            <TextField
-              name="biography"
-              floatingLabelText={
-                `Biography (${markdownLength(this.state.biography)} ` +
-                `of ${MAX_BIOGRAPHY_LENGTH} characters)`
-              }
-              value={this.state.biography}
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.biography}
-              multiLine
-              rows={2}
-              fullWidth
-            /><br />
-            <RaisedButton
-              label={changedStateMessage}
-              type="submit"
-              primary
-              style={styles.buttons}
-              disabled={!this.state.changed || this.state.saving}
-            />
-          </form>
-        </div>
+        <Dialog
+          title="Author Profile"
+          open
+          autoScrollBodyContent
+          onRequestClose={this.handleDialogClose}
+        >
+          <div style={styles.authorProfile}>
+            <h3>Author Profile: {this.state.name}</h3>
+            <Divider />
+            <form onSubmit={this.handleSaveChanges}>
+              <TextField
+                value={this.state.name}
+                floatingLabelText="Name"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.name}
+              /><br />
+              <TextField
+                value={this.state.slug}
+                floatingLabelText="Slug"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.slug}
+              /><br />
+              <TextField
+                value={this.state.jobTitle}
+                floatingLabelText="Job Title"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.jobTitle}
+              /><br />
+              <TextField
+                name="image"
+                value={this.state.image}
+                floatingLabelText="Image (Remember to use https:// not http://)"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.image}
+                fullWidth
+              /><br />
+              <TextField
+                name="biography"
+                floatingLabelText={
+                  `Biography (${markdownLength(this.state.biography)} ` +
+                  `of ${MAX_BIOGRAPHY_LENGTH} characters)`
+                }
+                value={this.state.biography}
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.biography}
+                multiLine
+                rows={2}
+                fullWidth
+              /><br />
+              <RaisedButton
+                label={changedStateMessage}
+                type="submit"
+                primary
+                style={styles.buttons}
+                disabled={!this.state.changed || this.state.saving}
+              />
+            </form>
+          </div>
+        </Dialog>
       );
     }
     return (
diff --git a/src/components/editor/EditorIssueListController.jsx b/src/components/editor/EditorIssueListController.jsx
index d0423e89..56b9d9eb 100644
--- a/src/components/editor/EditorIssueListController.jsx
+++ b/src/components/editor/EditorIssueListController.jsx
@@ -6,6 +6,7 @@ import { updateFieldValue } from './lib/form-field-updaters';
 import { stringToInt } from 'lib/utilities';
 
 // material-ui
+import Dialog from 'material-ui/Dialog';
 import Paper from 'material-ui/Paper';
 import Divider from 'material-ui/Divider';
 import { Tabs, Tab } from 'material-ui/Tabs';
@@ -43,6 +44,7 @@ const styles = {
 export default class EditorIssueListController extends FalcorController {
   constructor(props) {
     super(props);
+    this.handleDialogClose = this.handleDialogClose.bind(this);
     this.addIssue = this.addIssue.bind(this);
     this.fieldUpdaters = {
       name: updateFieldValue.bind(this, 'name', undefined),
@@ -87,6 +89,13 @@ export default class EditorIssueListController extends FalcorController {
     }
   }
 
+  handleDialogClose() {
+    if (this.state.saving) return;
+
+    const path = '/issues';
+    browserHistory.push(path);
+  }
+
   addIssue(e) {
     e.preventDefault();
     const issueName = this.state.name;
@@ -227,10 +236,15 @@ export default class EditorIssueListController extends FalcorController {
               </Tab>
             </Tabs>
           </Paper>
-          <Paper style={styles.paper} zDepth={2}>
+
+          <div>
             {
               currentIssueNumber ?
-                <div>
+                <Dialog
+                  open
+                  autoScrollBodyContent
+                  onRequestClose={this.handleDialogClose}
+                >
                   <Tabs value={this.getSelectedTab()}>
                     <Tab
                       label="MAIN"
@@ -255,11 +269,11 @@ export default class EditorIssueListController extends FalcorController {
                     <h2>Issue {currentIssueNumber}</h2>
                     <Divider />
                   </div>
-                </div>
+                  {this.props.children}
+                </Dialog>
                 : null
             }
-            {this.props.children}
-          </Paper>
+          </div>
         </div>
       );
     }

From dc3a2cc53181ee1016191dfcf980d91384bb89bf Mon Sep 17 00:00:00 2001
From: Emil Goldsmith Olesen <emilgoldsmith94@gmail.com>
Date: Wed, 4 Oct 2017 10:35:06 -0400
Subject: [PATCH 7/9] Removed redundant style object from
 EditorArticleController

---
 src/components/editor/EditorArticleController.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/editor/EditorArticleController.jsx b/src/components/editor/EditorArticleController.jsx
index fbff32c6..bd0f8a52 100644
--- a/src/components/editor/EditorArticleController.jsx
+++ b/src/components/editor/EditorArticleController.jsx
@@ -318,11 +318,6 @@ export default class EditorArticleController extends FalcorController {
         marginTop: 24,
         marginBottom: 12,
       },
-      innerPaper: {
-        paddingLeft: 30,
-        paddingRight: 30,
-        paddingBottom: 15,
-      },
     };
 
     if (this.state.ready) {

From 081fefeafbbdc46de16f8dbee6d00aaaa486ab82 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthiatong16@gmail.com>
Date: Thu, 5 Oct 2017 13:46:34 -0400
Subject: [PATCH 8/9] remove Dialog from Issues page

---
 .../editor/EditorIssueListController.jsx      | 24 ++++---------------
 1 file changed, 5 insertions(+), 19 deletions(-)

diff --git a/src/components/editor/EditorIssueListController.jsx b/src/components/editor/EditorIssueListController.jsx
index 56b9d9eb..d0423e89 100644
--- a/src/components/editor/EditorIssueListController.jsx
+++ b/src/components/editor/EditorIssueListController.jsx
@@ -6,7 +6,6 @@ import { updateFieldValue } from './lib/form-field-updaters';
 import { stringToInt } from 'lib/utilities';
 
 // material-ui
-import Dialog from 'material-ui/Dialog';
 import Paper from 'material-ui/Paper';
 import Divider from 'material-ui/Divider';
 import { Tabs, Tab } from 'material-ui/Tabs';
@@ -44,7 +43,6 @@ const styles = {
 export default class EditorIssueListController extends FalcorController {
   constructor(props) {
     super(props);
-    this.handleDialogClose = this.handleDialogClose.bind(this);
     this.addIssue = this.addIssue.bind(this);
     this.fieldUpdaters = {
       name: updateFieldValue.bind(this, 'name', undefined),
@@ -89,13 +87,6 @@ export default class EditorIssueListController extends FalcorController {
     }
   }
 
-  handleDialogClose() {
-    if (this.state.saving) return;
-
-    const path = '/issues';
-    browserHistory.push(path);
-  }
-
   addIssue(e) {
     e.preventDefault();
     const issueName = this.state.name;
@@ -236,15 +227,10 @@ export default class EditorIssueListController extends FalcorController {
               </Tab>
             </Tabs>
           </Paper>
-
-          <div>
+          <Paper style={styles.paper} zDepth={2}>
             {
               currentIssueNumber ?
-                <Dialog
-                  open
-                  autoScrollBodyContent
-                  onRequestClose={this.handleDialogClose}
-                >
+                <div>
                   <Tabs value={this.getSelectedTab()}>
                     <Tab
                       label="MAIN"
@@ -269,11 +255,11 @@ export default class EditorIssueListController extends FalcorController {
                     <h2>Issue {currentIssueNumber}</h2>
                     <Divider />
                   </div>
-                  {this.props.children}
-                </Dialog>
+                </div>
                 : null
             }
-          </div>
+            {this.props.children}
+          </Paper>
         </div>
       );
     }

From 4b44343d6e171c6199c98a144aeec400d94cf072 Mon Sep 17 00:00:00 2001
From: Emil Goldsmith Olesen <emilgoldsmith94@gmail.com>
Date: Thu, 5 Oct 2017 16:15:53 -0400
Subject: [PATCH 9/9] Removed redundant Paper wrappers around modals

---
 src/components/editor/EditorArticleListController.jsx | 4 +---
 src/components/editor/EditorAuthorListController.jsx  | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/editor/EditorArticleListController.jsx b/src/components/editor/EditorArticleListController.jsx
index 8a1fa10a..d3730199 100644
--- a/src/components/editor/EditorArticleListController.jsx
+++ b/src/components/editor/EditorArticleListController.jsx
@@ -147,9 +147,7 @@ export default class EditorArticleListController extends FalcorController {
               />
             </div>
           </Paper>
-          <Paper style={styles.paper} zDepth={2}>
-            {this.props.children}
-          </Paper>
+          {this.props.children}
         </div>
       );
     }
diff --git a/src/components/editor/EditorAuthorListController.jsx b/src/components/editor/EditorAuthorListController.jsx
index 2bd04447..15ac2390 100644
--- a/src/components/editor/EditorAuthorListController.jsx
+++ b/src/components/editor/EditorAuthorListController.jsx
@@ -161,9 +161,7 @@ export default class EditorAuthorListController extends FalcorController {
             </Tabs>
             <Divider />
           </Paper>
-          <Paper style={styles.paper} zDepth={2}>
-            {this.props.children}
-          </Paper>
+          {this.props.children}
           <br />
         </div>
       );