Fixes

Author: CompuIves

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Create/Create.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { Scrollable } from '@codesandbox/common/lib/components/Scrollable';
 import { useOvermind } from 'app/overmind';
 import { LinkButton } from 'app/components/LinkButton';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { Header } from '../elements';
 import { CenteredMessage } from './elements';
 
@@ -14,6 +15,10 @@ export const Create = () => {
   const [filter, setFilter] = React.useState('');
   const [officialTemplateInfos, setOfficialTemplates] = React.useState([]);
 
+  useEffect(() => {
+    track('Create Sandbox Tab Open', { tab: 'create' });
+  }, []);
+
   useEffect(() => {
     getTemplateInfosFromAPI('/api/v1/sandboxes/templates/official').then(x => {
       setOfficialTemplates(x);

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Explore/Explore.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Scrollable } from '@codesandbox/common/lib/components/Scrollable';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { Header } from '../elements';
 import { SearchBox } from '../SearchBox';
 import { SearchResults } from './SearchResults';
@@ -13,6 +14,10 @@ export const Explore = () => {
   const [exploreTemplates, setExploreTemplates] = useState<ITemplateInfo[]>([]);
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    track('Create Sandbox Tab Open', { tab: 'explore' });
+  }, []);
+
   useEffect(() => {
     let loaded = false;
     const timeout = window.setTimeout(() => {

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {
   gitHubToSandboxUrl,
   protocolAndHost,
@@ -7,6 +7,7 @@ import {
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { useOvermind } from 'app/overmind';
 import { SignInButton } from 'app/pages/common/SignInButton';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { TerminalIcon } from '../Icons/TerminalIcon';
 import { DownloadIcon } from '../Icons/DownloadIcon';
 import { GitHubIcon, StackbitIcon } from '../Icons';
@@ -48,6 +49,10 @@ export const Import = () => {
   const [transformedUrl, setTransformedUrl] = useState('');
   const [url, setUrl] = useState('');
 
+  useEffect(() => {
+    track('Create Sandbox Tab Open', { tab: 'import' });
+  }, []);
+
   const updateUrl = useCallback(({ target: { value: newUrl } }) => {
     if (!newUrl) {
       setError(null);

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Welcome/Welcome.tsx

@@ -1,46 +1,53 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { CodeAnywhere } from './CodeAnywhere';
 import { StartQuickly } from './StartQuickly';
 import { PrototypeRapidly } from './PrototypeRapidly';
 import { Header } from '../elements';
 import { Features, FeatureName, FeatureText, Actions } from './elements';
 
-export const Welcome = ({ goToTab }: { goToTab: (event: any) => void }) => (
-  <>
-    <Header>
-      <span>Welcome to CodeSandbox</span>
-    </Header>
-    <Features>
-      <li>
-        <CodeAnywhere />
-        <FeatureName>Code Anywhere</FeatureName>
-        <FeatureText>
-          An instantly ready, full-featured online IDE for web development on
-          any device with a browser.
-        </FeatureText>
-      </li>
-      <li>
-        <StartQuickly />
-        <FeatureName>Start Quickly</FeatureName>
-        <FeatureText>
-          With no setup, and templates for all popular frameworks to get you
-          started quickly.
-        </FeatureText>
-      </li>
-      <li>
-        <PrototypeRapidly />
-        <FeatureName>Prototype Rapidly</FeatureName>
-        <FeatureText>
-          You can create web apps, experiment with code, test ideas, and share
-          creations easily.
-        </FeatureText>
-      </li>
-    </Features>
-    <Actions>
-      <Button small style={{ fontSize: 12, width: 200 }} onClick={goToTab}>
-        Create Sandbox
-      </Button>
-    </Actions>
-  </>
-);
+export const Welcome = ({ goToTab }: { goToTab: (event: any) => void }) => {
+  useEffect(() => {
+    track('Create Sandbox Tab Open', { tab: 'welcome' });
+  }, []);
+
+  return (
+    <>
+      <Header>
+        <span>Welcome to CodeSandbox</span>
+      </Header>
+      <Features>
+        <li>
+          <CodeAnywhere />
+          <FeatureName>Code Anywhere</FeatureName>
+          <FeatureText>
+            An instantly ready, full-featured online IDE for web development on
+            any device with a browser.
+          </FeatureText>
+        </li>
+        <li>
+          <StartQuickly />
+          <FeatureName>Start Quickly</FeatureName>
+          <FeatureText>
+            With no setup, and templates for all popular frameworks to get you
+            started quickly.
+          </FeatureText>
+        </li>
+        <li>
+          <PrototypeRapidly />
+          <FeatureName>Prototype Rapidly</FeatureName>
+          <FeatureText>
+            You can create web apps, experiment with code, test ideas, and share
+            creations easily.
+          </FeatureText>
+        </li>
+      </Features>
+      <Actions>
+        <Button small style={{ fontSize: 12, width: 200 }} onClick={goToTab}>
+          Create Sandbox
+        </Button>
+      </Actions>
+    </>
+  );
+};

packages/app/src/app/overmind/effects/vscode/initializers.ts

@@ -93,7 +93,12 @@ export function installCustomTheme(id: string, name: string, theme: string) {
   // @ts-ignore
   const fs = window.BrowserFS.BFSRequire('fs');
   const extName = `${id}-theme`;
-  fs.mkdirSync(`/extensions/${extName}`);
+
+  const folder = `/extensions/${extName}`;
+  const folderExists = fs.existsSync(folder);
+  if (!folderExists) {
+    fs.mkdirSync(folder);
+  }
   fs.writeFileSync(
     `/extensions/${extName}/package.json`,
     JSON.stringify(packageJSON)

packages/common/src/components/Preference/PreferenceText/index.tsx

@@ -27,9 +27,9 @@ export const PreferenceText: FunctionComponent<Props> = ({
   };
 
   return createElement(isTextArea ? TextArea : Input, {
+    ...props,
     onChange: handleChange,
     placeholder,
     value,
-    ...props,
   });
 };