Improve React DevTools Implementation (codesandbox#3189)

* improve code

* re add button

Author: SaraVieira

packages/common/src/templates/helpers/react-template.ts

@@ -0,0 +1,21 @@
+import Template, { ViewConfig } from '../template';
+
+export class ReactTemplate extends Template {
+  getViews(): ViewConfig[] {
+    const REACT_VIEWS: ViewConfig[] = [
+      {
+        views: [{ id: 'codesandbox.browser' }, { id: 'codesandbox.tests' }],
+      },
+      {
+        open: true,
+        views: [
+          { id: 'codesandbox.console' },
+          { id: 'codesandbox.problems' },
+          { id: 'codesandbox.react-devtools' },
+        ],
+      },
+    ];
+
+    return REACT_VIEWS;
+  }
+}

packages/common/src/templates/react-ts.ts

@@ -1,9 +1,9 @@
-import configurations from './configuration';
-
-import Template from './template';
 import { decorateSelector } from '../utils/decorate-selector';
+import { ReactTemplate } from './helpers/react-template';
+
+import configurations from './configuration';
 
-export default new Template(
+export default new ReactTemplate(
   'create-react-app-typescript',
   'React + TS',
   'https://github.com/wmonk/create-react-app-typescript',

packages/common/src/templates/react.ts

@@ -1,9 +1,9 @@
-import Template from './template';
 import { decorateSelector } from '../utils/decorate-selector';
 
 import configurations from './configuration';
+import { ReactTemplate } from './helpers/react-template';
 
-export default new Template(
+export default new ReactTemplate(
   'create-react-app',
   'React',
   'https://github.com/facebookincubator/create-react-app',

packages/common/src/templates/template.ts

@@ -69,12 +69,6 @@ const CLIENT_VIEWS: ViewConfig[] = [
   },
 ];
 
-// React sandboxes have an additional devtool on top of CLIENT_VIEWS
-const REACT_CLIENT_VIEWS: ViewConfig[] = JSON.parse(
-  JSON.stringify(CLIENT_VIEWS)
-);
-REACT_CLIENT_VIEWS[1].views.push({ id: 'codesandbox.react-devtools' });
-
 const SERVER_VIEWS: ViewConfig[] = [
   {
     views: [{ id: 'codesandbox.browser' }],
@@ -206,16 +200,6 @@ export default class Template {
     if (this.isServer) {
       return SERVER_VIEWS;
     }
-
-    const dependencies =
-      configurationFiles.package &&
-      configurationFiles.package.parsed &&
-      configurationFiles.package.parsed.dependencies;
-
-    if (dependencies && dependencies.react) {
-      return REACT_CLIENT_VIEWS;
-    }
-
     return CLIENT_VIEWS;
   }