Skip to content

Commit 96350ff

Browse files
MichaelDeBoeySaraVieira
MichaelDeBoey
and
SaraVieira
authored
🔨 Switch Profile/Sandboxes to use useOvermind (codesandbox#3427)
* 🔨 Switch Profile/Sandboxes to use useOvermind * fix undefined Co-authored-by: Sara Vieira <hey@iamsaravieira.com>
1 parent 7b9cece commit 96350ff

File tree

8 files changed

+174
-165
lines changed

8 files changed

+174
-165
lines changed

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

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

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

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import { SmallSandbox } from '@codesandbox/common/lib/types';
33
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
44
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
55
import { format } from 'date-fns';
6-
import * as React from 'react';
6+
import React, { FunctionComponent } from 'react';
77
import EyeIcon from 'react-icons/lib/fa/eye';
88
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

1212
import { DeleteSandboxButton } from '../DeleteSandboxButton';
1313
import { PrivacyStatus } from '../PrivacyStatus';
14+
1415
import {
1516
Body,
1617
DeleteBody,
@@ -22,13 +23,12 @@ import {
2223
Table,
2324
} from './elements';
2425

25-
interface ISandboxListProps {
26-
sandboxes: SmallSandbox[];
26+
type Props = {
2727
isCurrentUser: boolean;
2828
onDelete: (id: string) => void;
29-
}
30-
31-
export const SandboxList: React.FC<ISandboxListProps> = ({
29+
sandboxes: SmallSandbox[];
30+
};
31+
export const SandboxList: FunctionComponent<Props> = ({
3232
sandboxes,
3333
isCurrentUser,
3434
onDelete,
@@ -37,47 +37,62 @@ export const SandboxList: React.FC<ISandboxListProps> = ({
3737
<thead>
3838
<HeaderRow>
3939
<HeaderTitle>Title</HeaderTitle>
40+
4041
<HeaderTitle>Created</HeaderTitle>
42+
4143
<HeaderTitle>Updated</HeaderTitle>
44+
4245
<StatTitle />
46+
4347
<StatTitle>
4448
<FullHeartIcon />
4549
</StatTitle>
50+
4651
<StatTitle>
4752
<EyeIcon />
4853
</StatTitle>
54+
4955
<StatTitle>
5056
<ForkIcon />
5157
</StatTitle>
58+
5259
{isCurrentUser && <HeaderTitle />}
5360
</HeaderRow>
5461
</thead>
62+
5563
<Body>
56-
{sandboxes.map((s, i) => {
64+
{sandboxes.map((sandbox, i) => {
5765
// TODO: investigate type mismatch between SmallSandbox and getIcon
5866
// @ts-ignore
59-
const Icon = getIcon(s.template);
67+
const Icon = getIcon(sandbox.template);
6068

6169
return (
62-
<SandboxRow delay={i} key={s.id}>
70+
<SandboxRow delay={i} key={sandbox.id}>
6371
<td>
6472
{/* We should probably use the Sandbox interface instead
6573
* of SmallSandbox
6674
// @ts-ignore */}
67-
<Link to={sandboxUrl(s)}>{getSandboxName(s)}</Link>
68-
<PrivacyStatus privacy={s.privacy} asIcon />
75+
<Link to={sandboxUrl(sandbox)}>{getSandboxName(sandbox)}</Link>
76+
<PrivacyStatus privacy={sandbox.privacy} asIcon />
6977
</td>
70-
<td>{format(new Date(s.insertedAt), 'MMM dd, yyyy')}</td>
71-
<td>{format(new Date(s.updatedAt), 'MMM dd, yyyy')}</td>
78+
79+
<td>{format(new Date(sandbox.insertedAt), 'MMM dd, yyyy')}</td>
80+
81+
<td>{format(new Date(sandbox.updatedAt), 'MMM dd, yyyy')}</td>
82+
7283
<StatBody>
7384
<Icon width={30} height={30} />
7485
</StatBody>
75-
<StatBody>{s.likeCount}</StatBody>
76-
<StatBody>{s.viewCount}</StatBody>
77-
<StatBody>{s.forkCount}</StatBody>
86+
87+
<StatBody>{sandbox.likeCount}</StatBody>
88+
89+
<StatBody>{sandbox.viewCount}</StatBody>
90+
91+
<StatBody>{sandbox.forkCount}</StatBody>
92+
7893
{isCurrentUser && onDelete ? (
7994
<DeleteBody>
80-
<DeleteSandboxButton id={s.id} onDelete={onDelete} />
95+
<DeleteSandboxButton id={sandbox.id} onDelete={onDelete} />
8196
</DeleteBody>
8297
) : null}
8398
</SandboxRow>

‎packages/app/src/app/overmind/namespaces/profile/actions.ts

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ export const profileMounted: AsyncAction<string> = withLoadApp(
2525
}
2626
);
2727

28-
export const sandboxesPageChanged: AsyncAction<{
29-
page: number;
30-
force?: boolean;
31-
}> = async ({ state, effects }, { page, force }) => {
28+
export const sandboxesPageChanged: AsyncAction<number> = async (
29+
{ effects, state },
30+
page
31+
) => {
3232
state.profile.isLoadingSandboxes = true;
3333
state.profile.currentSandboxesPage = page;
3434

@@ -39,8 +39,7 @@ export const sandboxesPageChanged: AsyncAction<{
3939
const { username } = state.profile.current;
4040
if (
4141
!state.profile.sandboxes[username] ||
42-
!state.profile.sandboxes[username][page] ||
43-
force
42+
!state.profile.sandboxes[username][page]
4443
) {
4544
const data = await effects.api.getUserSandboxes(username, page);
4645
if (!state.profile.sandboxes[username]) {
@@ -52,9 +51,10 @@ export const sandboxesPageChanged: AsyncAction<{
5251
state.profile.isLoadingSandboxes = false;
5352
};
5453

55-
export const likedSandboxesPageChanged: AsyncAction<{
56-
page: number;
57-
}> = async ({ state, effects }, { page }) => {
54+
export const likedSandboxesPageChanged: AsyncAction<number> = async (
55+
{ effects, state },
56+
page
57+
) => {
5858
state.profile.isLoadingSandboxes = true;
5959
state.profile.currentLikedSandboxesPage = page;
6060

@@ -122,9 +122,7 @@ export const newSandboxShowcaseSelected: AsyncAction<string> = async (
122122
state.profile.isLoadingProfile = false;
123123
};
124124

125-
export const deleteSandboxClicked: Action<{
126-
id;
127-
}> = ({ state }, { id }) => {
125+
export const deleteSandboxClicked: Action<string> = ({ state }, id) => {
128126
state.profile.sandboxToDeleteId = id;
129127
state.currentModal = 'deleteProfileSandbox';
130128
};

‎packages/app/src/app/pages/Profile/Sandboxes/NoSandboxes/elements.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const ErrorTitle = styled.div`
4+
${({ theme }) => css`
5+
color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
6+
font-size: 1.25rem;
7+
`};
8+
`;

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Centered from '@codesandbox/common/lib/components/flex/Centered';
2+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
3+
import React, { FunctionComponent } from 'react';
4+
5+
import { useOvermind } from 'app/overmind';
6+
7+
import { ErrorTitle } from './elements';
8+
9+
const prefix = {
10+
currentLikedSandboxes: [`You haven't liked`, `This user didn't like`],
11+
currentSandboxes: [`You don't have`, `This user doesn't have`],
12+
};
13+
14+
type SandboxSource = 'currentLikedSandboxes' | 'currentSandboxes';
15+
type Props = {
16+
source: SandboxSource;
17+
};
18+
export const NoSandboxes: FunctionComponent<Props> = ({ source }) => {
19+
const {
20+
state: {
21+
profile: { isProfileCurrentUser },
22+
},
23+
} = useOvermind();
24+
25+
return (
26+
<Centered horizontal vertical>
27+
<Margin top={4}>
28+
<ErrorTitle>
29+
{`${prefix[source][isProfileCurrentUser ? 0 : 1]} any sandboxes yet`}
30+
</ErrorTitle>
31+
</Margin>
32+
</Centered>
33+
);
34+
};

‎packages/app/src/app/pages/Profile/Sandboxes/elements.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Button } from '@codesandbox/common/lib/components/Button';
2+
import styled from 'styled-components';
3+
4+
export const Navigation = styled.div`
5+
width: 100%;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
10+
padding-bottom: 2rem;
11+
`;
12+
13+
export const Notice = styled.div`
14+
color: rgba(255, 255, 255, 0.5);
15+
padding: 2rem 0 0;
16+
margin-bottom: 2rem;
17+
`;
18+
19+
export const NavButton = styled(Button).attrs({
20+
small: true,
21+
})`
22+
margin: 0 0.5rem;
23+
`;

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

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

0 commit comments

Comments
 (0)