[Feat - EditPage, ImagesModal] Highlight selected image

src/components/ImageSettingsModal.jsx

@@ -39,7 +39,13 @@ export default class ImageSettingsModal extends Component {
   }
 
   renameImage = async () => {
-    const { match, image, isPendingUpload, toReload, onClose } = this.props;
+    const {
+      match,
+      image,
+      isPendingUpload,
+      toReload,
+      onClose,
+    } = this.props;
     const { siteName } = match.params;
     const {
       newFileName,
@@ -143,31 +149,31 @@ export default class ImageSettingsModal extends Component {
             </div>
             <div className={elementStyles.modalButtons}>
               {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}
+                    className={elementStyles.blue}
                     callback={this.renameImage}
                   />
-                  <LoadingButton
-                    label="Delete"
-                    disabled={!sha}
-                    disabledStyle={elementStyles.disabled}
-                    className={sha ? elementStyles.warning : elementStyles.disabled}
-                    callback={this.deleteImage}
-                  />
-                </>
-              )}
+                ) : (
+                  <>
+                    <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>
@@ -194,4 +200,4 @@ ImageSettingsModal.propTypes = {
 
 ImageSettingsModal.defaultProps = {
   toReload: true,
-}
+};

src/components/ImagesModal.jsx

@@ -1,12 +1,20 @@
 import React, { PureComponent } from 'react';
-import axios from 'axios';
 import PropTypes from 'prop-types';
 import mediaStyles from '../styles/isomer-cms/pages/Media.module.scss';
 import elementStyles from '../styles/isomer-cms/Elements.module.scss';
 import { UploadImageCard } from '../layouts/Images';
+import LoadingButton from './LoadingButton';
 
-export const ImageCard = ({ image, siteName, onClick }) => (
-  <div className={mediaStyles.mediaCard} key={image.path}>
+export const ImageCard = ({
+  image,
+  siteName,
+  onClick,
+  isSelected,
+}) => (
+  <div
+    className={isSelected ? mediaStyles.selectedMediaCard : mediaStyles.mediaCard}
+    key={image.path}
+  >
     <a href="/" onClick={(e) => { e.preventDefault(); onClick(image.path); }}>
       <div className={mediaStyles.mediaCardImageContainer}>
         <img
@@ -18,7 +26,6 @@ export const ImageCard = ({ image, siteName, onClick }) => (
       </div>
       <div className={mediaStyles.mediaCardDescription}>
         <div className={mediaStyles.mediaCardName}>{image.fileName}</div>
-        <i className="bx bxs-edit" />
       </div>
     </a>
   </div>
@@ -27,13 +34,27 @@ export const ImageCard = ({ image, siteName, onClick }) => (
 
 export default class ImagesModal extends PureComponent {
   render() {
-    const { siteName, images, onClose, onImageSelect, readImageToUpload } = this.props;
+    const {
+      siteName,
+      images,
+      onClose,
+      onImageSelect,
+      readImageToUpload,
+      selectedImage,
+      setSelectedImage,
+    } = this.props;
     return (!!images.length
       && (
         <div className={elementStyles.overlay}>
           <div className={mediaStyles.mediaModal}>
             <div className={elementStyles.modalHeader}>
-              <h1>Select Image</h1>
+              <h1 style={{ flexGrow: 1 }}>Select Image</h1>
+              <LoadingButton
+                label="Select image"
+                disabledStyle={elementStyles.disabled}
+                className={elementStyles.blue}
+                callback={onImageSelect}
+              />
               <button type="button" onClick={onClose}>
                 <i className="bx bx-x" />
               </button>
@@ -45,6 +66,10 @@ export default class ImagesModal extends PureComponent {
               />
               <input
                 onChange={readImageToUpload}
+                onClick={(event) => {
+                  // eslint-disable-next-line no-param-reassign
+                  event.target.value = '';
+                }}
                 type="file"
                 id="file-upload"
                 accept="image/png, image/jpeg, image/gif"
@@ -55,16 +80,17 @@ export default class ImagesModal extends PureComponent {
                 <ImageCard
                   image={image}
                   siteName={siteName}
-                  onClick={onImageSelect}
+                  onClick={setSelectedImage}
                   key={image.fileName}
+                  isSelected={image.path === selectedImage}
                 />
               ))}
             </div>
           </div>
         </div>
       )
     );
-  };
+  }
 }
 
 ImageCard.propTypes = {
@@ -74,10 +100,18 @@ ImageCard.propTypes = {
   }).isRequired,
   siteName: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool.isRequired,
 };
 
 ImagesModal.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.shape({
+    fileName: PropTypes.string,
+    path: PropTypes.string,
+  })).isRequired,
   onClose: PropTypes.func.isRequired,
   siteName: PropTypes.string.isRequired,
   onImageSelect: PropTypes.func.isRequired,
+  readImageToUpload: PropTypes.func.isRequired,
+  selectedImage: PropTypes.string.isRequired,
+  setSelectedImage: PropTypes.func.isRequired,
 };

src/layouts/EditPage.jsx

@@ -40,7 +40,8 @@ export default class EditPage extends Component {
       frontMatter: '',
       images: [],
       isSelectingImage: false,
-      pendingImageUpload: null
+      pendingImageUpload: null,
+      selectedImage: '',
     };
     this.mdeRef = React.createRef();
   }
@@ -126,8 +127,9 @@ export default class EditPage extends Component {
     }));
   }
 
-  onImageClick = (filePath) => {
-    const path = `/${filePath}`;
+  onImageClick = () => {
+    const { selectedImage } = this.state;
+    const path = `/${selectedImage}`;
     const cm = this.mdeRef.current.simpleMde.codemirror;
     cm.replaceSelection(`![](${path})`);
     // set state so that rerender is triggered and image is shown
@@ -167,10 +169,20 @@ export default class EditPage extends Component {
     imgReader.readAsDataURL(event.target.files[0]);
   }
 
+  setSelectedImage = async (filePath) => {
+    this.setState({ selectedImage: filePath });
+  }
+
   render() {
     const { match } = this.props;
     const { siteName, fileName } = match.params;
-    const { editorValue, images, isSelectingImage, pendingImageUpload } = this.state;
+    const {
+      editorValue,
+      images,
+      isSelectingImage,
+      pendingImageUpload,
+      selectedImage,
+    } = this.state;
     return (
       <>
         <Header
@@ -182,10 +194,15 @@ export default class EditPage extends Component {
           { isSelectingImage && (
             <ImagesModal
               siteName={siteName}
-              onClose={() => this.setState({ isSelectingImage: false })}
+              onClose={() => this.setState({ isSelectingImage: false, selectedImage: '' })}
               images={images}
-              onImageSelect={this.onImageClick}
+              onImageSelect={() => {
+                this.onImageClick();
+                this.setState({ selectedImage: '' });
+              }}
               readImageToUpload={this.readImageToUpload}
+              selectedImage={selectedImage}
+              setSelectedImage={this.setSelectedImage}
             />
           )}
           <div className={editorStyles.pageEditorSidebar}>
@@ -210,7 +227,7 @@ export default class EditPage extends Component {
                     name: 'image',
                     action: async () => {
                       await this.getImages(siteName);
-                      this.setState({ isSelectingImage: true })
+                      this.setState({ isSelectingImage: true });
                     },
                     className: 'fa fa-picture-o',
                     title: 'Insert Image',
@@ -224,7 +241,10 @@ export default class EditPage extends Component {
             />
           </div>
           <div className={editorStyles.pageEditorMain}>
-            <SimplePage chunk={prependImageSrc(siteName, marked(editorValue))} title={prettifyPageFileName(fileName)} />
+            <SimplePage
+              chunk={prependImageSrc(siteName, marked(editorValue))}
+              title={prettifyPageFileName(fileName)}
+            />
           </div>
         </div>
         <div className={editorStyles.pageEditorFooter}>

src/layouts/Images.jsx

@@ -122,6 +122,10 @@ export default class Images extends Component {
                   />
                   <input
                     onChange={this.onImageSelect}
+                    onClick={(event) => {
+                      // eslint-disable-next-line no-param-reassign
+                      event.target.value = '';
+                    }}
                     type="file"
                     id="file-upload"
                     accept="image/png, image/jpeg, image/gif"

src/styles/isomer-cms/pages/Media.module.scss

@@ -35,6 +35,10 @@
   overflow-y: scroll;
   padding-bottom: 50px;
 
+    .selectedMediaCard{
+      outline: 2px solid $isomer-blue;
+      @extend .mediaCard;
+    }
 
     .mediaCard{
       @include single-site;