-
-
{siteName}
-
Updated 2 days ago
+
+
+
+
{siteName}
+
{siteUrl}
+
{lastUpdated}
+
+
+
+ {sidebarContentPathDict.map(({ pathname, title }) => (
+ generateTab(title, siteName, pathname)
+ ))}
+
+
+
+
+
+
+ {sidebarSettingsPathDict.map(({ pathname, title }) => (
+ generateTab(title, siteName, pathname)
+ ))}
+
+
+
+
+ {sidebarUserDict.map(({ pathname, title }) => (
+ generateTab(title, siteName, pathname)
+ ))}
+
+
-
-
- {sidebarPathDict.map(({ pathname, title }) => (
-
- {generateLink(title, siteName, pathname)}
-
- ))}
-
-
-
-);
+ )
+};
export default Sidebar;
diff --git a/src/components/folders/FolderContent.jsx b/src/components/folders/FolderContent.jsx
new file mode 100644
index 000000000..30c89bc12
--- /dev/null
+++ b/src/components/folders/FolderContent.jsx
@@ -0,0 +1,310 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Droppable, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext } from 'react-beautiful-dnd';
+import update from 'immutability-helper';
+import PropTypes from 'prop-types';
+
+import { deslugifyPage } from '../../utils'
+import { MenuDropdown } from '../MenuDropdown'
+import FileMoveMenuDropdown from '../FileMoveMenuDropdown'
+
+// Import styles
+import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
+import contentStyles from '../../styles/isomer-cms/pages/Content.module.scss';
+
+const FolderContentItem = ({
+ title,
+ isFile,
+ numItems,
+ link,
+ itemIndex,
+ allCategories,
+ setSelectedPage,
+ setSelectedPath,
+ setIsPageSettingsActive,
+ setIsFolderModalOpen,
+ setIsMoveModalActive,
+ setIsDeleteModalActive,
+ moveDropdownQuery,
+ setMoveDropdownQuery,
+ clearMoveDropdownQueryState,
+}) => {
+ const [showDropdown, setShowDropdown] = useState(false)
+ const [showFileMoveDropdown, setShowFileMoveDropdown] = useState(false)
+ const dropdownRef = useRef(null)
+ const fileMoveDropdownRef = useRef(null)
+
+ useEffect(() => {
+ if (showDropdown) dropdownRef.current.focus()
+ if (showFileMoveDropdown) fileMoveDropdownRef.current.focus()
+ }, [showDropdown, showFileMoveDropdown])
+
+ const handleBlur = (event) => {
+ // if the blur was because of outside focus
+ // currentTarget is the parent element, relatedTarget is the clicked element
+ if (!event.currentTarget.contains(event.relatedTarget)) {
+ setShowFileMoveDropdown(false)
+ clearMoveDropdownQueryState()
+ }
+ }
+
+ const toggleDropdownModals = () => {
+ setShowFileMoveDropdown(!showFileMoveDropdown)
+ setShowDropdown(!showDropdown)
+ }
+
+ const generateDropdownItems = () => {
+ const dropdownItems = [
+ {
+ type: 'edit',
+ handler: () => {
+ if (isFile) setIsPageSettingsActive(true)
+ else {
+ setIsFolderModalOpen(true)
+ }
+ }
+ },
+ {
+ type: 'move',
+ handler: toggleDropdownModals
+ },
+ {
+ type: 'delete',
+ handler: () => setIsDeleteModalActive(true)
+ },
+ ]
+ if (isFile) return dropdownItems
+ return dropdownItems.filter(item => item.type !== 'move')
+ }
+
+ const FolderItemContent = (
+
+
+ {
+ isFile
+ ?
+ :
+ }
+
{deslugifyPage(title)}
+ {
+ numItems !== null
+ ?
{numItems} item{numItems === 1 ? '' : 's'}
+ : null
+ }
+
+ {
+ e.stopPropagation()
+ e.preventDefault()
+ setSelectedPage(title)
+ setShowDropdown(true)
+ }}
+ >
+
+ { showDropdown &&
+ setShowDropdown(false)}
+ />
+ }
+ { showFileMoveDropdown &&
+ {
+ setSelectedPath(`${moveDropdownQuery.folderName ? moveDropdownQuery.folderName : 'pages'}${moveDropdownQuery.subfolderName ? `/${moveDropdownQuery.subfolderName}` : ''}`)
+ setIsMoveModalActive(true)
+ }}
+ />
+ }
+
+
+
+ )
+
+ return (
+ !showFileMoveDropdown && !showDropdown
+ ?
+
+ {FolderItemContent}
+
+ :
+
+ {FolderItemContent}
+
+ )
+}
+
+const FolderContent = ({
+ folderOrderArray,
+ setFolderOrderArray,
+ siteName,
+ folderName,
+ enableDragDrop,
+ allCategories,
+ setSelectedPath,
+ setSelectedPage,
+ setIsPageSettingsActive,
+ setIsFolderModalOpen,
+ setIsMoveModalActive,
+ setIsDeleteModalActive,
+ moveDropdownQuery,
+ setMoveDropdownQuery,
+ clearMoveDropdownQueryState,
+}) => {
+ const generateLink = (folderContentItem) => {
+ if (folderContentItem.type === 'dir') return `/sites/${siteName}/folder/${folderName}/subfolder/${folderContentItem.fileName}`
+ return `/sites/${siteName}/folder/${folderName}/${folderContentItem.path.includes('/') ? `subfolder/` : ''}${folderContentItem.path}`
+ }
+
+ const onDragEnd = (result) => {
+ const { source, destination } = result;
+
+ // If the user dropped the draggable to no known droppable
+ if (!destination) return;
+
+ // The draggable elem was returned to its original position
+ if (
+ destination.droppableId === source.droppableId
+ && destination.index === source.index
+ ) return;
+
+ const elem = folderOrderArray[source.index]
+ const newFolderOrderArray = update(folderOrderArray, {
+ $splice: [
+ [source.index, 1], // Remove elem from its original position
+ [destination.index, 0, elem], // Splice elem into its new position
+ ],
+ });
+ setFolderOrderArray(newFolderOrderArray)
+ }
+
+ return (
+
+
+ {(droppableProvided) => (
+
+ {
+ folderOrderArray.map((folderContentItem, folderContentIndex) => (
+
+ {(draggableProvided) => (
+
+ !name.includes('.keep')).length : null}
+ isFile={folderContentItem.type === 'dir' ? false: true}
+ link={generateLink(folderContentItem)}
+ allCategories={allCategories}
+ itemIndex={folderContentIndex}
+ setSelectedPage={setSelectedPage}
+ setSelectedPath={setSelectedPath}
+ setIsPageSettingsActive={setIsPageSettingsActive}
+ setIsFolderModalOpen={setIsFolderModalOpen}
+ setIsMoveModalActive={setIsMoveModalActive}
+ setIsDeleteModalActive={setIsDeleteModalActive}
+ moveDropdownQuery={moveDropdownQuery}
+ setMoveDropdownQuery={setMoveDropdownQuery}
+ clearMoveDropdownQueryState={clearMoveDropdownQueryState}
+ />
+
+ )}
+
+ ))
+ }
+ {droppableProvided.placeholder}
+
+
+ )
+}
+
+export default FolderContent
+
+FolderContentItem.propTypes = {
+ title: PropTypes.string.isRequired,
+ isFile: PropTypes.bool.isRequired,
+ numItems: PropTypes.number,
+ link: PropTypes.string.isRequired,
+ itemIndex: PropTypes.number.isRequired,
+ allCategories: PropTypes.arrayOf(
+ PropTypes.string.isRequired
+ ),
+ setSelectedPage: PropTypes.func.isRequired,
+ setSelectedPath: PropTypes.func.isRequired,
+ setIsPageSettingsActive: PropTypes.func.isRequired,
+ setIsFolderModalOpen: PropTypes.func.isRequired,
+ setIsMoveModalActive: PropTypes.func.isRequired,
+ setIsDeleteModalActive: PropTypes.func.isRequired,
+ moveDropdownQuery: PropTypes.shape({
+ folderName: PropTypes.string.isRequired,
+ subfolderName: PropTypes.string.isRequired,
+ }).isRequired,
+ setMoveDropdownQuery: PropTypes.func.isRequired,
+ clearMoveDropdownQueryState: PropTypes.func.isRequired,
+};
+
+
+FolderContent.propTypes = {
+ folderOrderArray: PropTypes.arrayOf(
+ PropTypes.shape({
+ fileName: PropTypes.string.isRequired,
+ path: PropTypes.string.isRequired,
+ sha: PropTypes.string,
+ title: PropTypes.string,
+ }),
+ ).isRequired,
+ setFolderOrderArray: PropTypes.func.isRequired,
+ siteName: PropTypes.string.isRequired,
+ folderName: PropTypes.string.isRequired,
+ enableDragDrop: PropTypes.func.isRequired,
+ allCategories: PropTypes.arrayOf(
+ PropTypes.string.isRequired
+ ),
+ setSelectedPath: PropTypes.func.isRequired,
+ setSelectedPage: PropTypes.func.isRequired,
+ setIsPageSettingsActive: PropTypes.func.isRequired,
+ setIsFolderModalOpen: PropTypes.func.isRequired,
+ setIsMoveModalActive: PropTypes.func.isRequired,
+ setIsDeleteModalActive: PropTypes.func.isRequired,
+ moveDropdownQuery: PropTypes.shape({
+ folderName: PropTypes.string.isRequired,
+ subfolderName: PropTypes.string.isRequired,
+ }).isRequired,
+ setMoveDropdownQuery: PropTypes.func.isRequired,
+ clearMoveDropdownQueryState: PropTypes.func.isRequired,
+};
diff --git a/src/components/folders/FolderOptionButton.jsx b/src/components/folders/FolderOptionButton.jsx
new file mode 100644
index 000000000..0924d8282
--- /dev/null
+++ b/src/components/folders/FolderOptionButton.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+// Import styles
+import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
+import contentStyles from '../../styles/isomer-cms/pages/Content.module.scss';
+
+const iconSelection = {
+ 'rearrange': 'bx-sort',
+ 'create-page': 'bx-file-blank',
+ 'create-sub': 'bx-folder',
+}
+
+
+
+const FolderOptionButton = ({ title, isSelected, onClick, option, isDisabled, id }) => {
+ return (
+
+
+ {title}
+
+
+ )
+}
+
+export default FolderOptionButton
\ No newline at end of file
diff --git a/src/components/media/MediaModal.jsx b/src/components/media/MediaModal.jsx
index 621eee1d3..07f6caebf 100644
--- a/src/components/media/MediaModal.jsx
+++ b/src/components/media/MediaModal.jsx
@@ -6,34 +6,61 @@ import mediaStyles from '../../styles/isomer-cms/pages/Media.module.scss';
import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
import MediaCard from './MediaCard';
import MediaUploadCard from './MediaUploadCard';
+import { MediaSearchBar } from './MediaSearchBar';
import LoadingButton from '../LoadingButton';
-export default class MediasModal extends Component {
+export default class MediaModal extends Component {
constructor(props) {
super(props);
this.state = {
medias: '',
+ filteredMedias: '',
selectedFile: null,
};
}
async componentDidMount() {
- const { siteName, type } = this.props;
+ const { siteName, type, mediaSearchTerm } = this.props;
const mediaRoute = type === 'file' ? 'documents' : 'images';
try {
const { data: { documents, images } } = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${mediaRoute}`, {
withCredentials: true,
});
if (_.isEmpty(documents || images)) {
- this.setState({ medias: [] });
+ this.setState({ medias: [], filteredMedias: [], searchTerm: mediaSearchTerm });
} else {
- this.setState({ medias: documents || images });
+ let filteredMedias
+ if (type === 'file') {
+ filteredMedias = this.filterMediaByFileName(documents, mediaSearchTerm)
+ } else {
+ filteredMedias = this.filterMediaByFileName(images, mediaSearchTerm)
+ }
+
+ this.setState({ medias: documents || images, filteredMedias, searchTerm: mediaSearchTerm });
}
} catch (err) {
console.error(err);
}
}
+ filterMediaByFileName = (medias, filterTerm) => {
+ const filteredMedias = medias.filter((media) => {
+ if (media.fileName.toLowerCase().includes(filterTerm.toLowerCase())) return true
+ return false
+ })
+
+ return filteredMedias
+ }
+
+ searchChangeHandler = (event) => {
+ const { setMediaSearchTerm } = this.props
+ const { medias } = this.state
+ const { target: { value } } = event
+ const filteredMedias = this.filterMediaByFileName(medias, value)
+ setMediaSearchTerm(value)
+ this.setState({ filteredMedias })
+ }
+
render() {
const {
siteName,
@@ -41,15 +68,19 @@ export default class MediasModal extends Component {
onMediaSelect,
type,
readFileToStageUpload,
+ mediaSearchTerm,
+ selectedFile,
+ setSelectedFile,
} = this.props;
- const { medias, selectedFile } = this.state;
- return (medias
+ const { filteredMedias } = this.state;
+ return (filteredMedias
&& (
<>
-
{`Select ${type === 'file' ? 'File' : 'Image'}`}
+
{`Select ${type === 'file' ? 'File' : 'Image'}`}
+
@@ -69,16 +100,16 @@ export default class MediasModal extends Component {
type="file"
id="file-upload"
accept={type === 'file' ? `application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
- text/plain, application/pdf` : 'image*'}
+ text/plain, application/pdf` : 'image/*'}
hidden
/>
{/* Render medias */}
- {medias.map((media) => (
+ {filteredMedias.map((media) => (
this.setState({ selectedFile: media })}
+ onClick={() => setSelectedFile(media)}
key={media.path}
isSelected={media.path === selectedFile?.path}
/>
@@ -107,9 +138,10 @@ export default class MediasModal extends Component {
}
}
-MediasModal.propTypes = {
+MediaModal.propTypes = {
onClose: PropTypes.func.isRequired,
siteName: PropTypes.string.isRequired,
onMediaSelect: PropTypes.func.isRequired,
type: PropTypes.oneOf(['file', 'image']).isRequired,
+ setMediaSearchTerm: PropTypes.func.isRequired,
};
diff --git a/src/components/media/MediaSearchBar.jsx b/src/components/media/MediaSearchBar.jsx
new file mode 100644
index 000000000..0721bc699
--- /dev/null
+++ b/src/components/media/MediaSearchBar.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
+
+
+export const MediaSearchBar = ({
+ value,
+ onSearchChange,
+}) => {
+ return (
+
+
+ )
+}
+
+MediaSearchBar.propTypes = {
+ value: PropTypes.string,
+ onSearchChange: PropTypes.func.isRequired,
+ };
\ No newline at end of file
diff --git a/src/components/media/MediaSettingsModal.jsx b/src/components/media/MediaSettingsModal.jsx
index 6d3e1a027..cf12cbfe6 100644
--- a/src/components/media/MediaSettingsModal.jsx
+++ b/src/components/media/MediaSettingsModal.jsx
@@ -1,17 +1,19 @@
import React, { Component } 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 FormField from '../FormField';
import DeleteWarningModal from '../DeleteWarningModal';
import SaveDeleteButtons from '../SaveDeleteButtons';
+
import { validateFileName } from '../../utils/validators';
-import { toast } from 'react-toastify';
-import Toast from '../Toast';
import {
- DEFAULT_ERROR_TOAST_MSG,
+ DEFAULT_RETRY_MSG,
} from '../../utils'
+import { errorToast } from '../../utils/toasts';
+
+import mediaStyles from '../../styles/isomer-cms/pages/Media.module.scss';
+import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
export default class MediaSettingsModal extends Component {
constructor(props) {
@@ -86,25 +88,16 @@ export default class MediaSettingsModal extends Component {
withCredentials: true,
});
}
- onSave()
+ onSave(newFileName)
} catch (err) {
if (err?.response?.status === 409) {
// Error due to conflict in name
- toast(
-
- Edit
- { ' ' }
- { type }
+ {isPendingUpload ? `Upload new ${type}` : `Edit ${type} details`}
-
this.setState({ canShowDeleteWarningModal: true })}
+ isLoading={isPendingUpload ? false : !sha}
/>
diff --git a/src/components/navbar/NavSection.jsx b/src/components/navbar/NavSection.jsx
new file mode 100644
index 000000000..ce6ca947d
--- /dev/null
+++ b/src/components/navbar/NavSection.jsx
@@ -0,0 +1,345 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Droppable, Draggable } from 'react-beautiful-dnd';
+import Select from 'react-select';
+import styles from '../../styles/App.module.scss';
+import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
+import FormField from '../FormField';
+import NavSublinkSection from './NavSublinkSection'
+import { isEmpty } from '../../utils';
+
+/* eslint
+ react/no-array-index-key: 0
+ */
+
+const defaultText = '--Choose a collection--'
+
+const NavElem = ({
+ title,
+ options,
+ collection,
+ url,
+ linkIndex,
+ sublinks,
+ isResource,
+ onFieldChange,
+ createHandler,
+ deleteHandler,
+ displayHandler,
+ shouldDisplay,
+ displaySublinks,
+ linkErrors,
+ sublinkErrors,
+}) => {
+ const collectionDropdownHandler = (newValue) => {
+ let event;
+ if (!newValue) {
+ // Field was cleared
+ event = {
+ target: {
+ id: `link-${linkIndex}-collection`,
+ value: '',
+ }
+ }
+ } else {
+ const { value } = newValue
+ event = {
+ target: {
+ id: `link-${linkIndex}-collection`,
+ value,
+ }
+ }
+ }
+
+ onFieldChange(event);
+ };
+
+ const generateTitle = () => {
+ if (collection) {
+ return `${title}`
+ }
+ if (sublinks) {
+ return `${title}`
+ }
+ if (isResource) {
+ return `${title}`
+ }
+ return `${title}`
+ }
+
+ return (
+
+
+
+ {generateTitle()}
+
+
+
+
+ { shouldDisplay
+ ? (
+ <>
+
+
+ {
+ collection &&
+ <>
+
Folder
+
+
+ }
+ {
+ (!collection && !isResource) &&
+
+ }
+ {
+ sublinks &&
+
+ }
+
+
+ Delete Menu
+
+
+ )
+ : null}
+
+ {(droppableProvided) => (
+ /* eslint-disable react/jsx-props-no-spreading */
+
+ { (links && links.length > 0)
+ ? <>
+
Menu
+ {links.map((link, linkIndex) => (
+
+ {(draggableProvided) => (
+
+
+ )}
+
+ ))}
+
+ : null}
+ {droppableProvided.placeholder}
+
+
+ setNewSectionType(option ? option.value : '')}
+ placeholder={"Select link type..."}
+ options={sectionCreationOptions}
+ />
+ Create New Menu
+
+
+ {`Note: you can specify a folder ${hasResourceRoom ? `or resource room ` : ``}to automatically populate its links. ${hasResourceRoom ? `Only one resource room link is allowed. ` : ``}Select "Submenu" if you want to specify your own links.`}
+
+
+ )
+};
+
+export default NavSection;
+
+NavElem.propTypes = {
+ title: PropTypes.string,
+ url: PropTypes.string,
+ collection: PropTypes.string,
+ sublinks: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ),
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ }),
+ ).isRequired,
+ isResource: PropTypes.bool,
+ linkIndex: PropTypes.number.isRequired,
+ onFieldChange: PropTypes.func.isRequired,
+ createHandler: PropTypes.func.isRequired,
+ deleteHandler: PropTypes.func.isRequired,
+ displayHandler: PropTypes.func.isRequired,
+ shouldDisplay: PropTypes.bool,
+ displaySublinks: PropTypes.arrayOf(PropTypes.bool),
+ linkErrors: PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ sublinkErrors: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ )
+};
+
+NavSection.propTypes = {
+ links: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ collection: PropTypes.string,
+ resource_room: PropTypes.bool,
+ sublinks: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ )
+ }),
+ ).isRequired,
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ }),
+ ).isRequired,
+ createHandler: PropTypes.func.isRequired,
+ deleteHandler: PropTypes.func.isRequired,
+ onFieldChange: PropTypes.func.isRequired,
+ displayHandler: PropTypes.func.isRequired,
+ displayLinks: PropTypes.arrayOf(PropTypes.bool).isRequired,
+ displaySublinks: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)).isRequired,
+ hasResourceRoom: PropTypes.bool.isRequired,
+ hasResources: PropTypes.bool.isRequired,
+ errors: PropTypes.shape({
+ links: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ),
+ sublinks: PropTypes.arrayOf(
+ PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ )
+ ),
+ })
+
+};
diff --git a/src/components/navbar/NavSublinkSection.jsx b/src/components/navbar/NavSublinkSection.jsx
new file mode 100644
index 000000000..88fd8ca92
--- /dev/null
+++ b/src/components/navbar/NavSublinkSection.jsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Droppable, Draggable } from 'react-beautiful-dnd';
+import styles from '../../styles/App.module.scss';
+import elementStyles from '../../styles/isomer-cms/Elements.module.scss';
+import FormField from '../FormField';
+import { isEmpty } from '../../utils';
+
+const SublinkElem = ({
+ title,
+ url,
+ linkIndex,
+ sublinkIndex,
+ onFieldChange,
+ deleteHandler,
+ shouldDisplay,
+ displayHandler,
+ errors,
+}) => (
+
+
+
+ {title}
+
+
+
+
+ { shouldDisplay
+ ? (
+ <>
+
+
+
+ Delete Submenu
+
+
+ )
+ : null}
+
+ {(droppableProvided) => (
+ /* eslint-disable react/jsx-props-no-spreading */
+
+ { (sublinks && sublinks.length > 0)
+ ? <>
+
Submenu
+ {sublinks.map((sublink, sublinkIndex) => (
+
+ {(draggableProvided) => (
+
+
+ )}
+
+ ))}
+
+ : null}
+ {droppableProvided.placeholder}
+
Create Submenu
+
+)
+
+export default NavSublinkSection
+
+SublinkElem.propTypes = {
+ title: PropTypes.string,
+ url: PropTypes.string,
+ linkIndex: PropTypes.number.isRequired,
+ sublinkIndex: PropTypes.number.isRequired,
+ onFieldChange: PropTypes.func.isRequired,
+ deleteHandler: PropTypes.func.isRequired,
+ shouldDisplay: PropTypes.bool,
+ displayHandler: PropTypes.func.isRequired,
+ errors: PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+};
+
+NavSublinkSection.propTypes = {
+ linkIndex: PropTypes.number,
+ sublinks: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ),
+ createHandler: PropTypes.func.isRequired,
+ deleteHandler: PropTypes.func.isRequired,
+ onFieldChange: PropTypes.func.isRequired,
+ displayHandler: PropTypes.func.isRequired,
+ displaySublinks: PropTypes.arrayOf(PropTypes.bool),
+ errors: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ )
+};
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 000000000..3565f9423
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,11 @@
+/**
+ * React query keys
+ */
+export const PAGE_CONTENT_KEY = 'page-contents';
+export const DIR_CONTENT_KEY = 'dir-contents';
+export const CSP_CONTENT_KEY = 'csp-contents';
+export const NAVIGATION_CONTENT_KEY = 'navigation-contents';
+export const RESOURCE_CATEGORY_CONTENT_KEY = 'resource-category-contents'
+export const RESOURCE_ROOM_CONTENT_KEY = 'resource-room-contents'
+export const FOLDERS_CONTENT_KEY = 'folders-contents'
+export const LAST_UPDATED_KEY = 'last-updated'
diff --git a/src/hooks/useRedirectHook.jsx b/src/hooks/useRedirectHook.jsx
new file mode 100644
index 000000000..5f7735174
--- /dev/null
+++ b/src/hooks/useRedirectHook.jsx
@@ -0,0 +1,57 @@
+import { useContext, useEffect, useState } from "react"
+import { useHistory } from "react-router-dom"
+import axios from 'axios'
+
+// Import context
+const { LoginContext } = require('../contexts/LoginContext')
+
+// constants
+const userIdKey = "userId"
+const BACKEND_URL = process.env.REACT_APP_BACKEND_URL
+
+const useRedirectHook = () => {
+ const [shouldRedirect, setShouldRedirect] = useState(false)
+ const [redirectUrl, setRedirectUrl] = useState('')
+ const [redirectComponentState, setRedirectComponentState] = useState({})
+ const history = useHistory()
+ const { setLogoutState } = useContext(LoginContext)
+
+ useEffect(() => {
+ if (shouldRedirect) {
+ setShouldRedirect(false)
+ history.push({
+ pathname: redirectUrl,
+ state: redirectComponentState
+ })
+ }
+ }, [shouldRedirect])
+
+ const setRedirectToNotFound = (siteName) => {
+ setRedirectUrl("/not-found")
+ setRedirectComponentState({ siteName })
+ setShouldRedirect(true)
+ }
+
+ const setRedirectToPage = (url) => {
+ setRedirectUrl(url)
+ setShouldRedirect(true)
+ }
+
+ const setRedirectToLogout = async () => {
+ try {
+ // Call the logout endpoint in the API server to clear the browser cookie
+ localStorage.removeItem(userIdKey)
+ await axios.get(`${BACKEND_URL}/auth/logout`)
+ setRedirectUrl("/")
+ setRedirectComponentState({ isFromSignOutButton: true })
+ setShouldRedirect(true)
+ setLogoutState()
+ } catch (err) {
+ console.error(err)
+ }
+ }
+
+ return { setRedirectToNotFound, setRedirectToPage, setRedirectToLogout }
+}
+
+export default useRedirectHook;
\ No newline at end of file
diff --git a/src/hooks/useSiteColorsHook.jsx b/src/hooks/useSiteColorsHook.jsx
new file mode 100644
index 000000000..30e34d8e3
--- /dev/null
+++ b/src/hooks/useSiteColorsHook.jsx
@@ -0,0 +1,61 @@
+// Utils
+import { defaultSiteColors, getSiteColors, createPageStyleSheet } from '../utils/siteColorUtils';
+
+// Constants
+const LOCAL_STORAGE_SITE_COLORS = 'isomercms_colors'
+
+const useSiteColorsHook = () => {
+ const getLocalStorageSiteColors = () => {
+ const localStorageSiteColors = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SITE_COLORS))
+ return localStorageSiteColors
+ }
+
+ const setLocalStorageSiteColors = (newSiteColors) => {
+ localStorage.setItem(LOCAL_STORAGE_SITE_COLORS, JSON.stringify(newSiteColors))
+ }
+
+ const retrieveSiteColors = async (siteName) => {
+ const siteColors = getLocalStorageSiteColors()
+ // if (!siteColors[siteName]) {
+ if (!siteColors || !siteColors[siteName]) {
+
+ const {
+ primaryColor,
+ secondaryColor,
+ } = await getSiteColors(siteName)
+
+ setLocalStorageSiteColors({
+ ...siteColors,
+ [siteName]: {
+ primaryColor,
+ secondaryColor,
+ },
+ })
+ }
+ }
+
+ const generatePageStyleSheet = (siteName) => {
+ const siteColors = getLocalStorageSiteColors()
+
+ let primaryColor = defaultSiteColors.default.primaryColor
+ let secondaryColor = defaultSiteColors.default.secondaryColor
+
+ if (siteColors[siteName]) {
+ const {
+ primaryColor: sitePrimaryColor,
+ secondaryColor: siteSecondaryColor,
+ } = siteColors[siteName]
+ primaryColor = sitePrimaryColor
+ secondaryColor = siteSecondaryColor
+ }
+
+ createPageStyleSheet(siteName, primaryColor, secondaryColor)
+ }
+
+ return {
+ retrieveSiteColors,
+ generatePageStyleSheet,
+ }
+}
+
+export default useSiteColorsHook;
\ No newline at end of file
diff --git a/src/hooks/useSiteUrlHook.jsx b/src/hooks/useSiteUrlHook.jsx
new file mode 100644
index 000000000..07223b4e4
--- /dev/null
+++ b/src/hooks/useSiteUrlHook.jsx
@@ -0,0 +1,48 @@
+import axios from 'axios';
+// Constants
+const LOCAL_STORAGE_SITE_URL = 'isomercms_site_url'
+
+const useSiteUrlHook = () => {
+ const getSiteUrl = (siteName, type) => {
+ const siteUrlObj = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SITE_URL))
+ if (siteUrlObj && siteUrlObj[siteName]) return siteUrlObj[siteName][type]
+ return null
+ }
+
+ const setSiteUrl = (newUrl, siteName, type) => {
+ const siteUrlObj = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SITE_URL)) || {}
+ if (!(siteUrlObj.hasOwnProperty(siteName))) siteUrlObj[siteName] = {}
+ siteUrlObj[siteName][type] = newUrl
+ localStorage.setItem(LOCAL_STORAGE_SITE_URL, JSON.stringify({...siteUrlObj}))
+ }
+
+ const retrieveUrl = async (siteName, type) => {
+ const localStorageSiteUrl = getSiteUrl(siteName, type)
+ if (!localStorageSiteUrl) {
+ let url
+ if (type === 'staging') {
+ const resp = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/stagingUrl`);
+ url = resp.data.stagingUrl
+ }
+ if (type === 'site') {
+ const settingsResp = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/settings`);
+ url = settingsResp.data.settings.configFieldsRequired.url;
+ }
+ setSiteUrl(url, siteName, type)
+ return url
+ }
+ return localStorageSiteUrl
+ }
+
+ const retrieveStagingUrl = async(siteName) => {
+ return await retrieveUrl(siteName, 'staging')
+ }
+
+ const retrieveSiteUrl = async(siteName) => {
+ return await retrieveUrl(siteName, 'site')
+ }
+
+ return { retrieveStagingUrl, retrieveSiteUrl }
+}
+
+export default useSiteUrlHook;
\ No newline at end of file
diff --git a/src/layouts/AuthCallback.jsx b/src/layouts/AuthCallback.jsx
index 4331f305c..a6ee9974f 100644
--- a/src/layouts/AuthCallback.jsx
+++ b/src/layouts/AuthCallback.jsx
@@ -1,7 +1,12 @@
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
import { Redirect } from 'react-router-dom';
-const AuthCallback = ({ setLogin, isLoggedIn }) => {
+// Import contexts
+const { LoginContext } = require('../contexts/LoginContext')
+
+const AuthCallback = () => {
+ const { setLogin, isLoggedIn } = useContext(LoginContext)
+
useEffect(() => {
if (!isLoggedIn) setLogin()
}, [isLoggedIn])
diff --git a/src/layouts/CategoryPages.jsx b/src/layouts/CategoryPages.jsx
index 5c45cb7f6..288d0bd85 100644
--- a/src/layouts/CategoryPages.jsx
+++ b/src/layouts/CategoryPages.jsx
@@ -1,6 +1,8 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
+import { useQuery } from 'react-query';
+import { Link } from 'react-router-dom';
// Import components
import Header from '../components/Header';
@@ -12,7 +14,11 @@ import elementStyles from '../styles/isomer-cms/Elements.module.scss';
import contentStyles from '../styles/isomer-cms/pages/Content.module.scss';
//Import utils
-import { retrieveResourceFileMetadata } from '../utils.js'
+import { retrieveResourceFileMetadata, deslugifyDirectory } from '../utils.js'
+import { errorToast } from '../utils/toasts';
+import { getResourcePages } from '../api'
+import { RESOURCE_CATEGORY_CONTENT_KEY } from '../constants'
+import useRedirectHook from '../hooks/useRedirectHook';
// Constants
const BACKEND_URL = process.env.REACT_APP_BACKEND_URL
@@ -33,14 +39,31 @@ const getBackButtonInfo = (pathname) => {
const CategoryPages = ({ match, location, isResource }) => {
const { backButtonLabel, backButtonUrl } = getBackButtonInfo(location.pathname)
const { collectionName, siteName } = match.params;
+ const { setRedirectToPage } = useRedirectHook()
const [categoryPages, setCategoryPages] = useState()
+ const { data: resourcePagesResp, refetch: refetchPages } = useQuery(
+ [RESOURCE_CATEGORY_CONTENT_KEY, siteName, collectionName, isResource],
+ () => getResourcePages(siteName, collectionName),
+ {
+ retry: false,
+ onError: (err) => {
+ console.log(err)
+ if (err.response && err.response.status === 404 && isResource) {
+ setRedirectToPage(`/sites/${siteName}/resources`)
+ } else {
+ errorToast()
+ }
+ }
+ },
+ );
+
useEffect(() => {
let _isMounted = true
const fetchData = async () => {
if (isResource) {
- const resourcePagesResp = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/resources/${collectionName}`);
+ if (!resourcePagesResp) return
const { resourcePages } = resourcePagesResp.data;
if (resourcePages.length > 0) {
@@ -64,11 +87,12 @@ const CategoryPages = ({ match, location, isResource }) => {
}
fetchData()
return () => { _isMounted = false }
- }, [])
+ }, [resourcePagesResp])
return (
<>
@@ -79,7 +103,19 @@ const CategoryPages = ({ match, location, isResource }) => {
{/* Collection title */}
-
{collectionName}
+ {deslugifyDirectory(collectionName)}
+
+
+
+ Resources >
+ {
+ collectionName
+ ? (
+ {deslugifyDirectory(collectionName)}
{/* Collection pages */}
{
pages={categoryPages}
siteName={siteName}
isResource={isResource}
+ refetchPages={refetchPages}
/>
-
Back to Sites
-
-
{siteName}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Collections
- {collections.length > 0
- ? collections.map((collection) => (
-
-
- ))
- : 'No collections'}
-
-
-
-
Create new collection
-
-
-
-
Delete collection
-
-
-
-
-
Rename collection
-
this.setState({ itemPendingForDelete: { id: null, type: '' } })}
- onDelete={() => { this.deleteHandler(itemPendingForDelete.id); this.setState({ itemPendingForDelete: { id: null, type: '' } }); }}
- type={itemPendingForDelete.type}
- />
- )
- }
- {
+ return !isEmpty(errors.contacts) || !isEmpty(errors.locations)
+ }
+
+ const hasChanges = () => {
+ return JSON.stringify(sanitisedOriginalFrontMatter) === JSON.stringify(frontMatter) && JSON.stringify(footerContent) === JSON.stringify(originalFooterContent)
+ }
+
+ return (
+ <>
+ { showDeletedText && !isEmpty(deletedFrontMatter)
+ &&
+ setItemPendingForDelete({ id: null, type: '' })}
+ onDelete={() => { deleteHandler(itemPendingForDelete.id); setItemPendingForDelete({ id: null, type: '' }); }}
+ type={itemPendingForDelete.type}
/>
+ )
+ }
+
+ { hasLoaded &&
@@ -752,39 +663,39 @@ export default class EditContactUs extends Component {
-
+
this.setState({ itemPendingForDelete: { id: event.target.id, type } })}
- shouldDisplay={sectionsDisplay.locations}
+ cards={frontMatter.locations}
+ onFieldChange={onFieldChange}
+ createHandler={createHandler}
+ deleteHandler={(event, type) => setItemPendingForDelete({ id: event.target.id, type })}
+ shouldDisplay={displaySections.sectionsDisplay.locations}
displayCards={displaySections.locations}
- displayHandler={this.displayHandler}
+ displayHandler={displayHandler}
errors={errors.locations}
sectionId={'locations'}
/>
this.setState({ itemPendingForDelete: { id: event.target.id, type } })}
- shouldDisplay={sectionsDisplay.contacts}
+ cards={frontMatter.contacts}
+ onFieldChange={onFieldChange}
+ createHandler={createHandler}
+ deleteHandler={(event, type) => setItemPendingForDelete({ id: event.target.id, type })}
+ shouldDisplay={displaySections.sectionsDisplay.contacts}
displayCards={displaySections.contacts}
- displayHandler={this.displayHandler}
+ displayHandler={displayHandler}
errors={errors.contacts}
sectionId={'contacts'}
/>
@@ -795,8 +706,8 @@ export default class EditContactUs extends Component {
{/* contact-us header */}
{/* contact-us content */}
@@ -804,18 +715,18 @@ export default class EditContactUs extends Component {
@@ -823,36 +734,29 @@ export default class EditContactUs extends Component {
- { hasDeletions &&
+ { !isEmpty(deletedFrontMatter) &&
{this.setState({showDeletedText: true})}}
+ callback={() => {setShowDeletedText(true)}}
/>
}
-
- {
- this.state.shouldRedirectToNotFound &&
-
- }
-
- );
- }
+
+ }
+
+ )
}
+export default EditContactUs
+
EditContactUs.propTypes = {
match: PropTypes.shape({
params: PropTypes.shape({
diff --git a/src/layouts/EditHomepage.jsx b/src/layouts/EditHomepage.jsx
index e7c6b71ea..9cc6b1e56 100644
--- a/src/layouts/EditHomepage.jsx
+++ b/src/layouts/EditHomepage.jsx
@@ -1,34 +1,35 @@
-import React, { Component } from 'react';
+import React, { useEffect, createRef, useState } from 'react';
import axios from 'axios';
import _ from 'lodash';
-import { Base64 } from 'js-base64';
import PropTypes from 'prop-types';
import update from 'immutability-helper';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import '../styles/isomer-template.scss';
-import TemplateHeroSection from '../templates/homepage/HeroSection';
-import TemplateInfobarSection from '../templates/homepage/InfobarSection';
-import TemplateInfopicLeftSection from '../templates/homepage/InfopicLeftSection';
-import TemplateInfopicRightSection from '../templates/homepage/InfopicRightSection';
-import TemplateResourcesSection from '../templates/homepage/ResourcesSection';
-import { DEFAULT_ERROR_TOAST_MSG, frontMatterParser, concatFrontMatterMdBody } from '../utils';
-import {
- createPageStyleSheet,
- getSiteColors,
-} from '../utils/siteColorUtils';
+
import EditorInfobarSection from '../components/homepage/InfobarSection';
import EditorInfopicSection from '../components/homepage/InfopicSection';
import EditorResourcesSection from '../components/homepage/ResourcesSection';
import EditorHeroSection from '../components/homepage/HeroSection';
import NewSectionCreator from '../components/homepage/NewSectionCreator';
-import elementStyles from '../styles/isomer-cms/Elements.module.scss';
-import editorStyles from '../styles/isomer-cms/pages/Editor.module.scss';
import Header from '../components/Header';
import LoadingButton from '../components/LoadingButton';
-import { validateSections, validateHighlights, validateDropdownElems } from '../utils/validators';
import DeleteWarningModal from '../components/DeleteWarningModal';
-import { toast } from 'react-toastify';
-import Toast from '../components/Toast';
+
+import TemplateHeroSection from '../templates/homepage/HeroSection';
+import TemplateInfobarSection from '../templates/homepage/InfobarSection';
+import TemplateInfopicLeftSection from '../templates/homepage/InfopicLeftSection';
+import TemplateInfopicRightSection from '../templates/homepage/InfopicRightSection';
+import TemplateResourcesSection from '../templates/homepage/ResourcesSection';
+
+import { frontMatterParser, concatFrontMatterMdBody, DEFAULT_RETRY_MSG } from '../utils';
+import { validateSections, validateHighlights, validateDropdownElems } from '../utils/validators';
+import { errorToast } from '../utils/toasts';
+
+import '../styles/isomer-template.scss';
+import elementStyles from '../styles/isomer-cms/Elements.module.scss';
+import editorStyles from '../styles/isomer-cms/pages/Editor.module.scss';
+
+// Import hooks
+import useSiteColorsHook from '../hooks/useSiteColorsHook';
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/no-array-index-key */
@@ -97,189 +98,184 @@ const enumSection = (type, isErrorConstructor) => {
}
};
-export default class EditHomepage extends Component {
- _isMounted = false
-
- constructor(props) {
- super(props);
- this.scrollRefs = [];
- this.state = {
- frontMatter: {
- title: '',
- subtitle: '',
- description: '',
- image: '',
- notification: '',
- sections: [],
- },
- sha: null,
- hasResources: false,
- dropdownIsActive: false,
- displaySections: [],
- displayHighlights: [],
- displayDropdownElems: [],
- errors: {
- sections: [],
- highlights: [],
- dropdownElems: [],
- },
- itemPendingForDelete: {
- id: '',
- type: '',
- },
- savedHeroElems: '',
- savedHeroErrors: '',
- };
- }
-
- async componentDidMount() {
- const { match, siteColors, setSiteColors } = this.props;
- const { siteName } = match.params;
- this._isMounted = true
-
- // Set page colors
- try {
- let primaryColor
- let secondaryColor
-
- if (!siteColors[siteName]) {
- const {
- primaryColor: sitePrimaryColor,
- secondaryColor: siteSecondaryColor,
- } = await getSiteColors(siteName)
-
- primaryColor = sitePrimaryColor
- secondaryColor = siteSecondaryColor
-
- if (this._isMounted) setSiteColors((prevState) => ({
- ...prevState,
- [siteName]: {
- primaryColor,
- secondaryColor,
- }
- }))
- } else {
- primaryColor = siteColors[siteName].primaryColor
- secondaryColor = siteColors[siteName].secondaryColor
+const EditHomepage = ({ match }) => {
+ const { retrieveSiteColors, generatePageStyleSheet } = useSiteColorsHook()
+
+ const { siteName } = match.params;
+ const [hasLoaded, setHasLoaded] = useState(false)
+ const [scrollRefs, setScrollRefs] = useState([])
+ const [hasErrors, setHasErrors] = useState(false)
+ const [frontMatter, setFrontMatter] = useState(
+ {
+ title: '',
+ subtitle: '',
+ description: '',
+ image: '',
+ notification: '',
+ sections: [],
+ }
+ )
+ const [originalFrontMatter, setOriginalFrontMatter] = useState(
+ {
+ title: '',
+ subtitle: '',
+ description: '',
+ image: '',
+ notification: '',
+ sections: [],
+ }
+ )
+ const [sha, setSha] = useState(null)
+ const [hasResources, setHasResources] = useState(false)
+ const [dropdownIsActive, setDropdownIsActive] = useState(false)
+ const [displaySections, setDisplaySections] = useState([])
+ const [displayHighlights, setDisplayHighlights] = useState([])
+ const [displayDropdownElems, setDisplayDropdownElems] = useState([])
+ const [errors, setErrors] = useState(
+ {
+ sections: [],
+ highlights: [],
+ dropdownElems: [],
+ }
+ )
+ const [itemPendingForDelete, setItemPendingForDelete] = useState(
+ {
+ id: '',
+ type: '',
+ }
+ )
+ const [savedHeroElems, setSavedHeroElems] = useState('')
+ const [savedHeroErrors, setSavedHeroErrors] = useState('')
+
+ useEffect(() => {
+ let _isMounted = true
+ const loadPageDetails = async () => {
+ // // Set page colors
+ try {
+ await retrieveSiteColors(siteName)
+ generatePageStyleSheet(siteName)
+ } catch (err) {
+ console.log(err);
}
- createPageStyleSheet(siteName, primaryColor, secondaryColor)
-
- } catch (err) {
- console.log(err);
- }
+ try {
+ const resp = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/homepage`, {
+ withCredentials: true,
+ });
+ const { content, sha } = resp.data;
+ const { frontMatter } = frontMatterParser(content);
+ // Compute hasResources and set displaySections
+ let hasResources = false;
+ const displaySections = [];
+ let displayHighlights = [];
+ let displayDropdownElems = [];
+ const sectionsErrors = [];
+ let dropdownElemsErrors = [];
+ let highlightsErrors = [];
+ let scrollRefs = []
+ frontMatter.sections.forEach((section) => {
+ scrollRefs.push(createRef())
+ // If this is the hero section, hide all highlights/dropdownelems by default
+ if (section.hero) {
+ const { dropdown, key_highlights: keyHighlights } = section.hero;
+ const hero = { title: '', subtitle: '', background: '', button: '', url: '' }
+ if (dropdown) {
+ hero.dropdown = ''
+ // Go through section.hero.dropdown.options
+ displayDropdownElems = _.fill(Array(dropdown.options.length), false);
+ // Fill in dropdown elem errors array
+ dropdownElemsErrors = _.map(dropdown.options, () => DropdownElemConstructor(true));
+ }
+ if (keyHighlights) {
+ displayHighlights = _.fill(Array(keyHighlights.length), false);
+ // Fill in highlights errors array
+ highlightsErrors = _.map(keyHighlights, () => KeyHighlightConstructor(true));
+ }
+ // Fill in sectionErrors for hero
+ sectionsErrors.push({ hero })
+ }
- try {
- const resp = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/homepage`, {
- withCredentials: true,
- });
- const { content, sha } = resp.data;
- const base64DecodedContent = Base64.decode(content);
- const { frontMatter } = frontMatterParser(base64DecodedContent);
- // Compute hasResources and set displaySections
- let hasResources = false;
- const displaySections = [];
- let displayHighlights = [];
- let displayDropdownElems = [];
- const sectionsErrors = [];
- let dropdownElemsErrors = [];
- let highlightsErrors = [];
- frontMatter.sections.forEach((section) => {
- // If this is the hero section, hide all highlights/dropdownelems by default
- if (section.hero) {
- const { dropdown, key_highlights: keyHighlights } = section.hero;
- if (dropdown) {
- // Go through section.hero.dropdown.options
- displayDropdownElems = _.fill(Array(dropdown.options.length), false);
- // Fill in dropdown elem errors array
- dropdownElemsErrors = _.map(dropdown.options, () => DropdownElemConstructor(true));
- // Fill in sectionErrors for hero with dropdown
- sectionsErrors.push({
- hero: {
- title: '', subtitle: '', background: '', button: '', url: '', dropdown: '',
- },
- });
+ // Check if there is already a resources section
+ if (section.resources) {
+ sectionsErrors.push(ResourcesSectionConstructor(true));
+ hasResources = true;
}
- if (keyHighlights) {
- displayHighlights = _.fill(Array(keyHighlights.length), false);
- // Fill in highlights errors array
- highlightsErrors = _.map(keyHighlights, () => KeyHighlightConstructor(true));
- // Fill in sectionErrors for hero with key highlights
- sectionsErrors.push({
- hero: {
- title: '', subtitle: '', background: '', button: '', url: '',
- },
- });
+
+ if (section.infobar) {
+ sectionsErrors.push(InfobarSectionConstructor(true));
}
- if (!dropdown && !keyHighlights) {
- sectionsErrors.push({
- hero: {
- title: '', subtitle: '', background: '', button: '', url: '',
- },
- });
+
+ if (section.infopic) {
+ sectionsErrors.push(InfopicSectionConstructor(true));
}
- }
- // Check if there is already a resources section
- if (section.resources) {
- sectionsErrors.push(ResourcesSectionConstructor(true));
- hasResources = true;
- }
+ // Minimize all sections by default
+ displaySections.push(false);
+ });
- if (section.infobar) {
- sectionsErrors.push(InfobarSectionConstructor(true));
+ // Initialize errors object
+ const errors = {
+ sections: sectionsErrors,
+ highlights: highlightsErrors,
+ dropdownElems: dropdownElemsErrors,
+ };
+
+ if (_isMounted) {
+ setFrontMatter(frontMatter)
+ setOriginalFrontMatter(_.cloneDeep(frontMatter))
+ setSha(sha)
+ setHasResources(hasResources)
+ setDisplaySections(displaySections)
+ setDisplayDropdownElems(displayDropdownElems)
+ setDisplayHighlights(displayHighlights)
+ setErrors(errors)
+ setHasLoaded(true)
+ setScrollRefs(scrollRefs)
}
+ } catch (err) {
+ // Set frontMatter to be same to prevent warning message when navigating away
+ if (_isMounted) setFrontMatter(originalFrontMatter)
+ errorToast(`There was a problem trying to load your homepage. ${DEFAULT_RETRY_MSG}`)
+ console.log(err);
+ }
+ }
- if (section.infopic) {
- sectionsErrors.push(InfopicSectionConstructor(true));
- }
+ loadPageDetails()
+ return () => {
+ _isMounted = false
+ }
+ }, [])
- // Minimize all sections by default
- displaySections.push(false);
- });
+ useEffect(() => {
+ if (scrollRefs.length > 0) {
+ scrollRefs[frontMatter.sections.length-1].current.scrollIntoView();
+ }
+ }, [frontMatter.sections.length])
- // Initialize errors object
- const errors = {
- sections: sectionsErrors,
- highlights: highlightsErrors,
- dropdownElems: dropdownElemsErrors,
- };
+ useEffect(() => {
+ const hasSectionErrors = _.some(errors.sections, (section) => {
+ // Section is an object, e.g. { hero: {} }
+ // _.keys(section) produces an array with length 1
+ // The 0th element of the array contains the sectionType
+ const sectionType = _.keys(section)[0];
+ return _.some(section[sectionType], (errorMessage) => errorMessage.length > 0) === true;
+ })
- if (this._isMounted) this.setState({
- frontMatter,
- originalFrontMatter: _.cloneDeep(frontMatter),
- sha,
- hasResources,
- displaySections,
- displayDropdownElems,
- displayHighlights,
- errors,
- });
- } catch (err) {
- // Set frontMatter to be same to prevent warning message when navigating away
- this.setState( {frontMatter: this.state.originalFrontMatter} )
- toast(
- this.setState({ itemPendingForDelete: { id: null, type: '' } })}
- onDelete={() => { this.deleteHandler(itemPendingForDelete.id); this.setState({ itemPendingForDelete: { id: null, type: '' } }); }}
+ onCancel={() => setItemPendingForDelete({ id: null, type: '' })}
+ onDelete={() => { deleteHandler(itemPendingForDelete.id); setItemPendingForDelete({ id: null, type: '' })}}
type={itemPendingForDelete.type}
/>
)
}
+ {hasLoaded &&
@@ -1196,14 +1090,14 @@ export default class EditHomepage extends Component {
placeholder="Notification"
value={frontMatter.notification}
id="site-notification"
- onChange={this.onFieldChange} />
+ onChange={onFieldChange} />
Note: Leave text field empty if you don’t need this notification bar
{/* Homepage section configurations */}
-
+
{(droppableProvided) => (
this.setState({ itemPendingForDelete: { id: event.target.id, type } })}
+ onFieldChange={onFieldChange}
+ createHandler={createHandler}
+ deleteHandler={(event, type) => setItemPendingForDelete({ id: event.target.id, type })}
shouldDisplay={displaySections[sectionIndex]}
displayHighlights={displayHighlights}
displayDropdownElems={displayDropdownElems}
- displayHandler={this.displayHandler}
- onDragEnd={this.onDragEnd}
+ displayHandler={displayHandler}
+ onDragEnd={onDragEnd}
errors={errors}
siteName={siteName}
- handleHighlightDropdownToggle={this.handleHighlightDropdownToggle}
+ handleHighlightDropdownToggle={handleHighlightDropdownToggle}
/>
) : (
@@ -1260,10 +1154,10 @@ export default class EditHomepage extends Component {
subtitle={section.resources.subtitle}
button={section.resources.button}
sectionIndex={sectionIndex}
- deleteHandler={(event) => this.setState({ itemPendingForDelete: { id: event.target.id, type: 'Resources Section' } })}
- onFieldChange={this.onFieldChange}
+ deleteHandler={(event) => setItemPendingForDelete({ id: event.target.id, type: 'Resources Section' })}
+ onFieldChange={onFieldChange}
shouldDisplay={displaySections[sectionIndex]}
- displayHandler={this.displayHandler}
+ displayHandler={displayHandler}
errors={errors.sections[sectionIndex].resources}
/>
@@ -1293,10 +1187,10 @@ export default class EditHomepage extends Component {
button={section.infobar.button}
url={section.infobar.url}
sectionIndex={sectionIndex}
- deleteHandler={(event) => this.setState({ itemPendingForDelete: { id: event.target.id, type: 'Infobar Section' } })}
- onFieldChange={this.onFieldChange}
+ deleteHandler={(event) => setItemPendingForDelete({ id: event.target.id, type: 'Infobar Section' })}
+ onFieldChange={onFieldChange}
shouldDisplay={displaySections[sectionIndex]}
- displayHandler={this.displayHandler}
+ displayHandler={displayHandler}
errors={errors.sections[sectionIndex].infobar}
/>
@@ -1328,10 +1222,10 @@ export default class EditHomepage extends Component {
imageUrl={section.infopic.image}
imageAlt={section.infopic.alt}
sectionIndex={sectionIndex}
- deleteHandler={(event) => this.setState({ itemPendingForDelete: { id: event.target.id, type: 'Infopic Section' } })}
- onFieldChange={this.onFieldChange}
+ deleteHandler={(event) => setItemPendingForDelete({ id: event.target.id, type: 'Infopic Section' })}
+ onFieldChange={onFieldChange}
shouldDisplay={displaySections[sectionIndex]}
- displayHandler={this.displayHandler}
+ displayHandler={displayHandler}
errors={errors.sections[sectionIndex].infopic}
siteName={siteName}
/>
@@ -1356,7 +1250,7 @@ export default class EditHomepage extends Component {
{/* Section creator */}
@@ -1385,35 +1279,37 @@ export default class EditHomepage extends Component {
{/* Hero section */}
{section.hero
? (
-
{ this.scrollRefs[sectionIndex] = ref; }}>
+ <>
+
)
: null}
{/* Resources section */}
{section.resources
? (
-
{ this.scrollRefs[sectionIndex] = ref; }}>
+ <>
+
)
: null}
{/* Infobar section */}
{section.infobar
? (
-
{ this.scrollRefs[sectionIndex] = ref; }}>
+ <>
+
)
: null}
{/* Infopic section */}
{section.infopic
? (
-
{ this.scrollRefs[sectionIndex] = ref; }}>
+ <>
{ isLeftInfoPic(sectionIndex)
? (
+
)
: null}
@@ -1468,15 +1367,16 @@ export default class EditHomepage extends Component {
disabled={hasErrors}
disabledStyle={elementStyles.disabled}
className={(hasErrors || !sha) ? elementStyles.disabled : elementStyles.blue}
- callback={this.savePage}
+ callback={savePage}
/>
-
+