Skip to content

Commit 8e3fb44

Browse files
CompuIvesCompuIves
authored
Fix hashes in folder names on dashboard (codesandbox#2096)
* Fix hashes in folder names on dashboard Fixes codesandbox#2080 * Fix nested folders * Remove log * Fix types * Fix compile * Fix typecheck
1 parent 4a5dea6 commit 8e3fb44

File tree

7 files changed

+64
-17
lines changed

7 files changed

+64
-17
lines changed

‎packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Folders.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import { Folder, FoldersWrapper } from './elements';
77

88
const Folders = ({ loading, me, history, match: { params }, teamId }) => {
99
const getPath = name => (params.path ? `${params.path}/${name}` : '/' + name);
10+
const getURL = name =>
11+
params.path
12+
? `${params.path}/${encodeURIComponent(name)}`
13+
: '/' + encodeURIComponent(name);
1014

1115
if (loading) return null;
1216

@@ -30,6 +34,7 @@ const Folders = ({ loading, me, history, match: { params }, teamId }) => {
3034
basePath={window.location.pathname}
3135
teamId={teamId}
3236
path={getPath(name)}
37+
url={getURL(name)}
3338
folders={folders}
3439
foldersByPath={foldersByPath}
3540
name={name}

‎packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import getMostUsedTemplate from '../../../utils/get-most-used-template';
1212
import { PATHED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
1313

1414
const PathedSandboxes = props => {
15-
const path = '/' + (props.match.params.path || '');
15+
const path = '/' + decodeURIComponent(props.match.params.path || '');
1616
const teamId = props.match.params.teamId;
1717

1818
document.title = `${basename(path) || 'Dashboard'} - CodeSandbox`;

‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/CreateFolderEntry.js renamed to ‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/CreateFolderEntry.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ import {
1717
CREATE_FOLDER_MUTATION,
1818
} from '../../../queries';
1919

20-
export default ({ basePath, teamId, noFocus, close, depth }) => {
20+
interface Props {
21+
basePath: string;
22+
teamId: string | undefined;
23+
close: () => void;
24+
depth: number;
25+
noFocus?: boolean;
26+
}
27+
28+
export default ({ basePath, teamId, noFocus, close, depth }: Props) => {
2129
let input;
2230
return (
2331
<Mutation mutation={CREATE_FOLDER_MUTATION}>
@@ -42,12 +50,12 @@ export default ({ basePath, teamId, noFocus, close, depth }) => {
4250
},
4351
},
4452
update: (proxy, { data: { createCollection } }) => {
45-
const variables = {};
53+
const variables: { teamId?: string } = {};
4654
if (teamId) {
4755
variables.teamId = teamId;
4856
}
4957
// Read the data from our cache for this query.
50-
const d = proxy.readQuery({
58+
const d = proxy.readQuery<{ me: any }>({
5159
query: PATHED_SANDBOXES_FOLDER_QUERY,
5260
variables,
5361
});
@@ -74,7 +82,6 @@ export default ({ basePath, teamId, noFocus, close, depth }) => {
7482
<AddFolderIcon />
7583
</IconContainer>{' '}
7684
<Input
77-
small
7885
placeholder="Folder Name"
7986
style={{ marginRight: '1rem' }}
8087
onBlur={close}

‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.js renamed to ‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import styled from 'styled-components';
22
import { NavLink } from 'react-router-dom';
33
import ChevronRight from 'react-icons/lib/md/chevron-right';
44

5-
export const Container = styled(NavLink)`
5+
export const Container = styled(NavLink)<{ depth?: number }>`
66
transition: 0.25s ease all;
77
display: flex;
88
align-items: center;
@@ -38,7 +38,7 @@ export const IconContainer = styled.div`
3838
font-size: 1.125rem;
3939
`;
4040

41-
export const AnimatedChevron = styled(ChevronRight)`
41+
export const AnimatedChevron = styled(ChevronRight)<{ open?: boolean }>`
4242
transition: 0.25s ease transform;
4343
transform: rotate(${props => (props.open ? 90 : 0)}deg);
4444
margin-right: 0.25rem;

‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.js renamed to ‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.tsx

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,39 @@ import {
3939
RENAME_FOLDER_MUTATION,
4040
} from '../../../queries';
4141

42+
type Props = {
43+
name: string;
44+
path: string;
45+
url: string;
46+
folders: { path: string }[];
47+
foldersByPath: { [path: string]: string };
48+
depth: number;
49+
toToggle?: boolean;
50+
allowCreate?: boolean;
51+
open?: boolean;
52+
basePath: string;
53+
teamId: string;
54+
onSelect: (params: { teamId: string; path: string }) => void;
55+
currentPath: string;
56+
currentTeamId: string;
57+
58+
// dnd handlers
59+
canDrop?: boolean;
60+
isOver?: boolean;
61+
isDragging?: boolean;
62+
connectDropTarget?: any;
63+
connectDragSource?: any;
64+
};
65+
66+
type State = {
67+
open: boolean;
68+
creatingDirectory: boolean;
69+
renamingDirectory: boolean;
70+
};
71+
4272
// eslint-disable-next-line import/no-mutable-exports
43-
let DropFolderEntry = null;
44-
class FolderEntry extends React.Component {
73+
let DropFolderEntry: React.ComponentClass<Props, State> = null;
74+
class FolderEntry extends React.Component<Props, State> {
4575
state = {
4676
open: this.props.open,
4777
creatingDirectory: false,
@@ -92,6 +122,7 @@ class FolderEntry extends React.Component {
92122
const {
93123
name,
94124
path,
125+
url,
95126
folders,
96127
foldersByPath,
97128
depth,
@@ -109,7 +140,6 @@ class FolderEntry extends React.Component {
109140
currentTeamId,
110141
} = this.props;
111142

112-
const url = `${basePath}${path}`;
113143
const children = getDirectChildren(path, folders);
114144

115145
const menuItems = [
@@ -138,7 +168,7 @@ class FolderEntry extends React.Component {
138168
},
139169
],
140170
update: (cache, { data: { deleteCollection } }) => {
141-
const variables = {};
171+
const variables: { teamId?: string } = {};
142172
if (teamId) {
143173
variables.teamId = teamId;
144174
}
@@ -189,7 +219,8 @@ class FolderEntry extends React.Component {
189219
backgroundColor:
190220
isOver && canDrop ? 'rgba(0, 0, 0, 0.3)' : undefined,
191221

192-
...(currentPath === path && currentTeamId === teamId
222+
...(decodeURIComponent(currentPath) === path &&
223+
currentTeamId === teamId
193224
? {
194225
borderColor: theme.secondary(),
195226
color: 'white',
@@ -230,12 +261,12 @@ class FolderEntry extends React.Component {
230261
newTeamId: teamId,
231262
},
232263
update: (cache, { data: { renameCollection } }) => {
233-
const variables = {};
264+
const variables: { teamId?: string } = {};
234265
if (teamId) {
235266
variables.teamId = teamId;
236267
}
237268

238-
const cacheData = cache.readQuery({
269+
const cacheData = cache.readQuery<{ me: any }>({
239270
query: PATHED_SANDBOXES_FOLDER_QUERY,
240271
variables,
241272
});
@@ -306,12 +337,14 @@ class FolderEntry extends React.Component {
306337
>
307338
{Array.from(children)
308339
.sort()
309-
.map(childName => {
340+
.map((childName: string) => {
310341
const childPath = join(path, childName);
342+
const childUrl = join(url, encodeURIComponent(childName));
311343

312344
return (
313345
<DropFolderEntry
314346
path={childPath}
347+
url={childUrl}
315348
basePath={basePath}
316349
teamId={teamId}
317350
folders={folders}
@@ -361,6 +394,6 @@ DropFolderEntry = inject('store', 'signals')(
361394
DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
362395
DragSource('FOLDER', entrySource, collectSource)(observer(FolderEntry))
363396
)
364-
);
397+
) as any;
365398

366399
export default DropFolderEntry;

‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,14 @@ class SandboxesItem extends React.Component {
103103
.sort()
104104
.map(name => {
105105
const path = '/' + name;
106+
const url = basePath + '/' + encodeURIComponent(name);
106107
return (
107108
<FolderEntry
108109
key={path}
109110
basePath={basePath}
110111
teamId={teamId}
111112
path={path}
113+
url={url}
112114
folders={folders}
113115
foldersByPath={foldersByPath}
114116
name={name}

‎packages/app/src/app/pages/Dashboard/utils/get-direct-children.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function addSlash(path: string) {
99
export default function getDirectChildren(
1010
currentPath: string,
1111
children: Array<{ path: string }>
12-
) {
12+
): Set<string> {
1313
const usedChildren = new Set();
1414

1515
children.forEach(c => {

0 commit comments

Comments
 (0)