Observe deployment components (codesandbox#2178)

* Observe components that use useStore hook

* Fix typecheck

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx

@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { DeploymentIntegration } from 'app/components/DeploymentIntegration';
@@ -6,7 +7,11 @@ import { useSignals, useStore } from 'app/store';
 
 import { DeployButtonContainer } from '../../elements';
 
-export const DeployButton = ({ isOpen, toggle }) => {
+type Props = {
+  isOpen: boolean;
+  toggle: () => void;
+};
+export const DeployButton = observer<Props>(({ isOpen, toggle }) => {
   const {
     deployment: { deployWithNetlify },
   } = useSignals();
@@ -34,4 +39,4 @@ export const DeployButton = ({ isOpen, toggle }) => {
       </DeploymentIntegration>
     </DeployButtonContainer>
   );
-};
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/Actions.tsx

@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from 'app/store';
@@ -9,7 +10,7 @@ import { SubTitle } from '../elements';
 import { ClaimSiteButton } from './ClaimSiteButton';
 import { VisitSiteButton } from './VisitSiteButton';
 
-export const Actions = () => {
+export const Actions = observer(() => {
   const {
     deployment: { netlifyClaimUrl },
   } = useStore();
@@ -25,4 +26,4 @@ export const Actions = () => {
       </ButtonContainer>
     </>
   );
-};
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/ClaimSiteButton.tsx

@@ -1,10 +1,11 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from 'app/store';
 
 import { Link } from '../../../../elements';
 
-export const ClaimSiteButton = () => {
+export const ClaimSiteButton = observer(() => {
   const {
     deployment: { building, netlifyClaimUrl },
   } = useStore();
@@ -14,4 +15,4 @@ export const ClaimSiteButton = () => {
       Claim Site
     </Link>
   );
-};
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/VisitSiteButton.tsx

@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import LinkIcon from 'react-icons/lib/fa/external-link';
 import Cogs from 'react-icons/lib/fa/cogs';
@@ -6,7 +7,7 @@ import { useStore } from 'app/store';
 
 import { Link } from '../../../../elements';
 
-export const VisitSiteButton = () => {
+export const VisitSiteButton = observer(() => {
   const {
     deployment: { building, netlifySite },
   } = useStore();
@@ -24,4 +25,4 @@ export const VisitSiteButton = () => {
       )}
     </Link>
   );
-};
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/Function.tsx

@@ -1,11 +1,17 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import LightningIcon from 'react-icons/lib/md/flash-on';
 
 import { useStore } from 'app/store';
 
 import { Link } from '../../../../elements';
 
-export const Function = ({ function: { title } }) => {
+type Props = {
+  function: {
+    title: string;
+  };
+};
+export const Function = observer<Props>(({ function: { title } }) => {
   const {
     deployment: {
       building,
@@ -25,4 +31,4 @@ export const Function = ({ function: { title } }) => {
       {functionName}
     </Link>
   );
-};
+});

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

@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { DeploymentIntegration } from 'app/components/DeploymentIntegration';
@@ -8,7 +9,11 @@ import { DeployButtonContainer } from '../../elements';
 
 import { Overlay, CreateFile } from './elements';
 
-export const DeployButton = ({ isOpen, toggle }) => {
+type Props = {
+  isOpen: boolean;
+  toggle: () => void;
+};
+export const DeployButton = observer<Props>(({ isOpen, toggle }) => {
   const {
     files,
     deployment: { deploySandboxClicked },
@@ -67,4 +72,4 @@ export const DeployButton = ({ isOpen, toggle }) => {
       </DeploymentIntegration>
     </DeployButtonContainer>
   );
-};
+});

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

@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from 'app/store';
@@ -7,8 +8,12 @@ import { ButtonContainer } from '../../../elements';
 import { AliasDeploymentButton } from './AliasDeploymentButton';
 import { DeleteDeploymentButton } from './DeleteDeploymentButton';
 import { VisitDeploymentButton } from './VisitDeploymentButton';
+import { Deploy } from './types';
 
-export const Actions = ({ deploy }) => {
+type Props = {
+  deploy: Deploy;
+};
+export const Actions = observer<Props>(({ deploy }) => {
   const {
     deployment: { hasAlias },
   } = useStore();
@@ -24,4 +29,4 @@ export const Actions = ({ deploy }) => {
       ) : null}
     </ButtonContainer>
   );
-};
+});

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

@@ -4,14 +4,24 @@ import { useSignals } from 'app/store';
 
 import { Action } from '../../../../elements';
 
-export const AliasDeploymentButton = ({ deploy: { alias, uid: id } }) => {
+import { Deploy } from '../types';
+
+type Props = {
+  deploy: Deploy;
+};
+export const AliasDeploymentButton = ({
+  deploy: { alias: aliases, uid: id },
+}: Props) => {
   const {
     deployment: { aliasDeployment },
   } = useSignals();
 
   return (
-    <Action disabled={alias.length > 0} onClick={() => aliasDeployment({ id })}>
-      {alias.length > 0 ? 'Aliased' : 'Alias'}
+    <Action
+      disabled={aliases.length > 0}
+      onClick={() => aliasDeployment({ id })}
+    >
+      {aliases.length > 0 ? 'Aliased' : 'Alias'}
     </Action>
   );
 };

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

@@ -1,11 +1,15 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import TrashIcon from 'react-icons/lib/fa/trash';
 
 import { useSignals, useStore } from 'app/store';
 
 import { Action } from '../../../../elements';
 
-export const DeleteDeploymentButton = ({ id }) => {
+type Props = {
+  id: string;
+};
+export const DeleteDeploymentButton = observer<Props>(({ id }) => {
   const {
     deployment: { setDeploymentToDelete },
     modalOpened,
@@ -29,4 +33,4 @@ export const DeleteDeploymentButton = ({ id }) => {
       )}
     </Action>
   );
-};
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/types.ts

@@ -0,0 +1,6 @@
+export type Deploy = {
+  alias: string[];
+  state: string;
+  uid: string;
+  url: string;
+};