Skip to content

Commit 249b458

Browse files
MichaelDeBoeyMichaelDeBoey
authored
🔨 Switch Profile/Header to use useOvermind (codesandbox#3407)
* 🔨 Switch Profile/Header to use useOvermind * Fix ContributorsBadge
1 parent bc06ab1 commit 249b458

File tree

20 files changed

+209
-183
lines changed

20 files changed

+209
-183
lines changed

‎packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js

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

‎packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import RowBase from '@codesandbox/common/lib/components/flex/Row';
2+
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
3+
import GitHubIconBase from 'react-icons/lib/go/mark-github';
4+
import styled, { css } from 'styled-components';
5+
6+
export const ProfileImage = styled.img`
7+
${({ theme }) => css`
8+
border-radius: 2px;
9+
margin-right: 1.5rem;
10+
11+
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
12+
background-color: ${theme.background2};
13+
14+
${delayEffect(0.05)};
15+
`};
16+
`;
17+
18+
export const Name = styled.div`
19+
${delayEffect(0.1)};
20+
display: flex;
21+
align-items: center;
22+
font-size: 2rem;
23+
font-weight: 300;
24+
margin-bottom: 0.25rem;
25+
`;
26+
27+
export const Row = styled(RowBase)`
28+
flex: 1;
29+
`;
30+
31+
export const Username = styled.div<{ main: boolean }>`
32+
${({ main }) => css`
33+
${delayEffect(0.15)};
34+
display: flex;
35+
align-items: center;
36+
font-size: ${main ? 1.5 : 1.25}rem;
37+
font-weight: 200;
38+
color: ${main ? 'white' : 'rgba(255, 255, 255, 0.6)'};
39+
margin-bottom: 1rem;
40+
`};
41+
`;
42+
43+
export const GitHubIcon = styled(GitHubIconBase)`
44+
margin-left: 0.75rem;
45+
font-size: 1.1rem;
46+
color: white;
47+
`;

‎packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js renamed to ‎packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.tsx

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,39 @@
1-
import React from 'react';
2-
3-
import Row from '@codesandbox/common/lib/components/flex/Row';
41
import Column from '@codesandbox/common/lib/components/flex/Column';
5-
62
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
73
import { PatronStar } from '@codesandbox/common/lib/components/PatronStar';
4+
import React, { FunctionComponent } from 'react';
5+
6+
import { useOvermind } from 'app/overmind';
7+
8+
import { GitHubIcon, Name, ProfileImage, Row, Username } from './elements';
89

9-
import { ProfileImage, Name, Username, IconWrapper } from './elements';
10+
export const ProfileInfo: FunctionComponent = () => {
11+
const {
12+
state: {
13+
profile: {
14+
current: { avatarUrl, name, subscriptionSince, username },
15+
},
16+
},
17+
} = useOvermind();
1018

11-
function ProfileInfo({ username, subscriptionSince, name, avatarUrl }) {
1219
return (
13-
<Row style={{ flex: 1 }}>
14-
<ProfileImage alt={username} height={175} width={175} src={avatarUrl} />
20+
<Row>
21+
<ProfileImage alt={username} height={175} src={avatarUrl} width={175} />
22+
1523
<Margin bottom={3}>
1624
<Column justifyContent="space-between">
1725
{name && <Name>{name}</Name>}
26+
1827
<Username main={!name}>
1928
{username}
2029
<a
2130
href={`https://github.com/${username}`}
2231
rel="noopener noreferrer"
2332
target="_blank"
2433
>
25-
<IconWrapper />
34+
<GitHubIcon />
2635
</a>
36+
2737
{subscriptionSince && (
2838
<PatronStar subscriptionSince={subscriptionSince} />
2939
)}
@@ -32,6 +42,4 @@ function ProfileInfo({ username, subscriptionSince, name, avatarUrl }) {
3242
</Margin>
3343
</Row>
3444
);
35-
}
36-
37-
export default ProfileInfo;
45+
};

‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/elements.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import ContributorsBadgeBase from '@codesandbox/common/lib/components/ContributorsBadge';
2+
import MarginBase from '@codesandbox/common/lib/components/spacing/Margin';
3+
import styled from 'styled-components';
4+
5+
export const ContributorsBadge = styled(ContributorsBadgeBase)`
6+
display: inline-block;
7+
font-size: 3rem;
8+
margin-left: 1rem;
9+
`;
10+
11+
export const Margin = styled(MarginBase)`
12+
align-items: center;
13+
display: flex;
14+
`;

‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js

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

‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Badge from '@codesandbox/common/lib/utils/badges/Badge';
2+
import { patronUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import React, { FunctionComponent } from 'react';
4+
import { Link } from 'react-router-dom';
5+
6+
import { useOvermind } from 'app/overmind';
7+
8+
import { ContributorsBadge, Margin } from './elements';
9+
10+
export const Badges: FunctionComponent = () => {
11+
const {
12+
state: {
13+
profile: {
14+
current: { badges, username },
15+
},
16+
},
17+
} = useOvermind();
18+
19+
return (
20+
<Margin right={2}>
21+
<Link to={patronUrl()}>
22+
{badges.map(badge => (
23+
<Badge badge={badge} key={badge.id} size={64} />
24+
))}
25+
</Link>
26+
27+
<ContributorsBadge username={username} />
28+
</Margin>
29+
);
30+
};

‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js renamed to ‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import styled from 'styled-components';
21
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
2+
import styled from 'styled-components';
33

44
export const Container = styled.div`
55
float: right;

‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js

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

‎packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { FunctionComponent } from 'react';
2+
3+
import { Stat } from 'app/components/Stat';
4+
import { useOvermind } from 'app/overmind';
5+
6+
import { Badges } from './Badges';
7+
import { Container, Stats as StatsWrapper } from './elements';
8+
9+
export const Stats: FunctionComponent = () => {
10+
const {
11+
state: {
12+
profile: {
13+
current: { forkedCount, receivedLikeCount, viewCount },
14+
},
15+
},
16+
} = useOvermind();
17+
18+
return (
19+
<Container>
20+
<Badges />
21+
22+
<StatsWrapper>
23+
<Stat name="Likes" count={receivedLikeCount} />
24+
25+
<Stat name="Views" count={viewCount} />
26+
27+
<Stat name="Forked" count={forkedCount} />
28+
</StatsWrapper>
29+
</Container>
30+
);
31+
};

‎packages/app/src/app/pages/Profile/Header/UserInfo/index.js

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

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Row from '@codesandbox/common/lib/components/flex/Row';
2+
import React, { FunctionComponent } from 'react';
3+
4+
import { ProfileInfo } from './ProfileInfo';
5+
import { Stats } from './Stats';
6+
7+
export const UserInfo: FunctionComponent = () => (
8+
<Row>
9+
<ProfileInfo />
10+
11+
<Stats />
12+
</Row>
13+
);

‎packages/app/src/app/pages/Profile/Header/elements.js renamed to ‎packages/app/src/app/pages/Profile/Header/elements.ts

File renamed without changes.

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

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

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
2+
import React, { FunctionComponent } from 'react';
3+
4+
import { Navigation } from 'app/pages/common/Navigation';
5+
6+
import { FullWidthMargin, FullWidthPadding, Top } from './elements';
7+
import { UserInfo } from './UserInfo';
8+
9+
export const Header: FunctionComponent = () => (
10+
<Top>
11+
<MaxWidth>
12+
<FullWidthPadding horizontal={2} vertical={1.5}>
13+
<Navigation title="Profile Page" />
14+
15+
<FullWidthMargin top={3} bottom={-5}>
16+
<UserInfo />
17+
</FullWidthMargin>
18+
</FullWidthPadding>
19+
</MaxWidth>
20+
</Top>
21+
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useOvermind } from 'app/overmind';
1111
import { NotFound } from 'app/pages/common/NotFound';
1212

1313
import { Container, Content, Margin } from './elements';
14-
import Header from './Header';
14+
import { Header } from './Header';
1515
import { Navigation } from './Navigation';
1616
import { Sandboxes } from './Sandboxes';
1717
import { Showcase } from './Showcase';
@@ -50,7 +50,7 @@ export const Profile: FunctionComponent<Props> = ({
5050
<title>{user.name || user.username} - CodeSandbox</title>
5151
</Helmet>
5252

53-
<Header user={user} />
53+
<Header />
5454

5555
<Content>
5656
<MaxWidth>

0 commit comments

Comments
 (0)