Feat/add settings modal to folder card

src/components/FolderCard.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import elementStyles from '../styles/isomer-cms/Elements.module.scss';
 import contentStyles from '../styles/isomer-cms/pages/Content.module.scss';
+import FolderModal from './FolderModal';
 
 const FolderCard = ({
   displayText,
@@ -13,38 +14,57 @@ const FolderCard = ({
   siteName,
   category,
 }) => {
+  const [isFolderModalOpen, setIsFolderModalOpen] = useState(false)
+
   const generateLink = () => {
     if (isHomepage) return `/sites/${siteName}/homepage`
     if (isCollection) return `/sites/${siteName}/collections/${category}`
     return `/sites/${siteName}/resources/${category}`
   }
 
   return (
-    <Link className={`${contentStyles.component} ${contentStyles.card} ${elementStyles.folderCard}`} to={generateLink()}>
-      <div id={itemIndex} className={contentStyles.folderInfo}>
-        <i className={`bx bx-md text-dark ${isHomepage ? 'bxs-home-circle' : 'bxs-folder'} ${contentStyles.componentIcon}`} />
-        <span className={`${contentStyles.componentFolderName} align-self-center ml-4 mr-auto`}>{displayText}</span>
-        {
-          isHomepage
-          ? ''
-          : (
-            <div className={contentStyles.componentIcon}>
-              <button
-                className={contentStyles.componentIcon}
-                type="button"
-                id={`settings-folder-${itemIndex}`}
-                onClick={(e) => {
-                  e.preventDefault();
-                  settingsToggle(e)}}
-                className={contentStyles.componentIcon}
-              >
-                <i id={`settingsIcon-${itemIndex}`} className="bx bx-dots-vertical-rounded" />
-              </button>
-            </div>
-          )
-        }
-      </div>
-    </Link>
+    <>
+      {
+        isFolderModalOpen
+        && (
+          <FolderModal
+            displayTitle={isCollection ? 'Rename Collection' : 'Rename Resource Category'}
+            displayText={isCollection ? 'Collection name' : "Resource category name"}
+            onClose={() => setIsFolderModalOpen(false)}
+            category={category}
+            siteName={siteName}
+            isCollection={isCollection}
+          />
+        )
+      }
+      <Link className={`${contentStyles.component} ${contentStyles.card} ${elementStyles.folderCard}`} to={generateLink()}>
+        <div id={itemIndex} className={contentStyles.folderInfo}>
+          <i className={`bx bx-md text-dark ${isHomepage ? 'bxs-home-circle' : 'bxs-folder'} ${contentStyles.componentIcon}`} />
+          <span className={`${contentStyles.componentFolderName} align-self-center ml-4 mr-auto`}>{displayText}</span>
+          {
+            isHomepage
+            ? ''
+            : (
+              <div className={contentStyles.componentIcon}>
+                <button
+                  className={contentStyles.componentIcon}
+                  type="button"
+                  id={`settings-folder-${itemIndex}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    settingsToggle(e);
+                    setIsFolderModalOpen(true)
+                  }}
+                  className={contentStyles.componentIcon}
+                >
+                  <i id={`settingsIcon-${itemIndex}`} className="bx bx-dots-vertical-rounded" />
+                </button>
+              </div>
+            )
+          }
+        </div>
+      </Link>
+    </>
   )
 }
 

src/components/FolderModal.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import elementStyles from '../styles/isomer-cms/Elements.module.scss';
+import SaveDeleteButtons from './SaveDeleteButtons';
+import FormField from './FormField';
+
+// axios settings
+axios.defaults.withCredentials = true
+
+const FolderModal = ({ displayTitle, displayText, onClose, category, siteName, isCollection }) => {
+  const [newCategoryName, setNewCategoryName] = useState(category)
+
+  const folderNameChangeHandler = (event) => {
+    const { value } = event.target
+    setNewCategoryName(value)
+  }
+
+  const saveHandler = async () => {
+    try {
+      await axios.post(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${isCollection ? 'collections' : 'resources'}/${category}/rename/${newCategoryName}`)
+      // Refresh page
+      window.location.reload();
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  return (
+    <div className={elementStyles.overlay}>
+      <div className={elementStyles['modal-settings']}>
+        <div className={elementStyles.modalHeader}>
+          <h1>
+            {displayTitle}
+          </h1>
+          <button type="button" onClick={onClose}>
+            <i className="bx bx-x" />
+          </button>
+        </div>
+        <form className={elementStyles.modalContent}>
+          <FormField
+            title={displayText}
+            id="newCategoryName"
+            value={newCategoryName}
+            onFieldChange={folderNameChangeHandler}
+          />
+          <div className={elementStyles.modalButtons}>
+            <SaveDeleteButtons
+              isDisabled={false}
+              hasDeleteButton={false}
+              saveCallback={saveHandler}
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+};
+
+FolderModal.propTypes = {
+  displayTitle: PropTypes.string.isRequired,
+  displayText: PropTypes.string.isRequired,
+  onProceed: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default FolderModal;