fix templates (codesandbox#2456)

* fix templates

* Update packages/app/src/app/overmind/namespaces/workspace/actions.ts

Author: christianalfoni

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

@@ -16,6 +16,7 @@ import {
   PaymentDetails,
   Profile,
   UserSandbox,
+  CustomTemplate,
 } from '@codesandbox/common/lib/types';
 import { TemplateType } from '@codesandbox/common/lib/templates';
 import { client } from 'app/graphql/client';
@@ -394,4 +395,33 @@ export default {
   preloadTemplates() {
     client.query({ query: LIST_TEMPLATES, variables: { showAll: true } });
   },
+  deleteTemplate(
+    sandboxId: string,
+    templateId: string
+  ): Promise<CustomTemplate> {
+    return api.delete(`/sandboxes/${sandboxId}/templates/${templateId}`);
+  },
+  updateTemplate(
+    sandboxId: string,
+    template: CustomTemplate
+  ): Promise<CustomTemplate> {
+    return api
+      .put<{ template: CustomTemplate }>(
+        `/sandboxes/${sandboxId}/templates/${template.id}`,
+        {
+          template,
+        }
+      )
+      .then(data => data.template);
+  },
+  createTemplate(
+    sandboxId: string,
+    template: CustomTemplate
+  ): Promise<CustomTemplate> {
+    return api
+      .post<{ template: CustomTemplate }>(`/sandboxes/${sandboxId}/templates`, {
+        template,
+      })
+      .then(data => data.template);
+  },
 };

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -78,6 +78,7 @@ type State = {
     devToolIndex: number;
     tabPosition: number;
   };
+  sessionFrozen: boolean;
 };
 
 export const state: State = {
@@ -94,6 +95,7 @@ export const state: State = {
   currentTabId: null,
   tabs: [],
   errors: [],
+  sessionFrozen: true,
   corrections: [],
   pendingOperations: {},
   pendingUserSelections: [],

packages/app/src/app/overmind/namespaces/workspace/actions.ts

@@ -2,6 +2,7 @@ import { Action, AsyncAction } from 'app/overmind';
 import getTemplate from '@codesandbox/common/lib/templates';
 import slugify from '@codesandbox/common/lib/utils/slugify';
 import { withOwnedSandbox } from 'app/overmind/factories';
+import { CustomTemplate } from '@codesandbox/common/lib/types';
 
 export const valueChanged: Action<{
   field: string;
@@ -194,3 +195,77 @@ export const setWorkspaceHidden: Action<{ hidden: boolean }> = (
 ) => {
   state.workspace.workspaceHidden = hidden;
 };
+
+export const deleteTemplate: AsyncAction = async ({
+  state,
+  actions,
+  effects,
+}) => {
+  effects.analytics.track('Template - Removed', { source: 'editor' });
+  const sandboxId = state.editor.currentId;
+  const templateId = state.editor.currentSandbox.customTemplate.id;
+
+  try {
+    await effects.api.deleteTemplate(sandboxId, templateId);
+    const sandbox = state.editor.sandboxes[sandboxId];
+
+    sandbox.isFrozen = false;
+    sandbox.customTemplate = null;
+    actions.modalClosed();
+    effects.notificationToast.success('Template Deleted');
+  } catch (error) {
+    effects.notificationToast.error('Could not delete custom template');
+  }
+};
+
+export const editTemplate: AsyncAction = async ({
+  state,
+  actions,
+  effects,
+}) => {
+  effects.analytics.track('Template - Edited', { source: 'editor' });
+
+  const sandboxId = state.editor.currentId;
+  const template = state.editor.currentSandbox.customTemplate;
+
+  try {
+    const updatedTemplate = await effects.api.updateTemplate(
+      sandboxId,
+      template
+    );
+
+    actions.modalClosed();
+    state.editor.currentSandbox.customTemplate = updatedTemplate;
+    effects.notificationToast.success('Templated Edited');
+  } catch (error) {
+    effects.notificationToast.error('Could not edit custom template');
+  }
+};
+
+export const addedTemplate: AsyncAction<{
+  template: CustomTemplate;
+}> = async ({ state, actions, effects }, { template }) => {
+  effects.analytics.track('Template - Created', { source: 'editor' });
+
+  const sandboxId = state.editor.currentId;
+
+  try {
+    const newTemplate = await effects.api.createTemplate(sandboxId, template);
+    const sandbox = state.editor.sandboxes[sandboxId];
+    sandbox.isFrozen = true;
+    sandbox.customTemplate = newTemplate;
+    actions.modalClosed();
+    effects.notificationToast.success('Templated Created');
+  } catch (error) {
+    effects.notificationToast.error(
+      'Could not create template, please try again later'
+    );
+  }
+};
+
+export const sessionFreezeOverride: Action<{ frozen: boolean }> = (
+  { state },
+  { frozen }
+) => {
+  state.editor.sessionFrozen = frozen;
+};