🔨 Switch Profile/Header to use useOvermind

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;
+`;

packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js → packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.tsx

@@ -1,29 +1,39 @@
-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 (
-    <Row style={{ flex: 1 }}>
-      <ProfileImage alt={username} height={175} width={175} src={avatarUrl} />
+    <Row>
+      <ProfileImage alt={username} height={175} src={avatarUrl} width={175} />
+
       <Margin bottom={3}>
         <Column justifyContent="space-between">
           {name && <Name>{name}</Name>}
+
           <Username main={!name}>
             {username}
             <a
               href={`https://github.com/${username}`}
               rel="noopener noreferrer"
               target="_blank"
             >
-              <IconWrapper />
+              <GitHubIcon />
             </a>
+
             {subscriptionSince && (
               <PatronStar subscriptionSince={subscriptionSince} />
             )}
@@ -32,6 +42,4 @@ function ProfileInfo({ username, subscriptionSince, name, avatarUrl }) {
       </Margin>
     </Row>
   );
-}
-
-export default ProfileInfo;
+};

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;
+`;

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 (
+    <Margin right={2}>
+      <Link to={patronUrl()}>
+        {badges.map(badge => (
+          <Badge badge={badge} key={badge.id} size={64} />
+        ))}
+      </Link>
+
+      <ContributorsBadge username={username} />
+    </Margin>
+  );
+};

packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js → 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;

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 (
+    <Container>
+      <Badges />
+
+      <StatsWrapper>
+        <Stat name="Likes" count={receivedLikeCount} />
+
+        <Stat name="Views" count={viewCount} />
+
+        <Stat name="Forked" count={forkedCount} />
+      </StatsWrapper>
+    </Container>
+  );
+};

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 = () => (
+  <Row>
+    <ProfileInfo />
+
+    <Stats />
+  </Row>
+);

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 = () => (
+  <Top>
+    <MaxWidth>
+      <FullWidthPadding horizontal={2} vertical={1.5}>
+        <Navigation title="Profile Page" />
+
+        <FullWidthMargin top={3} bottom={-5}>
+          <UserInfo />
+        </FullWidthMargin>
+      </FullWidthPadding>
+    </MaxWidth>
+  </Top>
+);

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<Props> = ({
         <title>{user.name || user.username} - CodeSandbox</title>
       </Helmet>
 
-      <Header user={user} />
+      <Header />
 
       <Content>
         <MaxWidth>