Refactored app/pages/common/Modals/ForkServerModal (#2774)

Refactored app/pages/common/Modals/ForkServerModal

Author: christianalfoni

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

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import { SignInButton } from 'app/pages/common/SignInButton';
+
+import { Container, Heading, Explanation } from '../elements';
+
+export const ForkServerModal: React.FC = () => {
+  const {
+    state: {
+      isLoggedIn,
+      editor: { currentSandbox },
+    },
+    actions: {
+      modalClosed,
+      editor: { forkSandboxClicked },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    // Which means that the user signed in in the meantime with the intention to
+    // fork
+    if (isLoggedIn) {
+      forkSandboxClicked();
+      modalClosed();
+    }
+  }, [forkSandboxClicked, isLoggedIn, modalClosed]);
+
+  const templateDefinition = getTemplateDefinition(currentSandbox.template);
+  const niceName = (
+    <span style={{ color: templateDefinition.color(), fontWeight: 500 }}>
+      {templateDefinition.niceName}
+    </span>
+  );
+
+  return (
+    <Container>
+      <Heading>Fork {niceName} Sandbox</Heading>
+      <Explanation>
+        We execute {niceName} sandboxes in a server container. This is still in
+        beta, so we require you to sign in before you can fork a {niceName}{' '}
+        sandbox.
+      </Explanation>
+
+      <SignInButton style={{ marginTop: 12 }} />
+    </Container>
+  );
+};

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

@@ -1,38 +1,38 @@
-import React, { Component } from 'react';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import { inject, observer } from 'app/componentConnectors';
-import { ThemeProvider } from 'styled-components';
 import Modal from 'app/components/Modal';
+import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
 import Loadable from 'app/utils/Loadable';
 import { templateColor } from 'app/utils/template-color';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
-import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
+import React, { Component } from 'react';
+import { ThemeProvider } from 'styled-components';
 
-import NewSandbox from './NewSandbox';
-import PreferencesModal from './PreferencesModal';
-import DeleteSandboxModal from './DeleteSandboxModal';
-import DeleteDeploymentModal from './DeleteDeploymentModal';
-import ShareModal from './ShareModal';
-import DeploymentModal from './DeploymentModal';
-import ExportGitHubModal from './ExportGitHubModal';
 import CommitModal from './CommitModal';
-import PRModal from './PRModal';
-import SelectSandboxModal from './SelectSandboxModal';
-import SearchDependenciesModal from './SearchDependenciesModal';
+import DeleteDeploymentModal from './DeleteDeploymentModal';
 import DeleteProfileSandboxModal from './DeleteProfileSandboxModal';
+import DeleteSandboxModal from './DeleteSandboxModal';
+import DeploymentModal from './DeploymentModal';
 import EmptyTrash from './EmptyTrash';
+import ExportGitHubModal from './ExportGitHubModal';
+import FeedbackModal from './FeedbackModal';
+import { ForkServerModal } from './ForkServerModal';
 import LiveSessionEnded from './LiveSessionEnded';
 import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
-import UploadModal from './UploadModal';
-import StorageManagementModal from './StorageManagementModal';
-import ForkServerModal from './ForkServerModal';
-import PrivacyServerWarning from './PrivacyServerWarning';
-import PickSandboxModal from './PickSandboxModal';
-import FeedbackModal from './FeedbackModal';
 import NetlifyLogs from './NetlifyLogs';
+import NewSandbox from './NewSandbox';
+import PickSandboxModal from './PickSandboxModal';
+import PreferencesModal from './PreferencesModal';
+import PrivacyServerWarning from './PrivacyServerWarning';
+import PRModal from './PRModal';
+import SearchDependenciesModal from './SearchDependenciesModal';
+import SelectSandboxModal from './SelectSandboxModal';
+import ShareModal from './ShareModal';
 // eslint-disable-next-line
 import SignInForTemplates from './SignInForTemplates/index.ts';
+import StorageManagementModal from './StorageManagementModal';
 import { SurveyModal } from './SurveyModal';
+import UploadModal from './UploadModal';
 
 const MoveSandboxFolderModal = Loadable(() =>
   import('./MoveSandboxFolderModal')