Add modals concept (codesandbox#2430)

* Add modals concept

* type fixes

* wip

* Frozen modal back in with new modal concept

* Fix typings

* type fixes

Author: christianalfoni

packages/app/src/app/overmind/factories.ts

@@ -1,5 +1,5 @@
 import { Contributor } from '@codesandbox/common/lib/types';
-import { json } from 'overmind';
+import { json, IState, IDerive } from 'overmind';
 import { AsyncAction } from '.';
 
 export const withLoadApp = <T>(
@@ -68,20 +68,101 @@ export const withLoadApp = <T>(
 export const withOwnedSandbox = <T>(
   continueAction: AsyncAction<T>
 ): AsyncAction<T> => async (context, payload) => {
-  const { state, actions, effects } = context;
-
-  if (
-    !state.editor.currentSandbox.owned ||
-    (state.editor.currentSandbox.owned &&
-      state.editor.currentSandbox.isFrozen &&
-      effects.browser.confirm(
-        'This sandbox is frozen, and will be forked. Do you want to continue?'
-      ))
-  ) {
+  const { state, actions } = context;
+
+  if (!state.editor.currentSandbox.owned) {
     await actions.editor.internal.forkSandbox({
       sandboxId: state.editor.currentId,
     });
+  } else if (
+    state.editor.currentSandbox.isFrozen &&
+    state.editor.sessionFrozen
+  ) {
+    const modalResponse = await actions.modals.forkFrozenModal.open();
+
+    if (modalResponse === 'fork') {
+      await actions.editor.internal.forkSandbox({
+        sandboxId: state.editor.currentId,
+      });
+    } else if (modalResponse === 'unfreeze') {
+      state.editor.sessionFrozen = false;
+    }
   }
 
   return continueAction(context, payload);
 };
+
+export const createModals = <
+  T extends {
+    [name: string]: {
+      state?: IState;
+      result?: unknown;
+    };
+  }
+>(
+  modals: T
+): {
+  state?: {
+    current: keyof T;
+  } & {
+    [K in keyof T]: T[K]['state'] & { isCurrent: IDerive<any, any, boolean> }
+  };
+  actions?: {
+    [K in keyof T]: {
+      open: AsyncAction<
+        T[K]['state'] extends IState ? T[K]['state'] : void,
+        T[K]['result']
+      >;
+      close: AsyncAction<T[K]['result']>;
+    }
+  };
+} => {
+  function createModal(name, modal) {
+    let resolver;
+
+    const open: AsyncAction<any, any> = async ({ state }, newState = {}) => {
+      state.modals.current = name;
+
+      Object.assign(state.modals[name], newState);
+
+      return new Promise(resolve => {
+        resolver = resolve;
+      });
+    };
+
+    const close: AsyncAction<T> = async ({ state }, payload) => {
+      state.modals.current = null;
+      resolver(payload || modal.result);
+    };
+
+    return {
+      state: {
+        ...modal.state,
+        isCurrent(_, root) {
+          return root.modals.current === name;
+        },
+      },
+      actions: {
+        open,
+        close,
+      },
+    };
+  }
+
+  return Object.keys(modals).reduce(
+    (aggr, name) => {
+      const modal = createModal(name, modals[name]);
+
+      aggr.state[name] = modal.state;
+      aggr.actions[name] = modal.actions;
+
+      return aggr;
+    },
+    {
+      state: {
+        current: null,
+      },
+      actions: {},
+    }
+  ) as any;
+};

packages/app/src/app/overmind/index.ts

@@ -26,6 +26,8 @@ import * as git from './namespaces/git';
 import * as explore from './namespaces/explore';
 import * as profile from './namespaces/profile';
 import * as server from './namespaces/server';
+import { createModals } from './factories';
+import * as modals from './modals';
 
 export const config = merge(
   {
@@ -48,6 +50,7 @@ export const config = merge(
     explore,
     profile,
     server,
+    modals: createModals(modals),
   })
 );
 

packages/app/src/app/overmind/modals.ts

@@ -0,0 +1,3 @@
+export const forkFrozenModal = {
+  result: 'fork' as 'fork' | 'cancel' | 'unfreeze',
+};

packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/ForkFrozenSandboxModal.tsx

@@ -0,0 +1,71 @@
+import { inject, hooksObserver } from 'app/componentConnectors';
+import React from 'react';
+import Modal from 'app/components/Modal';
+import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import {
+  Container,
+  Title,
+  Close,
+  Actions,
+  UnlockButton,
+  Enter,
+} from './elements';
+
+export const ForkFrozenSandboxModal = inject('store', 'signals')(
+  hooksObserver(
+    ({
+      store: {
+        modals,
+        editor: {
+          currentSandbox: { customTemplate },
+        },
+      },
+      signals: { modals: modalsActions, editor },
+    }) => {
+      const type = customTemplate ? 'template' : 'sandbox';
+
+      const unlock = () => {
+        modalsActions.forkFrozenModal.close('unfreeze');
+      };
+
+      const fork = (event?: { defaultPrevented: boolean }) => {
+        if (event && !event.defaultPrevented) {
+          modalsActions.forkFrozenModal.close('fork');
+        }
+      };
+
+      useKeyPressEvent('Enter', fork);
+
+      return (
+        <Modal
+          isOpen={modals.forkFrozenModal.isCurrent}
+          width={450}
+          onClose={() => modalsActions.forkFrozenModal.close()}
+        >
+          <Container>
+            <Close
+              onClick={() => modalsActions.forkFrozenModal.close('cancel')}
+            />
+            <Title>Frozen {customTemplate ? 'Template' : 'Sandbox'}</Title>
+            <p>
+              This {type} is frozen, which means you can’t make edits without
+              unfreezing it.
+            </p>
+            <p>
+              Do you want to unfreeze the {type} for this session or make a
+              fork?
+            </p>
+            <Actions>
+              <UnlockButton onClick={unlock}>Unfreeze</UnlockButton>
+              <Button small onClick={fork}>
+                Fork
+                <Enter />
+              </Button>
+            </Actions>
+          </Container>
+        </Modal>
+      );
+    }
+  )
+);

…odals/ForkFrozenSandboxModal/elements.ts …ditor/ForkFrozenSandboxModal/elements.tspackages/app/src/app/pages/common/Modals/ForkFrozenSandboxModal/elements.ts renamed to packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/elements.ts packages/app/src/app/pages/common/Modals/ForkFrozenSandboxModal/elements.ts renamed to packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/elements.ts

@@ -14,13 +14,12 @@ interface IFrozenProps {
 export const Frozen = inject('store', 'signals')(
   hooksObserver(
     ({
-      isFrozen,
       signals: {
         editor: { frozenUpdated, sessionFreezeOverride },
       },
       store: {
         editor: {
-          currentSandbox: { customTemplate },
+          currentSandbox: { isFrozen, customTemplate },
           sessionFrozen,
         },
       },
@@ -63,7 +62,7 @@ export const Frozen = inject('store', 'signals')(
               </FreezeContainer>
             </PropertyValue>
           </Item>
-          {customTemplate && !sessionFrozen && (
+          {!sessionFrozen && (
             <FrozenWarning>Edits are enabled for this session</FrozenWarning>
           )}
         </>

…n/Modals/ForkFrozenSandboxModal/index.ts …x/Editor/ForkFrozenSandboxModal/index.tspackages/app/src/app/pages/common/Modals/ForkFrozenSandboxModal/index.ts renamed to packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/index.ts packages/app/src/app/pages/common/Modals/ForkFrozenSandboxModal/index.ts renamed to packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/index.ts

@@ -142,7 +142,7 @@ export const Project = inject('store', 'signals')(
               </Explanation>
             )}
 
-            {editable && <Frozen isFrozen={sandbox.isFrozen} />}
+            {editable && <Frozen />}
 
             {sandbox.forkedFromSandbox && (
               <Item>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/Frozen.tsx

@@ -7,6 +7,7 @@ import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 
+import ForkFrozenSandboxModal from './ForkFrozenSandboxModal';
 import { Container } from './elements';
 import { Workspace } from './Workspace';
 import Content from './Content';
@@ -153,6 +154,7 @@ class ContentSplit extends React.Component {
               )}
             </div>
           </Fullscreen>
+          <ForkFrozenSandboxModal />
         </Container>
       </ThemeProvider>
     );