Skip to content

Commit 296111f

Browse files
siddharthkpsiddharthkp
authored
dashboard: Make card clickable (codesandbox#4020)
* make card clickable * remove types that arent even elpful * add ts-ignore to extraneous prop * consistent isTemplate flag
1 parent d7d69f1 commit 296111f

File tree

9 files changed

+74
-45
lines changed

9 files changed

+74
-45
lines changed

‎packages/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@
269269
"@types/react-helmet": "^5.0.11",
270270
"@types/react-icons": "2.2.7",
271271
"@types/react-instantsearch": "^5.2.3",
272-
"@types/react-router-dom": "^4.3.1",
272+
"@types/react-router-dom": "^5.0.1",
273273
"@types/react-stripe-elements": "^1.3.2",
274274
"@types/resolve": "^0.0.8",
275275
"@types/semver": "6.2.0",

‎packages/app/src/app/pages/NewDashboard/Components/SandboxCard/Menu.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,17 @@ import React from 'react';
22
import { useOvermind } from 'app/overmind';
33
import { Menu } from '@codesandbox/components';
44
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
5-
import { withRouter } from 'react-router-dom';
5+
import { useHistory } from 'react-router-dom';
66

7-
export const MenuOptionsComponent = ({
8-
sandbox,
9-
template,
10-
setEdit,
11-
history,
12-
}) => {
7+
export const MenuOptions = ({ sandbox, isTemplate, setEdit }) => {
138
const { effects, actions } = useOvermind();
9+
const history = useHistory();
1410
const url = sandboxUrl({
1511
id: sandbox.id,
1612
alias: sandbox.alias,
1713
});
1814

19-
const getFolderUrl = (path, isTemplate) => {
15+
const getFolderUrl = path => {
2016
if (isTemplate) return '/new-dashboard/templates';
2117
if (path === '/' || !path) return '/new-dashboard/all/drafts';
2218

@@ -25,18 +21,18 @@ export const MenuOptionsComponent = ({
2521

2622
return (
2723
<Menu>
28-
<Menu.IconButton name="more" size={9} title="Sandbox options" />
24+
<Menu.IconButton name="more" size={9} title="Sandbox actions" />
2925
<Menu.List>
3026
<Menu.Item
3127
onSelect={() => {
32-
history.push(getFolderUrl(sandbox.collection.path, template));
28+
history.push(getFolderUrl(sandbox.collection.path));
3329
}}
3430
>
3531
Show in Folder
3632
</Menu.Item>
3733
<Menu.Item
3834
onSelect={() => {
39-
window.open(`https://codesandbox.io${url}`);
35+
history.push(url);
4036
}}
4137
>
4238
Open sandbox
@@ -70,10 +66,10 @@ export const MenuOptionsComponent = ({
7066
actions.dashboard.downloadSandboxes([sandbox.id]);
7167
}}
7268
>
73-
Export {template ? 'template' : 'sandbox'}
69+
Export {isTemplate ? 'template' : 'sandbox'}
7470
</Menu.Item>
7571
<Menu.Item onSelect={() => setEdit(true)}>Rename sandbox</Menu.Item>
76-
{template ? (
72+
{isTemplate ? (
7773
<Menu.Item
7874
onSelect={() => {
7975
actions.dashboard.unmakeTemplate([sandbox.id]);
@@ -90,7 +86,7 @@ export const MenuOptionsComponent = ({
9086
Make sandbox a template
9187
</Menu.Item>
9288
)}
93-
{template ? (
89+
{isTemplate ? (
9490
<Menu.Item onSelect={() => {}}>Delete template</Menu.Item>
9591
) : (
9692
<Menu.Item
@@ -105,6 +101,3 @@ export const MenuOptionsComponent = ({
105101
</Menu>
106102
);
107103
};
108-
109-
// @ts-ignore
110-
export const MenuOptions = withRouter(MenuOptionsComponent);

‎packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
import React, { useState } from 'react';
2+
import { useHistory } from 'react-router-dom';
3+
import { useOvermind } from 'app/overmind';
4+
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
25
import {
36
Stack,
47
Element,
58
Text,
69
Stats,
710
Input,
811
SkeletonText,
12+
isMenuClicked,
913
} from '@codesandbox/components';
1014
import css from '@styled-system/css';
11-
import { useOvermind } from 'app/overmind';
1215
import { MenuOptions } from './Menu';
1316

14-
type Props = {
15-
sandbox: any;
16-
template?: boolean;
17-
style?: any;
18-
};
19-
20-
export const SandboxCard = ({ sandbox, template, ...props }: Props) => {
17+
export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
2118
const sandboxTitle = sandbox.title || sandbox.alias || sandbox.id;
2219
const { actions } = useOvermind();
2320
const [edit, setEdit] = useState(false);
2421
const [newName, setNewName] = useState(sandboxTitle);
22+
const history = useHistory();
23+
24+
const url = sandboxUrl({
25+
id: sandbox.id,
26+
alias: sandbox.alias,
27+
});
2528

2629
const editSandboxTitle = async e => {
2730
e.preventDefault();
@@ -46,11 +49,16 @@ export const SandboxCard = ({ sandbox, template, ...props }: Props) => {
4649
overflow: 'hidden',
4750
transition: 'all ease-in-out',
4851
transitionDuration: theme => theme.speeds[4],
49-
':hover, :focus': {
52+
':hover, :focus, :focus-within': {
53+
cursor: 'pointer',
5054
transform: 'scale(0.98)',
5155
},
5256
})}
5357
{...props}
58+
onClick={event => {
59+
if (isMenuClicked(event)) return;
60+
history.push(url);
61+
}}
5462
>
5563
<Element
5664
as="div"
@@ -73,7 +81,11 @@ export const SandboxCard = ({ sandbox, template, ...props }: Props) => {
7381
{sandboxTitle}
7482
</Text>
7583
)}
76-
<MenuOptions sandbox={sandbox} template={template} setEdit={setEdit} />
84+
<MenuOptions
85+
sandbox={sandbox}
86+
isTemplate={isTemplate}
87+
setEdit={setEdit}
88+
/>
7789
</Stack>
7890
<Stack marginX={4}>
7991
<Stats

‎packages/app/src/app/pages/NewDashboard/Components/SandboxItem/Menu.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom';
66

77
export const MenuOptionsComponent = ({
88
sandbox,
9-
template,
9+
isTemplate = false,
1010
setEdit,
1111
history,
1212
}) => {
@@ -16,7 +16,7 @@ export const MenuOptionsComponent = ({
1616
alias: sandbox.alias,
1717
});
1818

19-
const getFolderUrl = (path, isTemplate) => {
19+
const getFolderUrl = path => {
2020
if (isTemplate) return '/new-dashboard/templates';
2121
if (path === '/' || !path) return '/new-dashboard/all/drafts';
2222

@@ -53,7 +53,7 @@ export const MenuOptionsComponent = ({
5353
<Menu.List>
5454
<Menu.Item
5555
onSelect={() => {
56-
history.push(getFolderUrl(sandbox.collection.path, template));
56+
history.push(getFolderUrl(sandbox.collection.path));
5757
}}
5858
>
5959
Show in Folder
@@ -94,10 +94,10 @@ export const MenuOptionsComponent = ({
9494
actions.dashboard.downloadSandboxes([sandbox.id]);
9595
}}
9696
>
97-
Export {template ? 'template' : 'sandbox'}
97+
Export {isTemplate ? 'template' : 'sandbox'}
9898
</Menu.Item>
9999
<Menu.Item onSelect={() => setEdit(true)}>Rename sandbox</Menu.Item>
100-
{template ? (
100+
{isTemplate ? (
101101
<Menu.Item
102102
onSelect={() => {
103103
actions.dashboard.unmakeTemplate([sandbox.id]);
@@ -114,7 +114,7 @@ export const MenuOptionsComponent = ({
114114
Make sandbox a template
115115
</Menu.Item>
116116
)}
117-
{template ? (
117+
{isTemplate ? (
118118
<Menu.Item onSelect={() => {}}>Delete template</Menu.Item>
119119
) : (
120120
<Menu.Item

‎packages/app/src/app/pages/NewDashboard/Components/SandboxItem/index.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import { MenuOptions } from './Menu';
77

88
type Props = {
99
sandbox: any;
10-
template?: boolean;
10+
isTemplate?: boolean;
1111
style?: any;
1212
};
1313

14-
export const SandboxItem = ({ sandbox, template, ...props }: Props) => {
14+
export const SandboxItem = ({
15+
sandbox,
16+
isTemplate = false,
17+
...props
18+
}: Props) => {
1519
const sandboxTitle = sandbox.title || sandbox.alias || sandbox.id;
1620
const { actions } = useOvermind();
1721
const [edit, setEdit] = useState(false);
@@ -79,7 +83,11 @@ export const SandboxItem = ({ sandbox, template, ...props }: Props) => {
7983
Updated {formatDistanceToNow(new Date(sandbox.updatedAt))} ago
8084
</Text>
8185
)}
82-
<MenuOptions sandbox={sandbox} template={template} setEdit={setEdit} />
86+
<MenuOptions
87+
sandbox={sandbox}
88+
isTemplate={isTemplate}
89+
setEdit={setEdit}
90+
/>
8391
</Stack>
8492
);
8593
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Menu,
77
Stack,
88
Text,
9+
isMenuClicked,
910
} from '@codesandbox/components';
1011
import VisuallyHidden from '@reach/visually-hidden';
1112
import { css } from '@styled-system/css';
@@ -50,10 +51,7 @@ export const Comment = React.memo<{
5051
// don't trigger comment if you click on the menu
5152
// we have to handle this because of an upstream
5253
// bug in reach/menu-button
53-
const target = event.target as HTMLElement;
54-
if (target.tagName === 'button' || target.tagName === 'svg') {
55-
return;
56-
}
54+
if (isMenuClicked(event)) return;
5755

5856
const currentTarget = event.currentTarget as HTMLElement;
5957
const boundingRect = currentTarget.getBoundingClientRect();

‎packages/common/src/components/Button/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type Props = {
2121
const Button: FunctionComponent<Props> = ({ style = {}, ...props }) => {
2222
// Link
2323
if (typeof props.to === 'string') {
24+
// @ts-ignore
2425
return <LinkButton {...props} style={style} to={props.to} />;
2526
}
2627

‎packages/components/src/components/Menu/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,4 +131,21 @@ Menu.IconButton = MenuIconButton;
131131
Menu.List = MenuList;
132132
Menu.Item = MenuItem;
133133

134+
export const isMenuClicked = event => {
135+
// don't trigger comment if you click on the menu
136+
// we handle this because of an upstream
137+
// bug in reach/menu-button
138+
const target = event.target as HTMLElement;
139+
140+
if (
141+
target.tagName === 'BUTTON' ||
142+
target.tagName === 'svg' ||
143+
target.tagName === 'path'
144+
) {
145+
return true;
146+
}
147+
148+
return false;
149+
};
150+
134151
export { Menu };

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4727,10 +4727,10 @@
47274727
"@types/prop-types" "*"
47284728
"@types/react" "*"
47294729

4730-
"@types/react-router-dom@^4.3.1":
4731-
version "4.3.5"
4732-
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
4733-
integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==
4730+
"@types/react-router-dom@^5.0.1":
4731+
version "5.1.5"
4732+
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
4733+
integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==
47344734
dependencies:
47354735
"@types/history" "*"
47364736
"@types/react" "*"

0 commit comments

Comments
 (0)