chore: separate pages from components (#312)

Author: aganglada

src/App.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { PreviewEventsProvider } from './context/PreviewEvents';
+import Loader from './components/Loader';
+
+const Playground = React.lazy(() => import('./pages/Playground'));
+const Embedded = React.lazy(() => import('./pages/Embedded'));
+
+function App() {
+  return (
+    <Router>
+      <PreviewEventsProvider>
+        <React.Suspense fallback={<Loader />}>
+          <Switch>
+            <Route path="/embed/:gistId?/:gistVersion?" component={Embedded} />
+            <Route
+              path={['/gist/:gistId/:gistVersion?', '/']}
+              component={Playground}
+            />
+          </Switch>
+        </React.Suspense>
+      </PreviewEventsProvider>
+    </Router>
+  );
+}
+
+export default App;

src/components/App.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import Input from './Input';
 import CopyButton from './CopyButton';
-import Embedded from './Embedded';
+import Embedded from '../pages/Embedded';
 import { SyncIcon, XIcon } from '@primer/octicons-react';
 
 import { defaultPanes } from '../constants';

src/components/Embed.js

@@ -1,9 +1,10 @@
 import 'regenerator-runtime/runtime';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
-import 'regenerator-runtime/runtime';
 import 'react-toastify/dist/ReactToastify.min.css';
 import './service-worker';
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
 ReactDOM.render(<App />, document.getElementById('app'));

src/index.js

@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react';
 import queryString from 'query-string';
 import { useLocation, useParams } from 'react-router-dom';
-import Preview from './Preview';
-import Query from './Query';
-import Result from './Result';
-import MarkupEditor from './MarkupEditor';
+import Preview from '../components/Preview';
+import Query from '../components/Query';
+import Result from '../components/Result';
+import MarkupEditor from '../components/MarkupEditor';
 import useParentMessaging from '../hooks/useParentMessaging';
 import usePlayground from '../hooks/usePlayground';
-import Loader from './Loader';
+import Loader from '../components/Loader';
 
 import { defaultPanes } from '../constants';
 

src/components/Embedded.js renamed to src/pages/Embedded.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import Preview from './Preview';
-import MarkupEditor from './MarkupEditor';
+import Preview from '../components/Preview';
+import MarkupEditor from '../components/MarkupEditor';
 import usePlayground from '../hooks/usePlayground';
-import Layout from './Layout';
-import Loader from './Loader';
-import PlaygroundPanels from './PlaygroundPanels';
+import Layout from '../components/Layout';
+import Loader from '../components/Loader';
+import PlaygroundPanels from '../components/PlaygroundPanels';
 import { usePreviewEvents } from '../context/PreviewEvents';
 
 function Playground() {

src/components/Playground.js renamed to src/pages/Playground.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Playground from './App';
+import Playground from '../App';
 
 describe('App', () => {
   it('should not throw on render', () => {