Refactor /app/pages/Profile/Showcase/index.js to /app/pages/Profile/Showcase/index.tsx 🔨 Refactor 🧠 Overmind Hacktoberfest

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -946,9 +946,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       ),
       options: {
         inlineClassName: classification.type
-          ? `${classification.kind} ${classification.type}-of-${
-              classification.parentKind
-            }`
+          ? `${classification.kind} ${classification.type}-of-${classification.parentKind}`
           : classification.kind,
       },
     }));

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

@@ -0,0 +1,77 @@
+import React 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 ShowcasePreview from '../../common/ShowcasePreview';
+
+import { ErrorTitle } from './elements';
+
+export const Showcase: React.FC<{}> = () => {
+  const {
+    state: {
+      profile,
+      profile: { isLoadingProfile },
+      preferences: { settings },
+      isLoggedIn,
+    },
+    actions: {
+      profile: { selectSandboxClicked },
+    },
+  } = 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>
+    );
+  }
+
+  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>
+    );
+  }
+
+  return (
+    <Column alignItems="center">
+      <Margin top={1}>
+        {isCurrentUser && (
+          <Button small onClick={openModal}>
+            Change Sandbox
+          </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} />
+          </div>
+        </Column>
+      </Margin>
+    </Column>
+  );
+};

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

@@ -11,7 +11,7 @@ import { NotFound } from 'app/pages/common/NotFound';
 import { useOvermind } from 'app/overmind';
 import Header from './Header';
 import Navigation from './Navigation';
-import Showcase from './Showcase';
+import { Showcase } from './Showcase';
 import Sandboxes from './Sandboxes';
 import { Container, Content } from './elements';
 

packages/common/src/components/flex/Column.tsx

@@ -2,14 +2,15 @@ import styled from 'styled-components';
 
 export default styled.div<{
   flex?: boolean;
-  justifyContent: string;
-  alignItems: string;
+  justifyContent?: string;
+  alignItems?: string;
 }>`
   display: flex;
   flex-direction: column;
 
   ${props => props.flex && `flex: ${props.flex}`};
 
-  justify-content: ${props => props.justifyContent};
-  align-items: ${props => props.alignItems};
+  ${props =>
+    props.justifyContent && `justify-content: ${props.justifyContent}`};
+  ${props => props.alignItems && `align-items: ${props.alignItems}`};
 `;