Properly handle github urls and alias urls on fork

Author: CompuIves

packages/app/scripts/start.js

@@ -208,7 +208,7 @@ function addMiddleware(devServer, index) {
     devServer.use(
       '/api',
       proxy({
-        target: 'https://codesandbox.io',
+        target: 'https://codesandbox.stream',
         changeOrigin: true,
       })
     );

packages/app/src/app/pages/Sandbox/index.js

@@ -45,7 +45,21 @@ class SandboxPage extends React.Component {
   }
 
   fetchSandbox = () => {
-    const id = this.props.match.params.id;
+    let id = this.props.match.params.id;
+
+    // /**
+    //  * We do this as an optimization. Most urls end with the shortid (5 chars), if we can extract that
+    //  * we try to do so. This check is also handled on the server, but this way the sequence of `sandboxChanged`
+    //  * won't try to fetch the sandbox twice if it doesn't find the "id" in the state.
+    //  */
+    // const split = id.split('-');
+    // if (
+    //   split.length > 1 &&
+    //   !id.startsWith('github') &&
+    //   split[split.length - 1].length === 5
+    // ) {
+    //   id = split.pop();
+    // }
 
     this.props.signals.editor.sandboxChanged({ id });
   };

packages/app/src/app/store/actions.js

@@ -5,6 +5,10 @@ import track, {
   identify,
   setUserId,
 } from '@codesandbox/common/lib/utils/analytics';
+import {
+  sandboxUrl,
+  editorUrl,
+} from '@codesandbox/common/lib/utils/url-generator';
 
 import { parseConfigurations } from './utils/parse-configurations';
 import { mainModule, defaultOpenedModule } from './utils/main-module';
@@ -27,6 +31,28 @@ export function getSandbox({ props, api, path }) {
     });
 }
 
+/**
+ * Sometimes the alias is set as "id" in the url, if we already have that
+ * sandbox in the state we need to make sure that the id is set correctly.
+ * This function is reps
+ */
+export function setIdFromAlias({ props, state }) {
+  if (state.get(`editor.sandboxes.${props.id}`)) {
+    return {};
+  }
+
+  const sandboxes = state.get(`editor.sandboxes`).toJSON();
+  const matchingSandbox = Object.keys(sandboxes).find(
+    id => sandboxUrl(sandboxes[id]) === `${editorUrl()}${props.id}`
+  );
+
+  if (matchingSandbox) {
+    return { id: matchingSandbox };
+  }
+
+  return {};
+}
+
 export function callVSCodeCallback({ props }) {
   const { cbID } = props;
   if (cbID) {

packages/app/src/app/store/providers/Api.js

@@ -1,4 +1,7 @@
-import { logError } from '@codesandbox/common/lib/utils/analytics';
+import track, { logError } from '@codesandbox/common/lib/utils/analytics';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
+import { patronUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { values } from 'lodash-es';
 
 import { camelizeKeys, decamelizeKeys } from 'humps';
@@ -44,13 +47,53 @@ const getMessage = (error: Error & { response: ?Object }) => {
   return error.message;
 };
 
+function showNotification(controller, errorMessage: string) {
+  if (errorMessage.startsWith('You need to sign in to create more than')) {
+    // Error for "You need to sign in to create more than 10 sandboxes"
+    track('Anonymous Sandbox Limit Reached', { errorMessage });
+
+    notificationState.addNotification({
+      title: errorMessage,
+      status: NotificationStatus.ERROR,
+      actions: {
+        primary: [
+          {
+            label: 'Sign in',
+            run: () => {
+              controller.getSignal('signInClicked')({});
+            },
+          },
+        ],
+      },
+    });
+  } else if (errorMessage.startsWith('You reached the maximum of')) {
+    track('Non-Patron Sandbox Limit Reached', { errorMessage });
+
+    notificationState.addNotification({
+      title: errorMessage,
+      status: NotificationStatus.ERROR,
+      actions: {
+        primary: [
+          {
+            label: 'Open Patron Page',
+            run: () => {
+              window.open(patronUrl(), '_blank');
+            },
+          },
+        ],
+      },
+    });
+  } else {
+    controller.runSignal(
+      'notificationAdded',
+      addNotification(errorMessage, 'error')
+    );
+  }
+}
+
 const showError = (error, controller) => {
   const errorMessage = getMessage(error);
-
-  controller.runSignal(
-    'notificationAdded',
-    addNotification(errorMessage, 'error')
-  );
+  showNotification(controller, errorMessage);
 
   error.apiMessage = errorMessage; // eslint-disable-line no-param-reassign
 };

packages/app/src/app/store/sequences.js

@@ -476,6 +476,8 @@ export const signInCli = [
 export const loadSandbox = factories.withLoadApp([
   set(state`editor.error`, null),
 
+  actions.setIdFromAlias,
+
   when(
     state`editor.sandboxes.${props`id`}`,
     sandbox => sandbox && !sandbox.team