🔨 Switch Profile/Showcase to use useOvermind (#3409)

Author: MichaelDeBoey

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

@@ -0,0 +1,13 @@
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import React, { FunctionComponent } from 'react';
+
+import { ErrorTitle } from './elements';
+
+export const LoadingSandbox: FunctionComponent = () => (
+  <Centered horizontal vertical>
+    <Margin top={4}>
+      <ErrorTitle>Loading showcased sandbox...</ErrorTitle>
+    </Margin>
+  </Centered>
+);

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

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+
+import { useOvermind } from 'app/overmind';
+
+import { ErrorTitle } from './elements';
+
+export const NoSandboxAvailable: FunctionComponent = () => {
+  const {
+    state: {
+      profile: { isProfileCurrentUser },
+    },
+  } = useOvermind();
+
+  return (
+    <Centered horizontal vertical>
+      <Margin top={4}>
+        <ErrorTitle>
+          {`${
+            isProfileCurrentUser ? `You don't` : `This user doesn't`
+          } have any sandboxes yet`}
+        </ErrorTitle>
+      </Margin>
+    </Centered>
+  );
+};

packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts

@@ -39,6 +39,10 @@ export const Description = styled.p`
   color: rgba(255, 255, 255, 0.8);
 `;
 
+export const DescriptionContainer = styled.div`
+  flex: 6;
+`;
+
 export const Stats = styled.div`
   position: relative;
   display: flex;

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

@@ -1,5 +1,4 @@
 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 React, { FunctionComponent } from 'react';
@@ -10,47 +9,56 @@ import { useOvermind } from 'app/overmind';
 import {
   Container,
   Description,
+  DescriptionContainer,
   Like,
   PlayButtonContainer,
   Stats,
   Title,
 } from './elements';
 import SvgButton from './play-button.svg';
 
-type Props = {
-  sandbox: Sandbox;
-};
-export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
+export const SandboxInfo: FunctionComponent = () => {
   const {
-    state: { isLoggedIn },
+    state: {
+      profile: {
+        showcasedSandbox,
+        showcasedSandbox: {
+          alias,
+          description,
+          forkCount,
+          id,
+          likeCount,
+          viewCount,
+        },
+      },
+      isLoggedIn,
+    },
   } = useOvermind();
 
   return (
     <Container>
       <Row alignItems="center">
         <Title>
-          {getSandboxName(sandbox)} {''}
-          {isLoggedIn ? <Like sandbox={sandbox} /> : null}
+          {getSandboxName(showcasedSandbox)} {''}
+          {isLoggedIn ? <Like sandbox={showcasedSandbox} /> : null}
         </Title>
       </Row>
 
       <Row alignItems="flex-start">
-        <div style={{ flex: 6 }}>
-          <Description>{sandbox.description}</Description>
-        </div>
+        <DescriptionContainer>
+          <Description>{description}</Description>
+        </DescriptionContainer>
 
         <Stats>
-          <PlayButtonContainer
-            to={sandboxUrl({ id: sandbox.id, alias: sandbox.alias })}
-          >
+          <PlayButtonContainer to={sandboxUrl({ alias, id })}>
             <img alt="edit" src={SvgButton} />
           </PlayButtonContainer>
 
-          <Stat name="likes" count={sandbox.likeCount} />
+          <Stat name="likes" count={likeCount} />
 
-          <Stat name="views" count={sandbox.viewCount} />
+          <Stat name="views" count={viewCount} />
 
-          <Stat name="forks" count={sandbox.forkCount} />
+          <Stat name="forks" count={forkCount} />
         </Stats>
       </Row>
     </Container>

packages/app/src/app/pages/Profile/Showcase/elements.js

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+
+export const ErrorTitle = styled.div`
+  ${({ theme }) => css`
+    font-size: 1.25rem;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+  `};
+`;
+
+export const SandboxInfoContainer = styled.div`
+  flex: 1;
+`;
+
+export const ShowcasePreviewContainer = styled.div`
+  flex: 2;
+`;

packages/app/src/app/pages/Profile/Showcase/elements.ts

@@ -1,76 +1,55 @@
 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 { useOvermind } from 'app/overmind';
+
 import ShowcasePreview from '../../common/ShowcasePreview';
 
-import { ErrorTitle } from './elements';
+import { SandboxInfoContainer, ShowcasePreviewContainer } from './elements';
+import { LoadingSandbox } from './LoadingSandbox';
+import { NoSandboxAvailable } from './NoSandboxAvailable';
+import { SandboxInfo } from './SandboxInfo';
 
 export const Showcase: FunctionComponent = () => {
   const {
-    state: {
-      profile,
-      profile: { isLoadingProfile },
-      preferences: { settings },
-    },
     actions: {
       profile: { selectSandboxClicked },
     },
+    state: {
+      preferences: { settings },
+      profile: { isLoadingProfile, isProfileCurrentUser, showcasedSandbox },
+    },
   } = useOvermind();
-  const sandbox = profile.showcasedSandbox;
-  const isCurrentUser = profile.isProfileCurrentUser;
-
-  const openModal = () => {
-    selectSandboxClicked();
-  };
 
   if (isLoadingProfile) {
-    return (
-      <Centered vertical horizontal>
-        <Margin top={4}>
-          <ErrorTitle>Loading showcased sandbox...</ErrorTitle>
-        </Margin>
-      </Centered>
-    );
+    return <LoadingSandbox />;
   }
 
-  if (!sandbox) {
-    return (
-      <Centered vertical horizontal>
-        <Margin top={4}>
-          <ErrorTitle>
-            {isCurrentUser ? "You don't" : "This user doesn't"} have any
-            sandboxes yet
-          </ErrorTitle>
-        </Margin>
-      </Centered>
-    );
+  if (!showcasedSandbox) {
+    return <NoSandboxAvailable />;
   }
 
   return (
     <Column alignItems="center">
       <Margin top={1}>
-        {isCurrentUser && (
-          <Button small onClick={openModal}>
+        {isProfileCurrentUser && (
+          <Button onClick={() => selectSandboxClicked()} small>
             Change Sandbox
           </Button>
         )}
       </Margin>
 
       <Margin top={2} style={{ width: '100%' }}>
         <Column alignItems="initial">
-          <div style={{ flex: 2 }}>
-            <ShowcasePreview sandbox={sandbox} settings={settings} />
-          </div>
+          <ShowcasePreviewContainer>
+            <ShowcasePreview sandbox={showcasedSandbox} settings={settings} />
+          </ShowcasePreviewContainer>
 
-          <div style={{ flex: 1 }}>
-            <SandboxInfo sandbox={sandbox} />
-          </div>
+          <SandboxInfoContainer>
+            <SandboxInfo />
+          </SandboxInfoContainer>
         </Column>
       </Margin>
     </Column>