Resolve discussions

Author: MichaelDeBoey

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

@@ -12,7 +12,9 @@ export const Deployment = () => {
     deployment: { getDeploys },
   } = useSignals();
 
-  useEffect(() => getDeploys(), []); // eslint-disable-line
+  useEffect(() => {
+    getDeploys();
+  }, [getDeploys]);
 
   return (
     <div>

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

@@ -45,7 +45,9 @@ export const Netlify = observer(() => {
 
   const [isVisible, setVisibility] = useState(false);
 
-  useEffect(() => getNetlifyDeploys(), []); // eslint-disable-line
+  useEffect(() => {
+    getNetlifyDeploys();
+  }, [getNetlifyDeploys]);
 
   const template = getTemplate(editor.currentSandbox.template);
   const functionDirectory = getFunctionDir(editor.currentSandbox);
@@ -61,7 +63,7 @@ export const Netlify = observer(() => {
           <DeploymentIntegration
             beta
             color="#FFFFFF"
-            deploy={() => deployWithNetlify()}
+            deploy={deployWithNetlify}
             Icon={NetlifyLogo}
             light
             loading={deployment.deploying || deployment.building}

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

@@ -41,7 +41,7 @@ export const Zeit = observer(() => {
       <WorkspaceInputContainer style={{ marginTop: '1rem', marginBottom: 0 }}>
         <DeploymentIntegration
           color="#000000"
-          deploy={() => deploySandboxClicked()}
+          deploy={deploySandboxClicked}
           Icon={NowLogo}
           name="Now"
           open={isVisible}
@@ -73,7 +73,9 @@ export const Zeit = observer(() => {
                   <Name>
                     {deploy.name}
 
-                    <span>({distanceInWordsToNow(deploy.created)} ago)</span>
+                    <span>{`(${distanceInWordsToNow(
+                      deploy.created
+                    )} ago)`}</span>
                   </Name>
 
                   <State state={deploy.state}>

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

@@ -5,10 +5,18 @@ const mapColorToState = (state: string, theme: any) => {
   const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR'];
   const STARTED = ['BOOTED', 'READY'];
 
-  if (STARTING.includes(state)) return '#fccb7e';
-  if (ERROR.includes(state)) return theme.red;
-  if (STARTED.includes(state)) return theme.green;
-  if (state === 'FROZEN') return theme.blue;
+  if (STARTING.includes(state)) {
+    return '#fccb7e';
+  }
+  if (ERROR.includes(state)) {
+    return theme.red;
+  }
+  if (STARTED.includes(state)) {
+    return theme.green;
+  }
+  if (state === 'FROZEN') {
+    return theme.blue;
+  }
 
   return theme.gray;
 };
@@ -29,7 +37,7 @@ export const State = styled.span`
       margin-right: 0.5rem;
       background: ${mapColorToState(state, theme)};
     }
-  `}
+  `};
 `;
 
 export const Deploys = styled.ul`
@@ -64,7 +72,7 @@ export const Name = styled.span`
       font-size: 12px;
       margin-left: 0.5rem;
     }
-  `}
+  `};
 `;
 
 export const Link = styled.a`
@@ -96,7 +104,7 @@ export const Link = styled.a`
     &:disabled {
       background: ${theme.gray};
     }
-  `}
+  `};
 `;
 
 export const Action = Link.withComponent('button');
@@ -129,5 +137,5 @@ export const Wrapper = styled.div`
         opacity: 0.5;
         pointer-events: none;
       `};
-  `}
+  `};
 `;