🔨 Switch Deploys to use useOvermind (codesandbox#2571)

* 🔨 Switch Deploys to use useOvermind

* Fix types

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx

@@ -1,6 +1,7 @@
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import { inject, hooksObserver } from 'app/componentConnectors';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
 
 import {
   WorkspaceInputContainer,
@@ -18,8 +19,14 @@ import {
 import { Actions } from './Actions';
 import { Alias } from './Alias';
 
-export const Deploys = inject('store')(
-  hooksObserver(({ store: { deployment: { sandboxDeploys } } }) => (
+export const Deploys: FunctionComponent = () => {
+  const {
+    state: {
+      deployment: { sandboxDeploys },
+    },
+  } = useOvermind();
+
+  return (
     <DeploysContainer>
       <WorkspaceSubtitle>Sandbox Deploys</WorkspaceSubtitle>
 
@@ -33,7 +40,9 @@ export const Deploys = inject('store')(
                 <span>{`(${distanceInWordsToNow(deploy.created)} ago)`}</span>
               </Name>
 
-              <State state={deploy.state}>{deploy.state.toLowerCase()}</State>
+              <State state={deploy.state}>
+                {deploy.state.toString().toLowerCase()}
+              </State>
 
               {deploy.alias.length > 0 ? <Alias alias={deploy.alias} /> : null}
 
@@ -43,5 +52,5 @@ export const Deploys = inject('store')(
         </DeploysWrapper>
       </WorkspaceInputContainer>
     </DeploysContainer>
-  ))
-);
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts

@@ -1,11 +1,20 @@
+import { ZeitDeploymentState } from '@codesandbox/common/lib/types';
 import styled, { css } from 'styled-components';
 
 import { WorkspaceInputContainer } from '../../elements';
 
-const mapColorToState = (state: string, theme: any) => {
-  const STARTING = ['DEPLOYING', 'BUILDING', 'INITIALIZING'];
-  const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR'];
-  const STARTED = ['BOOTED', 'READY'];
+const mapColorToState = (state: ZeitDeploymentState, theme: any) => {
+  const STARTING = [
+    ZeitDeploymentState.BUILDING,
+    ZeitDeploymentState.DEPLOYING,
+    ZeitDeploymentState.INITIALIZING,
+  ];
+  const ERROR = [
+    ZeitDeploymentState.BUILD_ERROR,
+    ZeitDeploymentState.DEPLOYMENT_ERROR,
+    ZeitDeploymentState.ERROR,
+  ];
+  const STARTED = [ZeitDeploymentState.BOOTED, ZeitDeploymentState.READY];
 
   if (STARTING.includes(state)) {
     return '#FCCB7E';
@@ -16,14 +25,14 @@ const mapColorToState = (state: string, theme: any) => {
   if (STARTED.includes(state)) {
     return theme.green;
   }
-  if (state === 'FROZEN') {
+  if (state === ZeitDeploymentState.FROZEN) {
     return theme.blue;
   }
 
   return theme.gray;
 };
 
-export const State = styled.span<{ state: string }>`
+export const State = styled.span<{ state: ZeitDeploymentState }>`
   ${({ state, theme }) => css`
     align-items: center;
     display: flex;

packages/common/src/types/index.ts

@@ -505,15 +505,15 @@ export type ZeitAlias = {
 };
 
 export enum ZeitDeploymentState {
-  'DEPLOYING',
-  'INITIALIZING',
-  'DEPLOYMENT_ERROR',
-  'BOOTED',
-  'BUILDING',
-  'READY',
-  'BUILD_ERROR',
-  'FROZEN',
-  'ERROR',
+  DEPLOYING = 'DEPLOYING',
+  INITIALIZING = 'INITIALIZING',
+  DEPLOYMENT_ERROR = 'DEPLOYMENT_ERROR',
+  BOOTED = 'BOOTED',
+  BUILDING = 'BUILDING',
+  READY = 'READY',
+  BUILD_ERROR = 'BUILD_ERROR',
+  FROZEN = 'FROZEN',
+  ERROR = 'ERROR',
 }
 
 export enum ZeitDeploymentType {