Skip to content

Commit aff5e5b

Browse files
MichaelDeBoeyMichaelDeBoey
authored
Cleanup SandboxList (#3838)
1 parent 8276285 commit aff5e5b

File tree

7 files changed

+128
-117
lines changed

7 files changed

+128
-117
lines changed

‎packages/app/src/app/components/DeleteSandboxButton/DeleteSandboxButton.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎packages/app/src/app/components/DeleteSandboxButton/elements.tsx‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎packages/app/src/app/components/DeleteSandboxButton/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/app/src/app/components/SandboxList/DeleteSandboxButton/elements.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import styled from 'styled-components';
2+
3+
export const Button = styled.button.attrs({
4+
type: 'button',
5+
})`
6+
font-size: 1.2em;
7+
background-color: inherit;
8+
border: none;
9+
padding: 5px 6px 9px 6px;
10+
color: rgba(255, 255, 255, 0.5);
11+
cursor: pointer;
12+
13+
&:hover {
14+
color: rgba(255, 255, 255, 1);
15+
}
16+
17+
&[disabled] {
18+
opacity: 0.5;
19+
cursor: default;
20+
}
21+
`;

‎packages/app/src/app/components/SandboxList/DeleteSandboxButton/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2+
import React, { FunctionComponent } from 'react';
3+
import DeleteIcon from 'react-icons/lib/md/delete';
4+
5+
import { useOvermind } from 'app/overmind';
6+
7+
import { Button } from './elements';
8+
9+
type Props = {
10+
id: string;
11+
};
12+
export const DeleteSandboxButton: FunctionComponent<Props> = ({ id }) => {
13+
const {
14+
actions: {
15+
profile: { deleteSandboxClicked },
16+
},
17+
} = useOvermind();
18+
19+
return (
20+
<Tooltip content="Delete Sandbox">
21+
<Button onClick={() => deleteSandboxClicked(id)}>
22+
<DeleteIcon />
23+
</Button>
24+
</Tooltip>
25+
);
26+
};

‎packages/app/src/app/components/SandboxList/index.tsx‎

Lines changed: 77 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import FullHeartIcon from 'react-icons/lib/fa/heart';
99
import ForkIcon from 'react-icons/lib/go/repo-forked';
1010
import { Link } from 'react-router-dom';
1111

12-
import { DeleteSandboxButton } from '../DeleteSandboxButton';
12+
import { useOvermind } from 'app/overmind';
13+
1314
import { PrivacyStatus } from '../PrivacyStatus';
1415

16+
import { DeleteSandboxButton } from './DeleteSandboxButton';
1517
import {
1618
Body,
1719
DeleteBody,
@@ -23,81 +25,91 @@ import {
2325
Table,
2426
} from './elements';
2527

28+
type SandboxSource = 'currentLikedSandboxes' | 'currentSandboxes';
2629
type Props = {
27-
isCurrentUser: boolean;
28-
onDelete: (id: string) => void;
2930
sandboxes: SmallSandbox[];
31+
source: SandboxSource;
3032
};
3133
export const SandboxList: FunctionComponent<Props> = ({
3234
sandboxes,
33-
isCurrentUser,
34-
onDelete,
35-
}) => (
36-
<Table>
37-
<thead>
38-
<HeaderRow>
39-
<HeaderTitle>Title</HeaderTitle>
40-
41-
<HeaderTitle>Created</HeaderTitle>
42-
43-
<HeaderTitle>Updated</HeaderTitle>
44-
45-
<StatTitle />
46-
47-
<StatTitle>
48-
<FullHeartIcon />
49-
</StatTitle>
50-
51-
<StatTitle>
52-
<EyeIcon />
53-
</StatTitle>
54-
55-
<StatTitle>
56-
<ForkIcon />
57-
</StatTitle>
58-
59-
{isCurrentUser && <HeaderTitle />}
60-
</HeaderRow>
61-
</thead>
62-
63-
<Body>
64-
{sandboxes.map((sandbox, i) => {
65-
// TODO: investigate type mismatch between SmallSandbox and getIcon
66-
// @ts-ignore
67-
const Icon = getIcon(sandbox.template);
68-
69-
return (
70-
<SandboxRow delay={i} key={sandbox.id}>
71-
<td>
72-
{/* We should probably use the Sandbox interface instead
35+
source,
36+
}) => {
37+
const {
38+
state: {
39+
profile: { isProfileCurrentUser },
40+
},
41+
} = useOvermind();
42+
const showDeleteButton =
43+
isProfileCurrentUser && source === 'currentSandboxes';
44+
45+
return (
46+
<Table>
47+
<thead>
48+
<HeaderRow>
49+
<HeaderTitle>Title</HeaderTitle>
50+
51+
<HeaderTitle>Created</HeaderTitle>
52+
53+
<HeaderTitle>Updated</HeaderTitle>
54+
55+
<StatTitle />
56+
57+
<StatTitle>
58+
<FullHeartIcon />
59+
</StatTitle>
60+
61+
<StatTitle>
62+
<EyeIcon />
63+
</StatTitle>
64+
65+
<StatTitle>
66+
<ForkIcon />
67+
</StatTitle>
68+
69+
{showDeleteButton ? <HeaderTitle /> : null}
70+
</HeaderRow>
71+
</thead>
72+
73+
<Body>
74+
{sandboxes.map((sandbox, i) => {
75+
// TODO: investigate type mismatch between SmallSandbox and getIcon
76+
// @ts-ignore
77+
const Icon = getIcon(sandbox.template);
78+
79+
return (
80+
<SandboxRow delay={i} key={sandbox.id}>
81+
<td>
82+
{/* We should probably use the Sandbox interface instead
7383
* of SmallSandbox
7484
// @ts-ignore */}
75-
<Link to={sandboxUrl(sandbox)}>{getSandboxName(sandbox)}</Link>
76-
<PrivacyStatus privacy={sandbox.privacy} asIcon />
77-
</td>
85+
<Link to={sandboxUrl(sandbox)}>{getSandboxName(sandbox)}</Link>
86+
87+
<PrivacyStatus privacy={sandbox.privacy} asIcon />
88+
</td>
7889

79-
<td>{format(new Date(sandbox.insertedAt), 'MMM dd, yyyy')}</td>
90+
<td>{format(new Date(sandbox.insertedAt), 'MMM dd, yyyy')}</td>
8091

81-
<td>{format(new Date(sandbox.updatedAt), 'MMM dd, yyyy')}</td>
92+
<td>{format(new Date(sandbox.updatedAt), 'MMM dd, yyyy')}</td>
8293

83-
<StatBody>
84-
<Icon width={30} height={30} />
85-
</StatBody>
94+
<StatBody>
95+
<Icon width={30} height={30} />
96+
</StatBody>
8697

87-
<StatBody>{sandbox.likeCount}</StatBody>
98+
<StatBody>{sandbox.likeCount}</StatBody>
8899

89-
<StatBody>{sandbox.viewCount}</StatBody>
100+
<StatBody>{sandbox.viewCount}</StatBody>
90101

91-
<StatBody>{sandbox.forkCount}</StatBody>
102+
<StatBody>{sandbox.forkCount}</StatBody>
92103

93-
{isCurrentUser && onDelete ? (
94-
<DeleteBody>
95-
<DeleteSandboxButton id={sandbox.id} onDelete={onDelete} />
96-
</DeleteBody>
97-
) : null}
98-
</SandboxRow>
99-
);
100-
})}
101-
</Body>
102-
</Table>
103-
);
104+
{showDeleteButton ? (
105+
<DeleteBody>
106+
<DeleteSandboxButton id={sandbox.id} />
107+
</DeleteBody>
108+
) : null}
109+
</SandboxRow>
110+
);
111+
})}
112+
</Body>
113+
</Table>
114+
);
115+
};

‎packages/app/src/app/pages/Profile/Sandboxes/index.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,20 @@ import { useOvermind } from 'app/overmind';
88
import { NavButton, Navigation, Notice } from './elements';
99
import { NoSandboxes } from './NoSandboxes';
1010

11-
const noop = null;
1211
const PER_PAGE_COUNT = 15;
1312

1413
type Props = {
1514
baseUrl: string;
1615
page?: number;
17-
} & Pick<ComponentProps<typeof NoSandboxes>, 'source'>;
16+
} & Pick<ComponentProps<typeof SandboxList>, 'source'>;
1817
export const Sandboxes: FunctionComponent<Props> = ({
1918
page = 1,
2019
source,
2120
baseUrl,
2221
}) => {
2322
const {
2423
actions: {
25-
profile: {
26-
deleteSandboxClicked,
27-
likedSandboxesPageChanged,
28-
sandboxesPageChanged,
29-
},
24+
profile: { likedSandboxesPageChanged, sandboxesPageChanged },
3025
},
3126
state: {
3227
profile: {
@@ -77,16 +72,15 @@ export const Sandboxes: FunctionComponent<Props> = ({
7772
<div>
7873
{isProfileCurrentUser && (
7974
<Notice>
80-
{`You're viewing your own profile, so you can see your private and unlisted sandboxes. Others can't. To manage your sandboxes you can go to your dashboard`}{' '}
75+
{`You're viewing your own profile, so you can see your private and unlisted sandboxes. Others can't. To manage your sandboxes you can go to your dashboard `}
8176
<Link to={dashboardUrl()}>here</Link>.
8277
</Notice>
8378
)}
8479

8580
<SandboxList
86-
isCurrentUser={isProfileCurrentUser}
87-
onDelete={source === 'currentSandboxes' ? deleteSandboxClicked : noop}
8881
// @ts-ignore
8982
sandboxes={sandboxes[page]}
83+
source={source}
9084
/>
9185

9286
<Navigation>

0 commit comments

Comments
 (0)