Merge pull request #424 from isomerpages/feat/nested-images-modal

Feat/nested images modal
isomerpages · Apr 22, 2021 · 104585d · 104585d
2 parents ca1727d + 05d9e66
commit 104585d
Show file tree

Hide file tree

Showing 9 changed files with 298 additions and 124 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -150,7 +150,7 @@ function App() {
                     <ProtectedRouteWithProps exact path="/sites/:siteName/navbar" component={EditNavBar} />
                     <ProtectedRouteWithProps path="/sites/:siteName/files/:fileName" component={EditFile} />
                     <ProtectedRouteWithProps path="/sites/:siteName/files" component={Files} />
-                    <ProtectedRouteWithProps path="/sites/:siteName/images/:fileName" component={EditImage} />
+                    <ProtectedRouteWithProps path="/sites/:siteName/images/:customPath" component={Images} />
                     <ProtectedRouteWithProps path="/sites/:siteName/images" component={Images} />
                     <ProtectedRouteWithProps path="/sites/:siteName/pages/:fileName" component={EditPage} isCollectionPage={false} isResourcePage={false} />
                     <ProtectedRouteWithProps path="/sites/:siteName/workspace" component={Workspace} />

diff --git a/src/api.js b/src/api.js
@@ -240,6 +240,24 @@ const moveFile = async ({selectedFile, siteName, resourceName, folderName, subfo
     return await axios.post(apiEndpoint, params)
 }
 
+const getImages = async (siteName, customPath) => {
+    const resp = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/files/${customPath ? encodeURIComponent(`images/${customPath}`) : 'images'}`);
+    const { directoryContents } = resp.data;
+
+    let respImages = []
+    let respDirectories = []
+    directoryContents.forEach((fileOrDir) => {
+        const modifiedFileOrDir = { ...fileOrDir, fileName: fileOrDir.name }
+        if (fileOrDir.type === 'file') respImages.push(modifiedFileOrDir)
+        if (fileOrDir.type === 'dir') respDirectories.push(modifiedFileOrDir)
+    })
+
+    return {
+        respImages,
+        respDirectories,
+    }
+}
+
 export {
     getDirectoryFile,
     setDirectoryFile,
@@ -263,4 +281,5 @@ export {
     getAllCategories,
     moveFiles,
     moveFile,
+    getImages,
 }
diff --git a/src/components/FolderCard.jsx b/src/components/FolderCard.jsx
@@ -25,6 +25,7 @@ const FolderCard = ({
   siteName,
   category,
   selectedIndex,
+  linkPath,
   onClick,
   existingFolders,
 }) => {
@@ -49,6 +50,8 @@ const FolderCard = ({
         return `/sites/${siteName}/contact-us`
       case 'nav':
         return `/sites/${siteName}/navbar`
+      case 'media':
+        return `/sites/${siteName}/${linkPath}`
       default:
         return ''
     }
@@ -172,6 +175,8 @@ FolderCard.propTypes = {
   itemIndex: PropTypes.number,
   pageType: PropTypes.string.isRequired,
   siteName: PropTypes.string.isRequired,
+  category: PropTypes.string,
+  linkPath: PropTypes.string,
 };
 
 export default FolderCard;
diff --git a/src/components/folders/FolderOptionButton.jsx b/src/components/folders/FolderOptionButton.jsx
@@ -8,6 +8,7 @@ const iconSelection = {
     'rearrange': 'bx-sort',
     'create-page': 'bx-file-blank',
     'create-sub': 'bx-folder',
+    'upload-image': 'bx-plus-circle',
 }
 
 

diff --git a/src/components/media/MediaSettingsModal.jsx b/src/components/media/MediaSettingsModal.jsx
@@ -15,6 +15,11 @@ import { errorToast } from '../../utils/toasts';
 import mediaStyles from '../../styles/isomer-cms/pages/Media.module.scss';
 import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
 
+const generateImageorFilePath = (customPath, fileName) => {
+  if (customPath) return encodeURIComponent(`${customPath}/${fileName}`)
+  return fileName
+}
+
 export default class MediaSettingsModal extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +34,7 @@ export default class MediaSettingsModal extends Component {
 
   async componentDidMount() {
     const {
-      siteName, media, isPendingUpload, type,
+      siteName, customPath, media, isPendingUpload, type,
     } = this.props;
     const { fileName } = media;
 
@@ -39,9 +44,16 @@ export default class MediaSettingsModal extends Component {
       return;
     }
 
-    const { data: { sha, content } } = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${type === 'image' ? 'images' : 'documents'}/${fileName}`, {
-      withCredentials: true,
-    });
+    let sha, content
+    try {
+      const { data } = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${type === 'image' ? 'images' : 'documents'}/${generateImageorFilePath(customPath, fileName)}`, {
+        withCredentials: true,
+      });
+      sha = data.sha
+      content = data.content
+    } catch (err) {
+      errorToast(`We were unable to retrieve data on your image file. ${DEFAULT_RETRY_MSG}`)
+    }
     this.setState({ sha, content });
   }
 
@@ -52,6 +64,7 @@ export default class MediaSettingsModal extends Component {
   saveFile = async () => {
     const {
       siteName,
+      customPath,
       media: { fileName },
       isPendingUpload,
       type,
@@ -67,6 +80,7 @@ export default class MediaSettingsModal extends Component {
 
         if (type === 'image') {
           params.imageName = newFileName;
+          params.imageDirectory = `images${customPath ? `/${customPath}` : ''}`;
         } else {
           params.documentName = newFileName;
         }
@@ -84,7 +98,7 @@ export default class MediaSettingsModal extends Component {
         if (newFileName === fileName) {
           return;
         }
-        await axios.post(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${type === 'image' ? 'images' : 'documents'}/${fileName}/rename/${newFileName}`, params, {
+        await axios.post(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${type === 'image' ? 'images' : 'documents'}/${generateImageorFilePath(customPath, fileName)}/rename/${generateImageorFilePath(customPath, newFileName)}`, params, {
           withCredentials: true,
         });
       }