🔨 Switch PRModal to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/components/GitProgress/index.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
+
 import {
   Container,
   Cube,
@@ -9,27 +10,26 @@ import {
   Result,
 } from './elements';
 
-interface IGitProgressProps {
-  result: string | null;
+type Props = {
   message: string;
-}
-
-export const GitProgress: React.FC<IGitProgressProps> = ({
-  message,
-  result,
-}) => (
+  result: ReactNode;
+};
+export const GitProgress: FunctionComponent<Props> = ({ message, result }) => (
   <Container>
     {result ? (
       <Result>{result}</Result>
     ) : (
       <>
         <DeployAnimationContainer deploying>
-          <OpaqueLogo width={70} height={70} />
+          <OpaqueLogo height={70} width={70} />
+
           {[0, 1, 2, 3].map(i => (
-            <Cube key={i} delay={i} size={20} />
+            <Cube delay={i} key={i} size={20} />
           ))}
+
           <GitHubLogo />
         </DeployAnimationContainer>
+
         <DeployText>{message}</DeployText>
       </>
     )}

packages/app/src/app/components/GitProgress/GitProgress.tsx renamed to packages/app/src/app/components/GitProgress/index.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const ButtonContainer = styled.div`
+  font-size: 0.875rem;
+  margin-top: 1rem;
+`;

packages/app/src/app/pages/common/Modals/PRModal/elements.ts

@@ -1,36 +1,36 @@
 import React, { FunctionComponent } from 'react';
-import { useOvermind } from 'app/overmind';
+
 import { GitProgress } from 'app/components/GitProgress';
+import { useOvermind } from 'app/overmind';
+
+import { ButtonContainer } from './elements';
 
-const PRModal: FunctionComponent = () => {
+export const PRModal: FunctionComponent = () => {
   const {
     state: {
-      git: { isCreatingPr, pr },
+      git: {
+        isCreatingPr,
+        pr: { prURL },
+      },
     },
   } = useOvermind();
 
-  let result = null;
-
-  if (!isCreatingPr) {
-    result = (
-      <div>
-        Done! We{"'"}ll now open the new sandbox of this PR and GitHub in 3
-        seconds...
-        <div style={{ fontSize: '.875rem', marginTop: '1rem' }}>
-          <a href={pr.prURL} target="_blank" rel="noreferrer noopener">
-            Click here if nothing happens.
-          </a>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <GitProgress
-      result={result}
       message="Forking Repository & Creating PR..."
+      result={
+        isCreatingPr ? (
+          <div>
+            {`Done! We'll now open the new sandbox of this PR and GitHub in 3 seconds...`}
+
+            <ButtonContainer>
+              <a href={prURL} rel="noreferrer noopener" target="_blank">
+                Click here if nothing happens.
+              </a>
+            </ButtonContainer>
+          </div>
+        ) : null
+      }
     />
   );
 };
-
-export default PRModal;

packages/app/src/app/pages/common/Modals/PRModal/index.tsx

@@ -26,7 +26,7 @@ import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
 import { NetlifyLogs } from './NetlifyLogs';
 import { PickSandboxModal } from './PickSandboxModal';
 import PreferencesModal from './PreferencesModal';
-import PRModal from './PRModal';
+import { PRModal } from './PRModal';
 import { SearchDependenciesModal } from './SearchDependenciesModal';
 import { SelectSandboxModal } from './SelectSandboxModal';
 import { ShareModal } from './ShareModal';