useModalQueryParams: Pass down query into useAssets and useFolders

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js

@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import getTrad from '../../../utils/getTrad';
 import getAllowedFiles from '../../../utils/getAllowedFiles';
 import { AssetList } from '../../AssetList';
+import { FolderList } from '../../FolderList';
 import { EmptyAssets } from '../../EmptyAssets';
 import { Filters } from './Filters';
 import PaginationFooter from './PaginationFooter';
@@ -39,6 +40,7 @@ export const BrowseStep = ({
   onChangePageSize,
   onChangeSearch,
   onChangeSort,
+  onChangeFolder,
   onEditAsset,
   onSelectAllAsset,
   onSelectAsset,
@@ -98,7 +100,19 @@ export const BrowseStep = ({
           </Box>
         )}
 
-        {folders.length > 0 && <></>}
+        {folders.length > 0 && (
+          <FolderList
+            folders={folders}
+            size="S"
+            onClickFolder={onChangeFolder}
+            onEditFolder={null}
+            onSelectFolder={null}
+            title={formatMessage({
+              id: getTrad('list.folders.title'),
+              defaultMessage: 'Folders',
+            })}
+          />
+        )}
 
         {assets.length > 0 ? (
           <AssetList
@@ -108,6 +122,10 @@ export const BrowseStep = ({
             onSelectAsset={onSelectAsset}
             selectedAssets={selectedAssets}
             onEditAsset={onEditAsset}
+            title={formatMessage({
+              id: getTrad('list.assets.title'),
+              defaultMessage: 'Assets',
+            })}
           />
         ) : (
           <Box paddingBottom={6}>
@@ -154,6 +172,7 @@ BrowseStep.propTypes = {
 
   multiple: PropTypes.bool,
   onChangeFilters: PropTypes.func.isRequired,
+  onChangeFolder: PropTypes.func.isRequired,
   onChangePage: PropTypes.func.isRequired,
   onChangePageSize: PropTypes.func.isRequired,
   onChangeSort: PropTypes.func.isRequired,

packages/core/upload/admin/src/components/AssetDialog/index.js

@@ -12,6 +12,7 @@ import { Badge } from '@strapi/design-system/Badge';
 import { Loader } from '@strapi/design-system/Loader';
 import { Stack } from '@strapi/design-system/Stack';
 import { NoPermissions, AnErrorOccurred, useSelectionState } from '@strapi/helper-plugin';
+
 import getTrad from '../../utils/getTrad';
 import { SelectedStep } from './SelectedStep';
 import { BrowseStep } from './BrowseStep';
@@ -48,7 +49,7 @@ export const AssetDialog = ({
     canDownload,
   } = useMediaLibraryPermissions();
   const [
-    { rawQuery, queryObject },
+    { queryObject },
     {
       onChangeFilters,
       onChangePage,
@@ -62,12 +63,12 @@ export const AssetDialog = ({
     data: { pagination, results: assets } = {},
     isLoading: isLoadingAssets,
     error: errorAssets,
-  } = useAssets({ skipWhen: !canRead, rawQuery });
+  } = useAssets({ skipWhen: !canRead, query: queryObject });
   const {
     data: { results: folders } = {},
     isLoading: isLoadingFolders,
     error: errorFolders,
-  } = useFolders();
+  } = useFolders({ query: queryObject });
 
   const [selectedAssets, { selectOne, selectAll, selectOnly, setSelections }] = useSelectionState(
     ['id'],
@@ -246,7 +247,7 @@ export const AssetDialog = ({
               <BrowseStep
                 allowedTypes={allowedTypes}
                 assets={assets}
-                folder={folders}
+                folders={folders}
                 onSelectAsset={handleSelectAsset}
                 selectedAssets={selectedAssets}
                 multiple={multiple}

packages/core/upload/admin/src/components/FolderList/FolderList.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { stringify } from 'qs';
-import { useHistory, useLocation } from 'react-router-dom';
 import { Box } from '@strapi/design-system/Box';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { Flex } from '@strapi/design-system/Flex';
@@ -10,7 +8,6 @@ import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Typography } from '@strapi/design-system/Typography';
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-import { useQueryParams } from '@strapi/helper-plugin';
 import Pencil from '@strapi/icons/Pencil';
 
 import { FolderCard, FolderCardBody, FolderCardCheckbox, FolderCardLink } from '../FolderCard';
@@ -31,12 +28,9 @@ export const FolderList = ({
   size,
   onSelectFolder,
   onEditFolder,
+  onClickFolder,
   selectedFolders,
 }) => {
-  const history = useHistory();
-  const { pathname } = useLocation();
-  const [{ query }] = useQueryParams();
-
   return (
     <KeyboardNavigable tagName="article">
       {title && (
@@ -52,35 +46,46 @@ export const FolderList = ({
           const isSelected = !!selectedFolders.find(
             currentFolder => currentFolder.id === folder.id
           );
-          const url = `${pathname}?${stringify(
-            { ...query, folder: folder.id },
-            { encode: false }
-          )}`;
 
           return (
             <GridItem col={3} key={`folder-${folder.uid}`}>
               <FolderCard
                 ariaLabel={folder.name}
                 id={`folder-${folder.uid}`}
-                onDoubleClick={() => history.push(url)}
+                onDoubleClick={event => {
+                  event.preventDefault();
+                  onClickFolder(folder);
+                }}
                 startAction={
-                  <FolderCardCheckbox
+                  onSelectFolder && (
-                    value={isSelected}
+                    <FolderCardCheckbox
-                    onChange={() => onSelectFolder({ ...folder, type: 'folder' })}
+                      value={isSelected}
-                  />
+                      onChange={() => onSelectFolder({ ...folder, type: 'folder' })}
+                    />
+                  )
+                }
+                cardActions={
+                  onEditFolder && (
+                    <IconButton icon={<Pencil />} onClick={() => onEditFolder(folder)} />
+                  )
                 }
-                cardActions={<IconButton icon={<Pencil />} onClick={() => onEditFolder(folder)} />}
                 size={size}
               >
                 <FolderCardBody>
-                  <FolderCardLink to={url}>
+                  <FolderCardLink
+                    to="/"
+                    onClick={event => {
+                      event.preventDefault();
+                      onClickFolder(folder);
+                    }}
+                  >
                     <Flex as="h2" direction="column" alignItems="start">
                       <CardTitle>
                         {folder.name}
                         <VisuallyHidden>:</VisuallyHidden>
                       </CardTitle>
 
-                      <Typography as="span" textColor="neutral600" variant="pi">
+                      <Typography as="span" textColor="neutral600" variant="pi" ellipsis>
                         {folder.children.count} folder, {folder.files.count} assets
                       </Typography>
                     </Flex>
@@ -96,6 +101,8 @@ export const FolderList = ({
 };
 
 FolderList.defaultProps = {
+  onEditFolder: null,
+  onSelectFolder: null,
   size: 'M',
   selectedFolders: [],
   title: null,
@@ -105,7 +112,8 @@ FolderList.propTypes = {
   folders: PropTypes.arrayOf(FolderDefinition).isRequired,
   size: PropTypes.oneOf(['S', 'M']),
   selectedFolders: PropTypes.array,
-  onEditFolder: PropTypes.func.isRequired,
+  onClickFolder: PropTypes.func.isRequired,
-  onSelectFolder: PropTypes.func.isRequired,
+  onEditFolder: PropTypes.func,
+  onSelectFolder: PropTypes.func,
   title: PropTypes.string,
 };

packages/core/upload/admin/src/hooks/useAssets.js

@@ -7,25 +7,25 @@ import { useIntl } from 'react-intl';
 import pluginId from '../pluginId';
 import { axiosInstance, getRequestUrl } from '../utils';
 
-export const useAssets = ({ skipWhen, query, rawQuery }) => {
+export const useAssets = ({ skipWhen, query = {} }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
   const dataRequestURL = getRequestUrl('files');
+  const { folder, ...paramsExceptFolder } = query;
+  const params = {
+    ...paramsExceptFolder,
+    filters: {
+      folder: {
+        id: query?.folder ?? {
+          $null: true,
+        },
+      },
+    },
+  };
 
   const getAssets = async () => {
     try {
-      const { folder, ...paramsExceptFolder } = query;
-      const params = {
-        ...paramsExceptFolder,
-        filters: {
-          folder: {
-            id: query?.folder ?? {
-              $null: true,
-            },
-          },
-        },
-      };
       const { data } = await axiosInstance.get(`${dataRequestURL}?${stringify(params)}`);
 
       notifyStatus(
@@ -46,7 +46,7 @@ export const useAssets = ({ skipWhen, query, rawQuery }) => {
     }
   };
 
-  const { data, error, isLoading } = useQuery([pluginId, 'assets', rawQuery], getAssets, {
+  const { data, error, isLoading } = useQuery([pluginId, 'assets', stringify(params)], getAssets, {
     enabled: !skipWhen,
     staleTime: 0,
     cacheTime: 0,

packages/core/upload/admin/src/hooks/useFolders.js

@@ -1,35 +1,34 @@
 import { stringify } from 'qs';
 import { useQuery } from 'react-query';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { useNotification, useQueryParams } from '@strapi/helper-plugin';
+import { useNotification } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import pluginId from '../pluginId';
 import { axiosInstance, getRequestUrl } from '../utils';
 
-export const useFolders = ({ enabled = true }) => {
+export const useFolders = ({ enabled = true, query = {} }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
-  const [{ rawQuery, query }] = useQueryParams();
   const dataRequestURL = getRequestUrl('folders');
+  const { folder, ...paramsExceptFolder } = query;
+  const params = {
+    ...paramsExceptFolder,
+    pagination: {
+      pageSize: -1,
+    },
+    filters: {
+      parent: {
+        id: query?.folder ?? {
+          $null: true,
+        },
+      },
+    },
+  };
 
   const fetchFolders = async () => {
     try {
-      const { folder, ...paramsExceptFolder } = query;
-      const params = {
-        ...paramsExceptFolder,
-        pagination: {
-          pageSize: -1,
-        },
-        filters: {
-          parent: {
-            id: query?.folder ?? {
-              $null: true,
-            },
-          },
-        },
-      };
       const { data } = await axiosInstance.get(`${dataRequestURL}?${stringify(params)}`);
 
       notifyStatus(
@@ -50,11 +49,15 @@ export const useFolders = ({ enabled = true }) => {
     }
   };
 
-  const { data, error, isLoading } = useQuery([pluginId, 'folders', rawQuery], fetchFolders, {
+  const { data, error, isLoading } = useQuery(
-    enabled,
+    [pluginId, 'folders', stringify(params)],
-    staleTime: 0,
+    fetchFolders,
-    cacheTime: 0,
+    {
-  });
+      enabled,
+      staleTime: 0,
+      cacheTime: 0,
+    }
+  );
 
   return { data, error, isLoading };
 };

packages/core/upload/admin/src/hooks/useModalQueryParams.js

@@ -45,7 +45,7 @@ const useModalQueryParams = () => {
   };
 
   const handleChangeFolder = folder => {
-    setQueryObject(prev => ({ ...prev, folder }));
+    setQueryObject(prev => ({ ...prev, folder: folder.id ?? null }));
   };
 
   return [

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -56,10 +56,12 @@ export const MediaLibrary = () => {
 
   const { data: assetsData, isLoading: assetsLoading, errors: assetsError } = useAssets({
     skipWhen: !canRead,
+    query,
   });
 
   const { data: foldersData, isLoading: foldersLoading, errors: foldersError } = useFolders({
     enabled: assetsData?.pagination?.page === 1 && !isFiltering,
+    query,
   });
 
   const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure();
@@ -98,6 +100,13 @@ export const MediaLibrary = () => {
     toggleEditFolderDialog(payload);
   };
 
+  const handleClickFolder = folder => {
+    setQuery({
+      ...query,
+      folder: folder.id,
+    });
+  };
+
   useFocusWhenNavigate();
 
   const folders = foldersData?.results;
@@ -213,6 +222,7 @@ export const MediaLibrary = () => {
               {folders?.length > 0 && !isFiltering && (
                 <FolderList
                   folders={folders}
+                  onClickFolder={handleClickFolder}
                   onEditFolder={handleEditFolder}
                   onSelectFolder={selectOne}
                   selectedFolders={selected.filter(({ type }) => type === 'folder')}