Fix SandboxInfo (#2967)

Author: MichaelDeBoey

packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.js renamed to packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts

@@ -1,6 +1,7 @@
-import styled from 'styled-components';
 import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
 import { LikeHeart } from 'app/pages/common/LikeHeart';
 
 export const Container = styled.div`
@@ -18,7 +19,6 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: 400;
   margin: 0;
   padding: 0;
   box-sizing: border-box;

packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.js renamed to packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx

@@ -1,19 +1,30 @@
-import React from 'react';
+import Row from '@codesandbox/common/lib/components/flex/Row';
+import { Sandbox } from '@codesandbox/common/lib/types';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-import Row from '@codesandbox/common/lib/components/flex/Row';
+import React, { FunctionComponent } from 'react';
+
 import { Stat } from 'app/components/Stat';
-import SvgButton from './play-button.svg';
+import { useOvermind } from 'app/overmind';
+
 import {
   Container,
-  Title,
-  Like,
   Description,
-  Stats,
+  Like,
   PlayButtonContainer,
+  Stats,
+  Title,
 } from './elements';
+import SvgButton from './play-button.svg';
+
+type Props = {
+  sandbox: Sandbox;
+};
+export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
+  const {
+    state: { isLoggedIn },
+  } = useOvermind();
 
-function SandboxInfo({ sandbox, isLoggedIn }) {
   return (
     <Container>
       <Row alignItems="center">
@@ -22,21 +33,24 @@ function SandboxInfo({ sandbox, isLoggedIn }) {
           {isLoggedIn ? <Like sandbox={sandbox} /> : null}
         </Title>
       </Row>
+
       <Row alignItems="flex-start">
         <div style={{ flex: 6 }}>
           <Description>{sandbox.description}</Description>
         </div>
+
         <Stats>
           <PlayButtonContainer to={sandboxUrl({ id: sandbox.id })}>
             <img alt="edit" src={SvgButton} />
           </PlayButtonContainer>
+
           <Stat name="likes" count={sandbox.likeCount} />
+
           <Stat name="views" count={sandbox.viewCount} />
+
           <Stat name="forks" count={sandbox.forkCount} />
         </Stats>
       </Row>
     </Container>
   );
-}
-
-export default SandboxInfo;
+};

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

@@ -1,23 +1,22 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { useOvermind } from 'app/overmind';
 
 import Column from '@codesandbox/common/lib/components/flex/Column';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { Button } from '@codesandbox/common/lib/components/Button';
 
-import SandboxInfo from './SandboxInfo';
+import { SandboxInfo } from './SandboxInfo';
 import ShowcasePreview from '../../common/ShowcasePreview';
 
 import { ErrorTitle } from './elements';
 
-export const Showcase: React.FC<{}> = () => {
+export const Showcase: FunctionComponent = () => {
   const {
     state: {
       profile,
       profile: { isLoadingProfile },
       preferences: { settings },
-      isLoggedIn,
     },
     actions: {
       profile: { selectSandboxClicked },
@@ -62,13 +61,15 @@ export const Showcase: React.FC<{}> = () => {
           </Button>
         )}
       </Margin>
+
       <Margin top={2} style={{ width: '100%' }}>
         <Column alignItems="initial">
           <div style={{ flex: 2 }}>
             <ShowcasePreview sandbox={sandbox} settings={settings} />
           </div>
+
           <div style={{ flex: 1 }}>
-            <SandboxInfo sandbox={sandbox} isLoggedIn={isLoggedIn} />
+            <SandboxInfo sandbox={sandbox} />
           </div>
         </Column>
       </Margin>