Extract MostUsedSandbox from CreateNewSandbox (codesandbox#3101)

Author: MichaelDeBoey

packages/app/src/app/components/CreateNewSandbox/MostUsedSandbox/elements.ts

@@ -0,0 +1,5 @@
+import { Link } from 'react-router-dom';
+
+import { Container } from '../elements';
+
+export const ContainerLink = Container.withComponent(Link);

packages/app/src/app/components/CreateNewSandbox/MostUsedSandbox/index.tsx

@@ -0,0 +1,41 @@
+import { Template } from '@codesandbox/common/lib/types';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
+import { Container } from '../elements';
+
+import { ContainerLink } from './elements';
+
+type Props = {
+  collectionId?: string;
+  createSandbox: (template: Pick<Template, 'shortid'>) => void;
+  template: Template | null;
+};
+export const MostUsedSandbox: FunctionComponent<Props> = ({
+  collectionId,
+  createSandbox,
+  template,
+}) => {
+  if (!template) {
+    return null;
+  }
+
+  const buttonName = `Create ${template.niceName} Sandbox`;
+  return collectionId ? (
+    <Container
+      color={template.color}
+      onClick={() => createSandbox(template)}
+      role="button"
+      tabIndex={0}
+    >
+      {buttonName}
+    </Container>
+  ) : (
+    <ContainerLink
+      color={template.color}
+      to={sandboxUrl({ alias: null, id: template.shortid })}
+    >
+      {buttonName}
+    </ContainerLink>
+  );
+};

packages/app/src/app/components/CreateNewSandbox/elements.ts

@@ -1,30 +1,4 @@
-import { Link } from 'react-router-dom';
-import { animated } from 'react-spring/renderprops';
-import styled, { css, keyframes } from 'styled-components';
-
-const fadeIn = keyframes`
-  0%   { opacity: 0; }
-  100% { opacity: 0.5; }
-`;
-
-export const DarkBG = styled.div<{ closing: boolean }>`
-  ${({ closing }) => css`
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: black;
-    opacity: 0;
-    transition: 0.3s ease opacity;
-
-    ${!closing &&
-      css`
-        animation: ${fadeIn} 0.3s;
-        animation-fill-mode: forwards;
-      `};
-  `}
-`;
+import styled, { css } from 'styled-components';
 
 export const ButtonsContainer = styled.div`
   display: flex;
@@ -73,16 +47,3 @@ export const Container = styled.div<{ hide?: boolean; color?: any }>`
     }
   `}
 `;
-
-export const ContainerLink = Container.withComponent(Link);
-
-export const AnimatedModalContainer = styled(animated.div)<{
-  forking: boolean;
-}>`
-  ${({ forking }) =>
-    forking &&
-    css`
-      position: fixed;
-      transition: 0.15s ease all;
-    `};
-`;

packages/app/src/app/components/CreateNewSandbox/index.tsx

@@ -1,86 +1,69 @@
-import React from 'react';
-import history from 'app/utils/history';
+import Template from '@codesandbox/common/lib/templates/template';
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, {
+  ComponentProps,
+  FunctionComponent,
+  HTMLAttributes,
+  KeyboardEvent,
+} from 'react';
+
 import { useOvermind } from 'app/overmind';
-import Template from '@codesandbox/common/lib/templates/template';
-import { ButtonsContainer, Container, ContainerLink } from './elements';
+import history from 'app/utils/history';
 
-interface ICreateNewSandboxProps {
-  style: React.CSSProperties;
-  collectionId?: string;
-  mostUsedSandboxTemplate: Template;
-}
+import { ButtonsContainer, Container } from './elements';
+import { MostUsedSandbox } from './MostUsedSandbox';
 
-export const CreateNewSandboxButton = ({
-  style,
+type Props = {
+  collectionId?: string;
+  mostUsedSandboxTemplate: ComponentProps<typeof MostUsedSandbox>['template'];
+} & Pick<HTMLAttributes<HTMLDivElement>, 'style'>;
+export const CreateNewSandboxButton: FunctionComponent<Props> = ({
   collectionId,
   mostUsedSandboxTemplate,
-}: ICreateNewSandboxProps) => {
-  const { actions } = useOvermind();
+  style,
+}) => {
+  const {
+    actions: {
+      dashboard: { createSandboxClicked },
+      modalOpened,
+    },
+  } = useOvermind();
 
-  const createSandbox = (template: Template) => {
-    if (!collectionId) {
+  const createSandbox = ({ shortid }: Pick<Template, 'shortid'>) => {
+    if (collectionId) {
+      createSandboxClicked({ body: { collectionId }, sandboxId: shortid });
+    } else {
       setTimeout(() => {
-        history.push(sandboxUrl({ id: template.shortid, alias: null }));
+        history.push(sandboxUrl({ alias: null, id: shortid }));
       }, 300);
-    } else {
-      actions.dashboard.createSandboxClicked({
-        sandboxId: template.shortid,
-        body: {
-          collectionId,
-        },
-      });
     }
   };
 
   const handleClick = () => {
-    actions.modalOpened({ modal: 'newSandbox' });
+    modalOpened({ modal: 'newSandbox' });
   };
 
-  let mostUsedSandboxComponent;
-
-  if (mostUsedSandboxTemplate) {
-    const buttonName = `Create ${mostUsedSandboxTemplate.niceName} Sandbox`;
-    if (collectionId) {
-      mostUsedSandboxComponent = (
-        <Container
-          onClick={() => createSandbox(mostUsedSandboxTemplate)}
-          color={mostUsedSandboxTemplate.color}
-          tabIndex={0}
-          role="button"
-        >
-          {buttonName}
-        </Container>
-      );
-    } else {
-      mostUsedSandboxComponent = (
-        <ContainerLink
-          to={sandboxUrl({ id: mostUsedSandboxTemplate.shortid, alias: null })}
-          color={mostUsedSandboxTemplate.color}
-        >
-          {buttonName}
-        </ContainerLink>
-      );
-    }
-  }
-
   return (
     <div style={style}>
       <ButtonsContainer>
         <Container
           onClick={handleClick}
           tabIndex={0}
           role="button"
-          onKeyDown={e => {
-            if (e.keyCode === ENTER) {
+          onKeyDown={({ keyCode }: KeyboardEvent) => {
+            if (keyCode === ENTER) {
               handleClick();
             }
           }}
         >
           Create Sandbox
         </Container>
-        {mostUsedSandboxComponent}
+
+        <MostUsedSandbox
+          createSandbox={createSandbox}
+          template={mostUsedSandboxTemplate}
+        />
       </ButtonsContainer>
     </div>
   );