Refactor NewSandbox to functional component with hooks (codesandbox#1948)

Author: MichaelDeBoey

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

@@ -1,45 +1,39 @@
-import React from 'react';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { inject } from 'mobx-react';
+import React, { useEffect } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
-
-import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
-import Centered from '@codesandbox/common/lib/components/flex/Centered';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import history from 'app/utils/history';
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
 import NewSandboxModal from '../Dashboard/Content/CreateNewSandbox/Modal';
 
-class NewSandboxComponent extends React.PureComponent {
-  componentDidMount() {
-    this.props.signals.sandboxPageMounted();
-  }
-
-  createSandbox = template => {
-    history.push(sandboxUrl({ id: template.shortid }));
-  };
-
-  render() {
-    return (
-      <MaxWidth>
-        <Margin style={{ height: '100%' }} vertical={1.5} horizontal={1.5}>
-          <Navigation title="New Sandbox" />
-
-          <Margin top={5}>
-            <Centered horizontal vertical>
-              <Margin style={{ maxWidth: '100%', width: 900 }} top={2}>
-                <NewSandboxModal
-                  createSandbox={this.createSandbox}
-                  width={950}
-                />
-              </Margin>
-            </Centered>
-          </Margin>
+const createSandbox = template => {
+  history.push(sandboxUrl({ id: template.shortid }));
+};
+
+const NewSandbox = ({ signals: { sandboxPageMounted } }) => {
+  useEffect(() => {
+    sandboxPageMounted();
+  }, [sandboxPageMounted]);
+
+  return (
+    <MaxWidth>
+      <Margin horizontal={1.5} style={{ height: '100%' }} vertical={1.5}>
+        <Navigation title="New Sandbox" />
+
+        <Margin top={5}>
+          <Centered horizontal vertical>
+            <Margin style={{ maxWidth: '100%', width: 900 }} top={2}>
+              <NewSandboxModal createSandbox={createSandbox} width={950} />
+            </Margin>
+          </Centered>
         </Margin>
-      </MaxWidth>
-    );
-  }
-}
+      </Margin>
+    </MaxWidth>
+  );
+};
 
-export default inject('signals')(NewSandboxComponent);
+export default inject('signals')(NewSandbox);