From 4a33486ec602118a5919ce226b4ae36e949b3d9c Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 5 May 2022 22:42:35 +0200 Subject: [PATCH] useFolderStructure: Move root folder creation into hook --- .../src/components/EditAssetDialog/index.js | 27 ++++++++--- .../EditFolderDialog/EditFolderDialog.js | 46 ++++--------------- .../admin/src/hooks/useFolderStructure.js | 17 ++++++- .../admin/src/pages/App/MediaLibrary.js | 1 + .../src/utils/findRecursiveFolderByValue.js | 17 +++++++ packages/core/upload/admin/src/utils/index.js | 1 + 6 files changed, 63 insertions(+), 46 deletions(-) create mode 100644 packages/core/upload/admin/src/utils/findRecursiveFolderByValue.js diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/index.js index 6fc3a5af38..0511609451 100644 --- a/packages/core/upload/admin/src/components/EditAssetDialog/index.js +++ b/packages/core/upload/admin/src/components/EditAssetDialog/index.js @@ -27,7 +27,7 @@ import * as yup from 'yup'; import { PreviewBox } from './PreviewBox'; import { ContextInfo } from '../ContextInfo'; -import { getTrad } from '../../utils'; +import { getTrad, findRecursiveFolderByValue } from '../../utils'; import formatBytes from '../../utils/formatBytes'; import { useEditAsset } from '../../hooks/useEditAsset'; import { ReplaceMediaButton } from './ReplaceMediaButton'; @@ -47,6 +47,7 @@ export const EditAssetDialog = ({ canCopyLink, canDownload, trackedLocation, + folderStructure, }) => { const { formatMessage, formatDate } = useIntl(); const submitButtonRef = useRef(null); @@ -94,18 +95,21 @@ export const EditAssetDialog = ({ } }; + const activeFolderId = asset?.folder?.id; const initialFormData = { name: asset.name, alternativeText: asset.alternativeText || '', caption: asset.caption || '', parent: { - value: null, - // TODO - label: 'Media Library', - ...asset?.folder?.parent, + value: activeFolderId ?? null, + label: + findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? + folderStructure[0].label, }, }; + console.log(asset); + const handleClose = values => { if (!isEqual(initialFormData, values)) { handleConfirmClose(); @@ -225,7 +229,7 @@ export const EditAssetDialog = ({ /> - + {formatMessage({ id: getTrad('form.input.label.file-location'), defaultMessage: 'Location', @@ -235,10 +239,18 @@ export const EditAssetDialog = ({ { setFieldValue('parent', value); }} + menuPortalTarget={document.querySelector('body')} + inputId="asset-folder" + {...(errors.parent + ? { + 'aria-errormessage': 'folder-parent-error', + 'aria-invalid': true, + } + : {})} /> @@ -298,5 +310,6 @@ EditAssetDialog.propTypes = { canCopyLink: PropTypes.bool.isRequired, canDownload: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, + folderStructure: PropTypes.array.isRequired, trackedLocation: PropTypes.string, }; diff --git a/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js b/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js index f038455005..c587c94e5b 100644 --- a/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js +++ b/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js @@ -19,7 +19,7 @@ import { Typography } from '@strapi/design-system/Typography'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { Form, useNotification, getAPIInnerErrors, useQueryParams } from '@strapi/helper-plugin'; -import { getTrad } from '../../utils'; +import { getTrad, findRecursiveFolderByValue } from '../../utils'; import { useEditFolder } from '../../hooks/useEditFolder'; import { ContextInfo } from '../ContextInfo'; import SelectTree from '../SelectTree'; @@ -34,51 +34,23 @@ const folderSchema = yup.object({ .nullable(true), }); -function findByValue(data, value) { - let result; - - function iter(a) { - if (a.value === value) { - result = a; - - return true; - } - - return Array.isArray(a.children) && a.children.some(iter); - } - - data.some(iter); - - return result; -} - -export const EditFolderDialog = ({ onClose, folder, folderStructure: remoteFolderStructure }) => { +export const EditFolderDialog = ({ onClose, folder, folderStructure }) => { const submitButtonRef = useRef(null); const { formatMessage, formatDate } = useIntl(); const { editFolder, isLoading } = useEditFolder(); const toggleNotification = useNotification(); const [{ query }] = useQueryParams(); - const rootFolder = { - value: null, - label: formatMessage({ - id: getTrad('form.input.label.folder-location-default-label'), - defaultMessage: 'Media Library', - }), - children: [], - }; - const folderStructure = [ - { - ...rootFolder, - children: remoteFolderStructure, - }, - ]; - - const activeFolderId = parseInt(folder?.parent?.id ?? query?.folder ?? rootFolder.value, 10); + const activeFolderId = parseInt( + folder?.parent?.id ?? query?.folder ?? folderStructure[0].value, + 10 + ); const initialFormData = Object.assign({}, folder, { parent: { value: activeFolderId, - label: findByValue(folderStructure, activeFolderId)?.label ?? rootFolder.label, + label: + findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? + folderStructure[0].label, }, }); diff --git a/packages/core/upload/admin/src/hooks/useFolderStructure.js b/packages/core/upload/admin/src/hooks/useFolderStructure.js index 6dfa09c184..4aab86e76b 100644 --- a/packages/core/upload/admin/src/hooks/useFolderStructure.js +++ b/packages/core/upload/admin/src/hooks/useFolderStructure.js @@ -1,7 +1,8 @@ import { useQuery } from 'react-query'; +import { useIntl } from 'react-intl'; import pluginId from '../pluginId'; -import { axiosInstance, getRequestUrl } from '../utils'; +import { axiosInstance, getRequestUrl, getTrad } from '../utils'; import { recursiveRenameKeys } from './utils/rename-keys'; const FIELD_MAPPING = { @@ -10,6 +11,7 @@ const FIELD_MAPPING = { }; export const useFolderStructure = ({ enabled = true } = {}) => { + const { formatMessage } = useIntl(); const dataRequestURL = getRequestUrl('folder-structure'); const fetchFolderStructure = async () => { @@ -17,7 +19,18 @@ export const useFolderStructure = ({ enabled = true } = {}) => { data: { data }, } = await axiosInstance.get(dataRequestURL); - return data.map(f => recursiveRenameKeys(f, key => FIELD_MAPPING?.[key] ?? key)); + const children = data.map(f => recursiveRenameKeys(f, key => FIELD_MAPPING?.[key] ?? key)); + + return [ + { + value: null, + label: formatMessage({ + id: getTrad('form.input.label.folder-location-default-label'), + defaultMessage: 'Media Library', + }), + children, + }, + ]; }; const { data, error, isLoading } = useQuery( diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index 9f209db49a..2ca7649e7c 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -302,6 +302,7 @@ export const MediaLibrary = () => { canUpdate={canUpdate} canCopyLink={canCopyLink} canDownload={canDownload} + folderStructure={folderStructure} trackedLocation="upload" /> )} diff --git a/packages/core/upload/admin/src/utils/findRecursiveFolderByValue.js b/packages/core/upload/admin/src/utils/findRecursiveFolderByValue.js new file mode 100644 index 0000000000..44769bcd8d --- /dev/null +++ b/packages/core/upload/admin/src/utils/findRecursiveFolderByValue.js @@ -0,0 +1,17 @@ +export default function findRecursiveFolderByValue(data, value) { + let result; + + function iter(a) { + if (a.value === value) { + result = a; + + return true; + } + + return Array.isArray(a.children) && a.children.some(iter); + } + + data.some(iter); + + return result; +} diff --git a/packages/core/upload/admin/src/utils/index.js b/packages/core/upload/admin/src/utils/index.js index 0f14eb76a6..b51782478a 100644 --- a/packages/core/upload/admin/src/utils/index.js +++ b/packages/core/upload/admin/src/utils/index.js @@ -2,4 +2,5 @@ export { default as axiosInstance } from './axiosInstance'; export { default as formatBytes } from './formatBytes'; export { default as getRequestUrl } from './getRequestUrl'; export { default as getTrad } from './getTrad'; +export { default as findRecursiveFolderByValue } from './findRecursiveFolderByValue'; export * from './formatDuration';