[feat] Allow rename before image upload in EditPage, refactor ImageModal

src/components/ImageSettingsModal.jsx

@@ -39,7 +39,7 @@ export default class ImageSettingsModal extends Component {
   }
 
   renameImage = async () => {
-    const { match, image, isPendingUpload } = this.props;
+    const { match, image, isPendingUpload, toReload, onClose } = this.props;
     const { siteName } = match.params;
     const {
       newFileName,
@@ -70,8 +70,13 @@ export default class ImageSettingsModal extends Component {
         withCredentials: true,
       });
     }
+
     // reload after action
-    window.location.reload();
+    if (toReload) {
+      window.location.reload();
+    } else {
+      onClose();
+    }
   }
 
   deleteImage = async () => {
@@ -137,20 +142,32 @@ export default class ImageSettingsModal extends Component {
               />
             </div>
             <div className={elementStyles.modalButtons}>
-              <LoadingButton
-                label="Save"
-                disabled={!!errorMessage}
-                disabledStyle={elementStyles.disabled}
-                className={(errorMessage || !sha) ? elementStyles.disabled : elementStyles.blue}
-                callback={this.renameImage}
-              />
-              <LoadingButton
-                label="Delete"
-                disabled={!sha}
-                disabledStyle={elementStyles.disabled}
-                className={sha ? elementStyles.warning : elementStyles.disabled}
-                callback={this.deleteImage}
-              />
+              {isPendingUpload
+              ? (
+                <LoadingButton
+                  label="Save"
+                  disabledStyle={elementStyles.disabled}
+                  className={elementStyles.blue}
+                  callback={this.renameImage}
+                />
+              ) : (
+                <>
+                  <LoadingButton
+                    label="Save"
+                    disabled={(errorMessage || !sha)}
+                    disabledStyle={elementStyles.disabled}
+                    className={(errorMessage || !sha) ? elementStyles.disabled : elementStyles.blue}
+                    callback={this.renameImage}
+                  />
+                  <LoadingButton
+                    label="Delete"
+                    disabled={!sha}
+                    disabledStyle={elementStyles.disabled}
+                    className={sha ? elementStyles.warning : elementStyles.disabled}
+                    callback={this.deleteImage}
+                  />
+                </>
+              )}
             </div>
           </form>
         </div>
@@ -172,4 +189,9 @@ ImageSettingsModal.propTypes = {
   }).isRequired,
   isPendingUpload: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  toReload: PropTypes.bool,
 };
+
+ImageSettingsModal.defaultProps = {
+  toReload: true,
+}

src/components/ImagesModal.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import mediaStyles from '../styles/isomer-cms/pages/Media.module.scss';
@@ -25,72 +25,9 @@ export const ImageCard = ({ image, siteName, onClick }) => (
 );
 
 
-export default class ImagesModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      images: [],
-    };
-  }
-
-  async componentDidMount() {
-    const { siteName } = this.props;
-    try {
-      this.getImage(siteName);
-    } catch (e) {
-      console.log(e);
-    }
-  }
-
-  getImage = async (siteName) => {
-    const { data: { images } } = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/images`, {
-      withCredentials: true,
-    });
-    this.setState({ images });
-  }
-
-  uploadImage = async (imageName, imageContent) => {
-    try {
-      const { siteName } = this.props;
-      const params = {
-        imageName,
-        content: imageContent,
-      };
-
-      // add a loading screen while file is being uploaded
-      await axios.post(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/images`, params, {
-        withCredentials: true,
-      });
-
-      // trigger a re-render of the modal
-      const { data: { images } } = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/images`, {
-        withCredentials: true,
-      });
-      this.setState({ images });
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  onImageSelect = async (event) => {
-    const imgReader = new FileReader();
-    const imgName = event.target.files[0].name;
-    imgReader.onload = (() => {
-      /** Github only requires the content of the image
-       * imgReader returns  `data:image/png;base64, {fileContent}`
-       * hence the split
-       */
-
-      const imgData = imgReader.result.split(',')[1];
-
-      this.uploadImage(imgName, imgData);
-    });
-    imgReader.readAsDataURL(event.target.files[0]);
-  }
-
+export default class ImagesModal extends PureComponent {
   render() {
-    const { siteName, onClose, onImageSelect } = this.props;
-    const { images } = this.state;
+    const { siteName, images, onClose, onImageSelect, readImageToUpload } = this.props;
     return (!!images.length
       && (
         <div className={elementStyles.overlay}>
@@ -107,7 +44,7 @@ export default class ImagesModal extends Component {
                 onClick={() => document.getElementById('file-upload').click()}
               />
               <input
-                onChange={this.onImageSelect}
+                onChange={readImageToUpload}
                 type="file"
                 id="file-upload"
                 accept="image/png, image/jpeg, image/gif"
@@ -125,10 +62,9 @@ export default class ImagesModal extends Component {
             </div>
           </div>
         </div>
-
       )
     );
-  }
+  };
 }
 
 ImageCard.propTypes = {

src/layouts/EditPage.jsx

@@ -7,6 +7,7 @@ import marked from 'marked';
 import { Base64 } from 'js-base64';
 import SimplePage from '../templates/SimplePage';
 import ImagesModal from '../components/ImagesModal';
+import ImageSettingsModal from '../components/ImageSettingsModal';
 import {
   frontMatterParser, concatFrontMatterMdBody, prependImageSrc, prettifyPageFileName,
 } from '../utils';
@@ -37,7 +38,9 @@ export default class EditPage extends Component {
       sha: null,
       editorValue: '',
       frontMatter: '',
+      images: [],
       isSelectingImage: false,
+      pendingImageUpload: null
     };
     this.mdeRef = React.createRef();
   }
@@ -50,6 +53,7 @@ export default class EditPage extends Component {
         withCredentials: true,
       });
       const { content, sha } = resp.data;
+
       // split the markdown into front matter and content
       const { frontMatter, mdBody } = frontMatterParser(Base64.decode(content));
       this.setState({
@@ -62,6 +66,13 @@ export default class EditPage extends Component {
     }
   }
 
+  getImages = async (siteName) => {
+    const { data: { images } } = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/images`, {
+      withCredentials: true,
+    });
+    this.setState({ images });
+  }
+
   updatePage = async () => {
     try {
       const { match } = this.props;
@@ -126,10 +137,40 @@ export default class EditPage extends Component {
     });
   }
 
+  uploadImage = async (imageName, imageContent) => {
+    try {
+      // toggle state so that image renaming modal appears
+      this.setState({
+        pendingImageUpload: {
+          fileName: imageName,
+          path: `images%2F${imageName}`,
+          content: imageContent,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  readImageToUpload = async (event) => {
+    const imgReader = new FileReader();
+    const imgName = event.target.files[0].name;
+    imgReader.onload = (() => {
+      /** Github only requires the content of the image
+       * imgReader returns  `data:image/png;base64, {fileContent}`
+       * hence the split
+       */
+
+      const imgData = imgReader.result.split(',')[1];
+      this.uploadImage(imgName, imgData);
+    });
+    imgReader.readAsDataURL(event.target.files[0]);
+  }
+
   render() {
     const { match } = this.props;
     const { siteName, fileName } = match.params;
-    const { editorValue, isSelectingImage } = this.state;
+    const { editorValue, images, isSelectingImage, pendingImageUpload } = this.state;
     return (
       <>
         <Header
@@ -142,7 +183,9 @@ export default class EditPage extends Component {
             <ImagesModal
               siteName={siteName}
               onClose={() => this.setState({ isSelectingImage: false })}
+              images={images}
               onImageSelect={this.onImageClick}
+              readImageToUpload={this.readImageToUpload}
             />
           )}
           <div className={editorStyles.pageEditorSidebar}>
@@ -165,7 +208,10 @@ export default class EditPage extends Component {
                   '|',
                   {
                     name: 'image',
-                    action: () => this.setState({ isSelectingImage: true }),
+                    action: async () => {
+                      await this.getImages(siteName);
+                      this.setState({ isSelectingImage: true })
+                    },
                     className: 'fa fa-picture-o',
                     title: 'Insert Image',
                     default: true,
@@ -195,6 +241,22 @@ export default class EditPage extends Component {
             callback={this.deletePage}
           />
         </div>
+        {
+          pendingImageUpload
+          && (
+          <ImageSettingsModal
+            image={pendingImageUpload}
+            match={match}
+            // eslint-disable-next-line react/jsx-boolean-value
+            isPendingUpload={true}
+            onClose={() => {
+              this.getImages(siteName);
+              this.setState({ pendingImageUpload: null });
+            }}
+            toReload={false}
+          />
+          )
+        }
       </>
     );
   }