Skip to content

Commit 6dca8d6

Browse files
christianalfoniSaraVieira
christianalfoni
authored and
SaraVieira
committed
refactor sandboxes to overmind (codesandbox#3179)
1 parent d40d3dc commit 6dca8d6

File tree

6 files changed

+157
-169
lines changed

6 files changed

+157
-169
lines changed

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
import * as React from 'react';
2-
import { format } from 'date-fns';
3-
import { Link } from 'react-router-dom';
4-
import FullHeartIcon from 'react-icons/lib/fa/heart';
5-
import EyeIcon from 'react-icons/lib/fa/eye';
6-
import ForkIcon from 'react-icons/lib/go/repo-forked';
7-
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
81
import getIcon from '@codesandbox/common/lib/templates/icons';
92
import { SmallSandbox } from '@codesandbox/common/lib/types';
103
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
4+
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
5+
import { format } from 'date-fns';
6+
import * as React from 'react';
7+
import EyeIcon from 'react-icons/lib/fa/eye';
8+
import FullHeartIcon from 'react-icons/lib/fa/heart';
9+
import ForkIcon from 'react-icons/lib/go/repo-forked';
10+
import { Link } from 'react-router-dom';
11+
1112
import { DeleteSandboxButton } from '../DeleteSandboxButton';
1213
import { PrivacyStatus } from '../PrivacyStatus';
1314
import {
15+
Body,
16+
DeleteBody,
1417
HeaderRow,
1518
HeaderTitle,
16-
Table,
17-
StatTitle,
18-
StatBody,
19-
DeleteBody,
20-
Body,
2119
SandboxRow,
20+
StatBody,
21+
StatTitle,
22+
Table,
2223
} from './elements';
2324

2425
interface ISandboxListProps {
2526
sandboxes: SmallSandbox[];
2627
isCurrentUser: boolean;
27-
onDelete: () => void;
28+
onDelete: (id: string) => void;
2829
}
2930

3031
export const SandboxList: React.FC<ISandboxListProps> = ({

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { withLoadApp } from 'app/overmind/factories';
2-
import { AsyncAction, Action } from 'app/overmind';
31
import { Sandbox } from '@codesandbox/common/lib/types';
2+
import { Action, AsyncAction } from 'app/overmind';
3+
import { withLoadApp } from 'app/overmind/factories';
44

55
export const profileMounted: AsyncAction<{
66
username: string;
@@ -27,7 +27,7 @@ export const profileMounted: AsyncAction<{
2727

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

‎packages/app/src/app/pages/Profile/Sandboxes/elements.js renamed to ‎packages/app/src/app/pages/Profile/Sandboxes/elements.tsx

File renamed without changes.

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

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

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

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { Button } from '@codesandbox/common/lib/components/Button';
2+
import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import { SandboxList } from 'app/components/SandboxList';
4+
import { useOvermind } from 'app/overmind';
5+
import React, { useEffect } from 'react';
6+
import { Link } from 'react-router-dom';
7+
8+
import { Navigation, NoSandboxes, Notice } from './elements';
9+
10+
const PER_PAGE_COUNT = 15;
11+
12+
interface Props {
13+
page: number;
14+
baseUrl: string;
15+
source: any;
16+
}
17+
18+
export const Sandboxes: React.FC<Props> = ({ page = 1, source, baseUrl }) => {
19+
const { state, actions } = useOvermind();
20+
21+
useEffect(() => {
22+
function getPage(pageSource, newPage) {
23+
if (!pageSource) {
24+
return undefined;
25+
}
26+
return pageSource[newPage];
27+
}
28+
29+
function fetch(force = false) {
30+
if (state.profile.isLoadingSandboxes) {
31+
return;
32+
}
33+
34+
if (
35+
force ||
36+
!state.profile[source] ||
37+
!getPage(state.profile[source], page)
38+
) {
39+
switch (source) {
40+
case 'currentSandboxes':
41+
actions.profile.sandboxesPageChanged({ page });
42+
break;
43+
case 'currentLikedSandboxes':
44+
actions.profile.likedSandboxesPageChanged({ page });
45+
break;
46+
default:
47+
}
48+
}
49+
}
50+
51+
fetch();
52+
}, [actions.profile, page, source, state.profile]);
53+
54+
function getSandboxesByPage(sandboxes, newPage) {
55+
return sandboxes[newPage];
56+
}
57+
58+
function getLastPage() {
59+
if (source === 'currentSandboxes') {
60+
const { sandboxCount } = state.profile.current;
61+
62+
return Math.ceil(sandboxCount / PER_PAGE_COUNT);
63+
}
64+
65+
const { givenLikeCount } = state.profile.current;
66+
67+
return Math.ceil(givenLikeCount / PER_PAGE_COUNT);
68+
}
69+
70+
function deleteSandbox(id) {
71+
actions.profile.deleteSandboxClicked({ id });
72+
}
73+
74+
const { isLoadingSandboxes, isProfileCurrentUser } = state.profile;
75+
const sandboxes = state.profile[source];
76+
77+
if (
78+
isLoadingSandboxes ||
79+
!sandboxes ||
80+
!getSandboxesByPage(sandboxes, page)
81+
) {
82+
return <div />;
83+
}
84+
85+
const sandboxesPage = getSandboxesByPage(sandboxes, page);
86+
87+
if (sandboxesPage.length === 0)
88+
return <NoSandboxes source={source} isCurrentUser={isProfileCurrentUser} />;
89+
90+
return (
91+
<div>
92+
{isProfileCurrentUser && (
93+
<Notice>
94+
You
95+
{"'"}
96+
re viewing your own profile, so you can see your private and unlisted
97+
sandboxes. Others can
98+
{"'"}
99+
t. To manage your sandboxes you can go to your dashboard{' '}
100+
<Link to={dashboardUrl()}>here</Link>.
101+
</Notice>
102+
)}
103+
<SandboxList
104+
isCurrentUser={isProfileCurrentUser}
105+
sandboxes={sandboxesPage}
106+
onDelete={source === 'currentSandboxes' && deleteSandbox}
107+
/>
108+
<Navigation>
109+
<div>
110+
{page > 1 && (
111+
<Button
112+
style={{ margin: '0 0.5rem' }}
113+
small
114+
to={`${baseUrl}/${page - 1}`}
115+
>
116+
{'<'}
117+
</Button>
118+
)}
119+
{getLastPage() !== page && (
120+
<Button
121+
style={{ margin: '0 0.5rem' }}
122+
small
123+
to={`${baseUrl}/${page + 1}`}
124+
>
125+
{'>'}
126+
</Button>
127+
)}
128+
</div>
129+
</Navigation>
130+
</div>
131+
);
132+
};

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import React, { useEffect } from 'react';
2-
import { Helmet } from 'react-helmet';
3-
import { Route, Switch } from 'react-router-dom';
41
import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
52
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
63
import {
7-
profileSandboxesUrl,
84
profileLikesUrl,
5+
profileSandboxesUrl,
96
} from '@codesandbox/common/lib/utils/url-generator';
10-
import { NotFound } from 'app/pages/common/NotFound';
117
import { useOvermind } from 'app/overmind';
8+
import { NotFound } from 'app/pages/common/NotFound';
9+
import React, { useEffect } from 'react';
10+
import { Helmet } from 'react-helmet';
11+
import { Route, Switch } from 'react-router-dom';
12+
13+
import { Container, Content } from './elements';
1214
import Header from './Header';
1315
import Navigation from './Navigation';
16+
import { Sandboxes } from './Sandboxes';
1417
import { Showcase } from './Showcase';
15-
import Sandboxes from './Sandboxes';
16-
import { Container, Content } from './elements';
1718

1819
interface IProfileProps {
1920
match: {

0 commit comments

Comments
 (0)