🔨 Refactor, 🧠 Overmind | /app/pages/common/Modals/DeploymentModal/index.js

.all-contributorsrc

@@ -1440,6 +1440,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "sajadhsm",
+      "name": "Sajad Hashemian",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/20022818?v=4",
+      "profile": "https://github.com/sajadhsm",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -240,6 +240,7 @@ Thanks goes to these wonderful people
     <td align="center"><a href="https://github.com/milap1296"><img src="https://avatars2.githubusercontent.com/u/19545730?v=4" width="100px;" alt="milap1296"/><br /><sub><b>milap1296</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=milap1296" title="Code">💻</a></td>
     <td align="center"><a href="http://yevhenorlov.com"><img src="https://avatars2.githubusercontent.com/u/17388747?v=4" width="100px;" alt="yevhen orlov"/><br /><sub><b>yevhen orlov</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=yevhenorlov" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/NileshPatel17"><img src="https://avatars2.githubusercontent.com/u/27020381?v=4" width="100px;" alt="Nilesh Patel"/><br /><sub><b>Nilesh Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=NileshPatel17" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/sajadhsm"><img src="https://avatars3.githubusercontent.com/u/20022818?v=4" width="100px;" alt="Sajad Hashemian"/><br /><sub><b>Sajad Hashemian</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=sajadhsm" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/app/src/app/components/IntegrationModal/IntegrationModal.tsx

@@ -13,7 +13,7 @@ import {
 
 interface IIntegrationModalProps {
   title: string;
-  subtitle: string;
+  subtitle: string | React.ReactNode;
   signedIn: boolean;
   Integration: React.ComponentType;
   name: string;

packages/app/src/app/pages/common/Modals/DeploymentModal/index.js → packages/app/src/app/pages/common/Modals/DeploymentModal/DeploymentModal.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 import { ZeitIntegration } from 'app/pages/common/ZeitIntegration';
 import { IntegrationModal } from 'app/components/IntegrationModal';
 import track from '@codesandbox/common/lib/utils/analytics';
@@ -17,10 +17,20 @@ import {
   DeploymentManagementNotice,
 } from './elements';
 
-function DeploymentModal({ store, signals }) {
-  const { user } = store;
+export const DeploymentModal: FunctionComponent = () => {
+  const {
+    state: {
+      user: {
+        integrations: { zeit },
+      },
+      deployment: { deploying, url },
+    },
+    actions: {
+      deployment: { deployClicked },
+    },
+  } = useOvermind();
 
-  const zeitSignedIn = user.integrations.zeit;
+  const zeitSignedIn = !!zeit;
 
   return (
     <IntegrationModal
@@ -43,10 +53,10 @@ function DeploymentModal({ store, signals }) {
       signedIn={zeitSignedIn}
     >
       <Centered horizontal>
-        {store.deployment.deploying && (
+        {deploying && (
           <Margin top={1}>
             <DeployText>Deploying sandbox...</DeployText>
-            <DeployAnimationContainer deploying={store.deployment.deploying}>
+            <DeployAnimationContainer deploying={deploying}>
               <StyledLogo width={70} height={70} />
               {[0, 1, 2, 3].map(i => (
                 <StyledCube key={i} i={i} size={20} />
@@ -56,17 +66,17 @@ function DeploymentModal({ store, signals }) {
           </Margin>
         )}
 
-        {store.deployment.url ? (
+        {url ? (
           <Margin top={1} bottom={2}>
             <Centered horizontal>
               <DeployText>Deployed!</DeployText>
 
               <DeployedLink
-                href={store.deployment.url}
+                href={url}
                 rel="nofollow noreferrer"
                 target="_blank"
               >
-                {store.deployment.url}
+                {url}
               </DeployedLink>
 
               <DeploymentManagementNotice>
@@ -83,13 +93,13 @@ function DeploymentModal({ store, signals }) {
             </Centered>
           </Margin>
         ) : (
-          <ButtonContainer deploying={store.deployment.deploying}>
+          <ButtonContainer deploying={deploying}>
             <Button
               onClick={() => {
                 track('Deploy Clicked', { provider: 'zeit' });
-                signals.deployment.deployClicked();
+                deployClicked();
               }}
-              disabled={!zeitSignedIn || store.deployment.deploying}
+              disabled={!zeitSignedIn || deploying}
             >
               Deploy Now
             </Button>
@@ -98,6 +108,4 @@ function DeploymentModal({ store, signals }) {
       </Centered>
     </IntegrationModal>
   );
-}
-
-export default inject('store', 'signals')(observer(DeploymentModal));
+};

packages/app/src/app/pages/common/Modals/DeploymentModal/elements.js → packages/app/src/app/pages/common/Modals/DeploymentModal/elements.ts

@@ -1,9 +1,9 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import delayInEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 import delayOutEffect from '@codesandbox/common/lib/utils/animation/delay-out-effect';
 import { NowLogo } from 'app/components/NowLogo';
 import { OpaqueLogo } from 'app/components/OpaqueLogo';
-import Cube from './Cube';
+import { Cube } from 'app/components/Cube';
 
 const cubeAnimation = keyframes`
   0% {
@@ -23,24 +23,28 @@ const cubeAnimation = keyframes`
   }
 `;
 
-export const ButtonContainer = styled.div`
-  margin: 2rem 4rem;
-  margin-bottom: 3rem;
-  ${delayInEffect()} ${({ deploying }) =>
-    deploying && delayOutEffect(0, false)};
+export const ButtonContainer = styled.div<{ deploying: boolean }>`
+  ${({ deploying }) => css`
+    margin: 2rem 4rem;
+    margin-bottom: 3rem;
+    ${delayInEffect()}
+    ${deploying && delayOutEffect(0, false)};
+  `}
 `;
 
-export const DeployAnimationContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 16px;
-  bottom: 10px;
-  right: 0;
-  left: 0;
+export const DeployAnimationContainer = styled.div<{ deploying: boolean }>`
+  ${({ deploying }) => css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 16px;
+    bottom: 10px;
+    right: 0;
+    left: 0;
 
-  ${({ deploying }) => deploying && delayInEffect(0, false)};
+    ${deploying && delayInEffect(0, false)};
+  `}
 `;
 
 export const StyledNowLogo = styled(NowLogo)`
@@ -49,7 +53,7 @@ export const StyledNowLogo = styled(NowLogo)`
   transform: translateY(10px) translateX(80px);
 `;
 
-export const StyledCube = styled(Cube)`
+export const StyledCube = styled(Cube)<{ i: number }>`
   position: absolute;
   animation: ${cubeAnimation} 2s ease-in infinite;
   animation-delay: ${({ i }) => i * 0.5}s;

packages/app/src/app/pages/common/Modals/DeploymentModal/index.ts

@@ -0,0 +1 @@
+export { DeploymentModal } from './DeploymentModal';

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

@@ -12,7 +12,7 @@ import CommitModal from './CommitModal';
 import { DeleteDeploymentModal } from './DeleteDeploymentModal';
 import { DeleteProfileSandboxModal } from './DeleteProfileSandboxModal';
 import DeleteSandboxModal from './DeleteSandboxModal';
-import DeploymentModal from './DeploymentModal';
+import { DeploymentModal } from './DeploymentModal';
 import { EmptyTrash } from './EmptyTrash';
 import ExportGitHubModal from './ExportGitHubModal';
 import { FeedbackModal } from './FeedbackModal';