yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-16 01:57:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

FolderList: Fix full page reloads when navigating between folders

Browse Source
This commit is contained in:
Gustav Hansen 2022-04-29 12:14:18 +02:00
parent 0581ea17fa
commit a2e3da37bc
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/upload/admin/src/components/FolderCard/styled.js
View File

@ -1,7 +1,6 @@
import { NavLink } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { BaseLink } from '@strapi/design-system/BaseLink'; export const FolderCardLink = styled(NavLink)`
export const FolderCardLink = styled(BaseLink)`
text-decoration: none; text-decoration: none;
`; `;

14
packages/core/upload/admin/src/components/FolderList/FolderList.js
View File

@ -1,12 +1,14 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { useHistory } from 'react-router-dom'; import { stringify } from 'qs';
import { useHistory, useLocation } from 'react-router-dom';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable'; import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { Typography } from '@strapi/design-system/Typography'; import { Typography } from '@strapi/design-system/Typography';
import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
import { useQueryParams } from '@strapi/helper-plugin';
import { FolderCard, FolderCardBody, FolderCardCheckbox, FolderCardLink } from '../FolderCard'; import { FolderCard, FolderCardBody, FolderCardCheckbox, FolderCardLink } from '../FolderCard';
import { GridColumnSize } from '../../constants'; import { GridColumnSize } from '../../constants';
@ -22,6 +24,8 @@ const GridLayout = styled(Box)`
export const FolderList = ({ title, folders, size, onSelectFolder, selectedFolders }) => { export const FolderList = ({ title, folders, size, onSelectFolder, selectedFolders }) => {
const history = useHistory(); const history = useHistory();
const { pathname } = useLocation();
const [{ query }] = useQueryParams();
return ( return (
<KeyboardNavigable tagName="article"> <KeyboardNavigable tagName="article">
@ -38,8 +42,10 @@ export const FolderList = ({ title, folders, size, onSelectFolder, selectedFolde
const isSelected = !!selectedFolders.find( const isSelected = !!selectedFolders.find(
currentFolder => currentFolder.id === folder.id currentFolder => currentFolder.id === folder.id
); );
// TODO: is there a better way to retrieve the plugin base URL? const url = `${pathname}?${stringify(
const url = `/admin/plugins/upload?parent=${folder.id}`; { ...query, filter: { folder: folder.id } },
{ encode: false }
)}`;
return ( return (
<FolderCard <FolderCard
@ -55,7 +61,7 @@ export const FolderList = ({ title, folders, size, onSelectFolder, selectedFolde
} }
> >
<FolderCardBody> <FolderCardBody>
<FolderCardLink href={url}> <FolderCardLink to={url}>
<Flex as="h2" direction="column" alignItems="start"> <Flex as="h2" direction="column" alignItems="start">
<Typography textColor="neutral800" variant="omega" fontWeight="semiBold"> <Typography textColor="neutral800" variant="omega" fontWeight="semiBold">
{folder.name} {folder.name}