From 5ffd40f9416d0214bfcd5afacf788f37c41c40f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Fri, 15 Nov 2019 01:13:44 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A8=20Switch=20Profile/Header=20to?= =?UTF-8?q?=20use=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/UserInfo/ProfileInfo/elements.js | 38 --------------- .../Header/UserInfo/ProfileInfo/elements.ts | 47 +++++++++++++++++++ .../ProfileInfo/{index.js => index.tsx} | 32 ++++++++----- .../Header/UserInfo/Stats/Badges/elements.ts | 14 ++++++ .../Header/UserInfo/Stats/Badges/index.js | 31 ------------ .../Header/UserInfo/Stats/Badges/index.tsx | 30 ++++++++++++ .../Stats/{elements.js => elements.ts} | 2 +- .../Profile/Header/UserInfo/Stats/index.js | 18 ------- .../Profile/Header/UserInfo/Stats/index.tsx | 31 ++++++++++++ .../pages/Profile/Header/UserInfo/index.js | 28 ----------- .../pages/Profile/Header/UserInfo/index.tsx | 13 +++++ .../Header/{elements.js => elements.ts} | 0 .../app/src/app/pages/Profile/Header/index.js | 26 ---------- .../src/app/pages/Profile/Header/index.tsx | 21 +++++++++ packages/app/src/app/pages/Profile/index.tsx | 4 +- 15 files changed, 179 insertions(+), 156 deletions(-) delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js create mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.ts rename packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/{index.js => index.tsx} (60%) create mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/elements.ts delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js create mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.tsx rename packages/app/src/app/pages/Profile/Header/UserInfo/Stats/{elements.js => elements.ts} (100%) delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js create mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.tsx delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/index.js create mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/index.tsx rename packages/app/src/app/pages/Profile/Header/{elements.js => elements.ts} (100%) delete mode 100644 packages/app/src/app/pages/Profile/Header/index.js create mode 100644 packages/app/src/app/pages/Profile/Header/index.tsx diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js deleted file mode 100644 index c9a2645fe0e..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; -import GithubIcon from 'react-icons/lib/go/mark-github'; -import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; - -export const ProfileImage = styled.img` - border-radius: 2px; - margin-right: 1.5rem; - - box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5); - background-color: ${props => props.theme.background2}; - - ${delayEffect(0.05)}; -`; - -export const Name = styled.div` - ${delayEffect(0.1)}; - display: flex; - align-items: center; - font-size: 2rem; - font-weight: 300; - margin-bottom: 0.25rem; -`; - -export const Username = styled.div` - ${delayEffect(0.15)}; - display: flex; - align-items: center; - font-size: ${props => (props.main ? 1.5 : 1.25)}rem; - font-weight: 200; - color: ${props => (props.main ? 'white' : 'rgba(255, 255, 255, 0.6)')}; - margin-bottom: 1rem; -`; - -export const IconWrapper = styled(GithubIcon)` - margin-left: 0.75rem; - font-size: 1.1rem; - color: white; -`; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.ts b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.ts new file mode 100644 index 00000000000..1430276f802 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.ts @@ -0,0 +1,47 @@ +import RowBase from '@codesandbox/common/lib/components/flex/Row'; +import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; +import GitHubIconBase from 'react-icons/lib/go/mark-github'; +import styled, { css } from 'styled-components'; + +export const ProfileImage = styled.img` + ${({ theme }) => css` + border-radius: 2px; + margin-right: 1.5rem; + + box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5); + background-color: ${theme.background2}; + + ${delayEffect(0.05)}; + `}; +`; + +export const Name = styled.div` + ${delayEffect(0.1)}; + display: flex; + align-items: center; + font-size: 2rem; + font-weight: 300; + margin-bottom: 0.25rem; +`; + +export const Row = styled(RowBase)` + flex: 1; +`; + +export const Username = styled.div<{ main: boolean }>` + ${({ main }) => css` + ${delayEffect(0.15)}; + display: flex; + align-items: center; + font-size: ${main ? 1.5 : 1.25}rem; + font-weight: 200; + color: ${main ? 'white' : 'rgba(255, 255, 255, 0.6)'}; + margin-bottom: 1rem; + `}; +`; + +export const GitHubIcon = styled(GitHubIconBase)` + margin-left: 0.75rem; + font-size: 1.1rem; + color: white; +`; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.tsx similarity index 60% rename from packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js rename to packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.tsx index 94a890d66e4..b0eaf14e42d 100644 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.tsx @@ -1,20 +1,29 @@ -import React from 'react'; - -import Row from '@codesandbox/common/lib/components/flex/Row'; import Column from '@codesandbox/common/lib/components/flex/Column'; - import Margin from '@codesandbox/common/lib/components/spacing/Margin'; import { PatronStar } from '@codesandbox/common/lib/components/PatronStar'; +import React, { FunctionComponent } from 'react'; + +import { useOvermind } from 'app/overmind'; + +import { GitHubIcon, Name, ProfileImage, Row, Username } from './elements'; -import { ProfileImage, Name, Username, IconWrapper } from './elements'; +export const ProfileInfo: FunctionComponent = () => { + const { + state: { + profile: { + current: { avatarUrl, name, subscriptionSince, username }, + }, + }, + } = useOvermind(); -function ProfileInfo({ username, subscriptionSince, name, avatarUrl }) { return ( - - + + + {name && {name}} + {username} - + + {subscriptionSince && ( )} @@ -32,6 +42,4 @@ function ProfileInfo({ username, subscriptionSince, name, avatarUrl }) { ); -} - -export default ProfileInfo; +}; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/elements.ts b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/elements.ts new file mode 100644 index 00000000000..cd4de6ecdf0 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/elements.ts @@ -0,0 +1,14 @@ +import ContributorsBadgeBase from '@codesandbox/common/lib/components/ContributorsBadge'; +import MarginBase from '@codesandbox/common/lib/components/spacing/Margin'; +import styled from 'styled-components'; + +export const ContributorsBadge = styled(ContributorsBadgeBase)` + display: inline-block; + font-size: 3rem; + margin-left: 1rem; +`; + +export const Margin = styled(MarginBase)` + align-items: center; + display: flex; +`; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js deleted file mode 100644 index 43753352f94..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import Badge from '@codesandbox/common/lib/utils/badges/Badge'; -import ContributorsBadge from '@codesandbox/common/lib/components/ContributorsBadge'; - -import { patronUrl } from '@codesandbox/common/lib/utils/url-generator'; - -function Badges({ badges, username }) { - return ( - - - {badges.map(badge => ( - - ))} - - - - - ); -} - -export default Badges; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.tsx b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.tsx new file mode 100644 index 00000000000..2f3cbcb1197 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.tsx @@ -0,0 +1,30 @@ +import Badge from '@codesandbox/common/lib/utils/badges/Badge'; +import { patronUrl } from '@codesandbox/common/lib/utils/url-generator'; +import React, { FunctionComponent } from 'react'; +import { Link } from 'react-router-dom'; + +import { useOvermind } from 'app/overmind'; + +import { ContributorsBadge, Margin } from './elements'; + +export const Badges: FunctionComponent = () => { + const { + state: { + profile: { + current: { badges, username }, + }, + }, + } = useOvermind(); + + return ( + + + {badges.map(badge => ( + + ))} + + + + + ); +}; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.ts similarity index 100% rename from packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js rename to packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.ts index 47cd0e62555..68a24187ade 100644 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; +import styled from 'styled-components'; export const Container = styled.div` float: right; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js deleted file mode 100644 index 4cca27c5a32..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Stat } from 'app/components/Stat'; -import Badges from './Badges'; -import { Container, Stats as StatsWrapper } from './elements'; - -export function Stats({ viewCount, likeCount, forkCount, username, badges }) { - return ( - - - - - - - - - - ); -} diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.tsx b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.tsx new file mode 100644 index 00000000000..5e0c45fd073 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.tsx @@ -0,0 +1,31 @@ +import React, { FunctionComponent } from 'react'; + +import { Stat } from 'app/components/Stat'; +import { useOvermind } from 'app/overmind'; + +import { Badges } from './Badges'; +import { Container, Stats as StatsWrapper } from './elements'; + +export const Stats: FunctionComponent = () => { + const { + state: { + profile: { + current: { forkedCount, receivedLikeCount, viewCount }, + }, + }, + } = useOvermind(); + + return ( + + + + + + + + + + + + ); +}; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/index.js deleted file mode 100644 index 6e756eaaa3a..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; - -import Row from '@codesandbox/common/lib/components/flex/Row'; - -import ProfileInfo from './ProfileInfo'; -import { Stats } from './Stats'; - -function UserInfo({ user }) { - return ( - - - - - ); -} - -export default UserInfo; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/index.tsx b/packages/app/src/app/pages/Profile/Header/UserInfo/index.tsx new file mode 100644 index 00000000000..3283eac577d --- /dev/null +++ b/packages/app/src/app/pages/Profile/Header/UserInfo/index.tsx @@ -0,0 +1,13 @@ +import Row from '@codesandbox/common/lib/components/flex/Row'; +import React, { FunctionComponent } from 'react'; + +import { ProfileInfo } from './ProfileInfo'; +import { Stats } from './Stats'; + +export const UserInfo: FunctionComponent = () => ( + + + + + +); diff --git a/packages/app/src/app/pages/Profile/Header/elements.js b/packages/app/src/app/pages/Profile/Header/elements.ts similarity index 100% rename from packages/app/src/app/pages/Profile/Header/elements.js rename to packages/app/src/app/pages/Profile/Header/elements.ts diff --git a/packages/app/src/app/pages/Profile/Header/index.js b/packages/app/src/app/pages/Profile/Header/index.js deleted file mode 100644 index 34bb22f3f7b..00000000000 --- a/packages/app/src/app/pages/Profile/Header/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { Navigation } from 'app/pages/common/Navigation'; -import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth'; - -import UserInfo from './UserInfo'; -import { Top, FullWidthPadding, FullWidthMargin } from './elements'; - -export default class Header extends React.PureComponent { - render() { - const { user } = this.props; - return ( - - - - - - - - - - - - ); - } -} diff --git a/packages/app/src/app/pages/Profile/Header/index.tsx b/packages/app/src/app/pages/Profile/Header/index.tsx new file mode 100644 index 00000000000..7727d98f4f9 --- /dev/null +++ b/packages/app/src/app/pages/Profile/Header/index.tsx @@ -0,0 +1,21 @@ +import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth'; +import React, { FunctionComponent } from 'react'; + +import { Navigation } from 'app/pages/common/Navigation'; + +import { FullWidthMargin, FullWidthPadding, Top } from './elements'; +import { UserInfo } from './UserInfo'; + +export const Header: FunctionComponent = () => ( + + + + + + + + + + + +); diff --git a/packages/app/src/app/pages/Profile/index.tsx b/packages/app/src/app/pages/Profile/index.tsx index ea5f2c48004..2c10a734c21 100644 --- a/packages/app/src/app/pages/Profile/index.tsx +++ b/packages/app/src/app/pages/Profile/index.tsx @@ -11,7 +11,7 @@ import { useOvermind } from 'app/overmind'; import { NotFound } from 'app/pages/common/NotFound'; import { Container, Content, Margin } from './elements'; -import Header from './Header'; +import { Header } from './Header'; import { Navigation } from './Navigation'; import { Sandboxes } from './Sandboxes'; import { Showcase } from './Showcase'; @@ -50,7 +50,7 @@ export const Profile: FunctionComponent = ({ {user.name || user.username} - CodeSandbox -
+
From ddd8036cda1f8a7308ba9f6e4b40e147dfb362f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 18 Feb 2020 18:43:11 +0100 Subject: [PATCH 2/2] Fix ContributorsBadge --- .../src/components/ContributorsBadge/index.tsx | 15 +++++---------- .../src/components/UserWithAvatar/elements.ts | 7 +++++++ .../src/components/UserWithAvatar/index.tsx | 17 +++++++++-------- .../screens/Profile/Badges/elements.js | 7 +++++++ .../screens/Profile/Badges/index.js | 11 ++--------- 5 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/common/src/components/ContributorsBadge/index.tsx b/packages/common/src/components/ContributorsBadge/index.tsx index 16d0a88cb55..21f8933b908 100644 --- a/packages/common/src/components/ContributorsBadge/index.tsx +++ b/packages/common/src/components/ContributorsBadge/index.tsx @@ -5,8 +5,8 @@ import Tooltip from '../../components/Tooltip'; import { isContributor } from './is-contributor'; type Props = { + className?: string; username: string; - style?: React.CSSProperties; }; type State = { @@ -33,7 +33,7 @@ export default class ContributorsBadge extends React.Component { } render() { - const { username, style } = this.props; + const { className, username } = this.props; if (!this.state.isContributor) { return false; } @@ -42,20 +42,15 @@ export default class ContributorsBadge extends React.Component { { - e.stopPropagation(); - }} - href={ - 'https://github.com/codesandbox/codesandbox-client/commits?author=' + - username - } + onClick={e => e.stopPropagation()} + href={`https://github.com/codesandbox/codesandbox-client/commits?author=${username}`} > & { avatarUrl: string; @@ -43,12 +49,7 @@ export const UserWithAvatar: FunctionComponent = ({ /> )} - {!hideBadge && ( - - )} + {!hideBadge && } ); diff --git a/packages/dynamic-pages/screens/Profile/Badges/elements.js b/packages/dynamic-pages/screens/Profile/Badges/elements.js index ec5fc477715..7df68d23a2f 100644 --- a/packages/dynamic-pages/screens/Profile/Badges/elements.js +++ b/packages/dynamic-pages/screens/Profile/Badges/elements.js @@ -1,4 +1,6 @@ +import ContributorsBadgeBase from '@codesandbox/common/lib/components/ContributorsBadge'; import styled from 'styled-components'; + import { Aside } from '../_sidebar.elements'; export const BadgeWrapper = styled.ul` @@ -22,3 +24,8 @@ export const BadgeAside = styled(Aside)` display: none; } `; + +export const ContributorsBadge = styled(ContributorsBadgeBase)` + width: 64px; + height: 50px; +`; diff --git a/packages/dynamic-pages/screens/Profile/Badges/index.js b/packages/dynamic-pages/screens/Profile/Badges/index.js index 8bc605a1120..4a5006afb27 100644 --- a/packages/dynamic-pages/screens/Profile/Badges/index.js +++ b/packages/dynamic-pages/screens/Profile/Badges/index.js @@ -1,9 +1,8 @@ import React from 'react'; import Badge from '@codesandbox/common/lib/utils/badges/Badge'; -import ContributorsBadge from '@codesandbox/common/lib/components/ContributorsBadge'; import CommunityBadge from '@codesandbox/common/lib/components/CommunityBadges'; import { H3 } from '../../../components/Typography'; -import { BadgeWrapper, BadgeAside } from './elements'; +import { BadgeWrapper, BadgeAside, ContributorsBadge } from './elements'; export default ({ templateSandboxes, badges, username }) => { const hasBadges = @@ -33,13 +32,7 @@ export default ({ templateSandboxes, badges, username }) => { /> ) )} - + ) : null;