🔨 Switch SelectSandboxModal to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/profile/actions.ts

@@ -83,9 +83,10 @@ export const selectSandboxClicked: AsyncAction = async ({ state, effects }) => {
   }
 };
 
-export const newSandboxShowcaseSelected: AsyncAction<{
-  id: string;
-}> = async ({ state, effects }, { id }) => {
+export const newSandboxShowcaseSelected: AsyncAction<string> = async (
+  { state, effects },
+  id
+) => {
   state.profile.showSelectSandboxModal = false;
   state.profile.profiles[
     state.profile.currentProfileId

packages/app/src/app/pages/common/Modals/SelectSandboxModal/Sandbox/elements.js

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components';
+
+export const Button = styled.button<{ active: boolean }>`
+  ${({ active }) => css`
+    display: flex;
+    justify-content: space-between;
+    transition: 0.3s ease all;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    border: none;
+    background-color: ${active ? '#eeeeee' : 'white'};
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.9);
+    box-sizing: border-box;
+    border-bottom: 1px solid #dddddd;
+    text-align: left;
+    ${active &&
+      css`
+        font-weight: 600;
+      `};
+    cursor: ${active ? 'default' : 'pointer'};
+
+    &:hover {
+      background-color: #eeeeee;
+    }
+  `};
+`;
+
+export const Date = styled.div`
+  color: rgba(0, 0, 0, 0.6);
+`;

packages/app/src/app/pages/common/Modals/SelectSandboxModal/Sandbox/elements.ts

@@ -0,0 +1,41 @@
+import { UserSandbox } from '@codesandbox/common/lib/types';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import React, { FunctionComponent } from 'react';
+import { format } from 'date-fns';
+import { zonedTimeToUtc } from 'date-fns-tz';
+
+import { useOvermind } from 'app/overmind';
+
+import { Button, Date } from './elements';
+
+type Props = {
+  sandbox: UserSandbox;
+};
+export const Sandbox: FunctionComponent<Props> = ({ sandbox }) => {
+  const {
+    actions: {
+      profile: { newSandboxShowcaseSelected },
+    },
+    state: {
+      profile: { showcasedSandbox },
+    },
+  } = useOvermind();
+  const active = sandbox.id === showcasedSandbox.id;
+
+  return (
+    <Button
+      active={active}
+      onClick={() => newSandboxShowcaseSelected(sandbox.id)}
+    >
+      <div>
+        {getSandboxName(sandbox)}
+
+        {active && ' (Selected)'}
+      </div>
+
+      <Date>
+        {format(zonedTimeToUtc(sandbox.insertedAt, 'Etc/UTC'), 'MMM dd, yyyy')}
+      </Date>
+    </Button>
+  );
+};

packages/app/src/app/pages/common/Modals/SelectSandboxModal/Sandbox/index.js

@@ -1,37 +1,26 @@
 import React, { FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
-import { Padding } from './elements';
 
-import Sandbox from './Sandbox';
+import { Padding } from './elements';
+import { Sandbox } from './Sandbox';
 
 export const SelectSandboxModal: FunctionComponent = () => {
   const {
     state: {
-      profile: { isLoadingSandboxes, showcasedSandbox, userSandboxes },
-    },
-    actions: {
-      profile: { newSandboxShowcaseSelected },
+      profile: { isLoadingSandboxes, userSandboxes },
     },
   } = useOvermind();
 
   if (isLoadingSandboxes) {
     return <Padding>Loading sandboxes...</Padding>;
   }
 
-  const currentShowcasedSandboxId = showcasedSandbox && showcasedSandbox.id;
-
   return (
     <div>
-      {userSandboxes
-        .filter(x => x)
-        .map(sandbox => (
-          <Sandbox
-            active={sandbox.id === currentShowcasedSandboxId}
-            key={sandbox.id}
-            sandbox={sandbox}
-            setShowcasedSandbox={id => newSandboxShowcaseSelected({ id })}
-          />
-        ))}
+      {userSandboxes.filter(Boolean).map(sandbox => (
+        <Sandbox key={sandbox.id} sandbox={sandbox} />
+      ))}
     </div>
   );
 };

packages/app/src/app/pages/common/Modals/SelectSandboxModal/Sandbox/index.tsx

@@ -4,4 +4,5 @@ export const getSandboxName = ({
   alias,
   id,
   title,
-}: Pick<Sandbox, 'alias' | 'id' | 'title'>) => title || alias || id;
+}: Partial<Pick<Sandbox, 'alias'>> & Pick<Sandbox, 'id' | 'title'>) =>
+  title || alias || id;