fix urlencoding in the filemanager

This commit is contained in:
Jakob Schrettenbrunner 2021-01-02 00:55:09 +00:00
parent 5f284dad1d
commit 4fd2af028d
7 changed files with 35 additions and 47 deletions

View file

@ -1,17 +1,18 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileAlt, faFileArchive, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons';
import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
import { bytesToHuman, encodePathSegments } from '@/helpers';
import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
import React, { memo } from 'react';
import { FileObject } from '@/api/server/files/loadDirectory';
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
import { ServerContext } from '@/state/server';
import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import isEqual from 'react-fast-compare';
import styled from 'styled-components/macro';
import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
import { usePermissions } from '@/plugins/usePermissions';
import { join } from 'path';
const Row = styled.div`
${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
@ -21,23 +22,8 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
const [ canReadContents ] = usePermissions([ 'file.read-content' ]);
const directory = ServerContext.useStoreState(state => state.files.directory);
const history = useHistory();
const match = useRouteMatch();
const destination = cleanDirectoryPath(`${directory}/${file.name}`).split('/').join('/');
const onRowClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
// Don't rely on the onClick to work with the generated URL. Because of the way this
// component re-renders you'll get redirected into a nested directory structure since
// it'll cause the directory variable to update right away when you click.
//
// Just trust me future me, leave this be.
if (!file.isFile) {
e.preventDefault();
history.push(`#${destination}`);
}
};
return (
(!canReadContents || (file.isFile && !file.isEditable())) ?
<div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
@ -45,9 +31,8 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
</div>
:
<NavLink
to={`${match.url}${file.isFile ? '/edit' : ''}#${destination}`}
to={`${match.url}${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
onClick={onRowClick}
>
{children}
</NavLink>
@ -72,7 +57,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
}
</div>
<div css={tw`flex-1 truncate`}>
{decodeURIComponent(file.name)}
{file.name}
</div>
{file.isFile &&
<div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>