Git support (codesandbox#26)

* Add fetching from github

* Update components to fetch git repo

* Apply linting rules

* Remove redundant message check

* Remove console statements

* Remove duplicate import

* Adjust url generation to use git

* DRY up the statistics

* Change url-generator to encode git paths

* Prevent githubUrl from creating an empty text node

* Remove unnecessary eslint-disable-lines

* Use helper function to encodeUriComponent

Author: CompuIves

src/app/components/Loading.js

@@ -13,10 +13,9 @@ const LogoContainer = styled.div`
   animation-duration: 800ms;
 `;
 
-export default () => (
+export default () =>
   <Centered vertical horizontal>
     <LogoContainer>
       <Logo width={490} height={490} />
     </LogoContainer>
-  </Centered>
-);
+  </Centered>;

src/app/components/sandbox/Preview/index.js

@@ -8,9 +8,8 @@ import type { Preferences } from 'app/store/preferences/reducer';
 import type { Module, Sandbox, Directory, ModuleError } from 'common/types';
 
 import { frameUrl } from 'app/utils/url-generator';
-import { isMainModule } from 'app/store/entities/sandboxes/modules/selectors';
-import defaultBoilerplates
-  from 'app/store/entities/sandboxes/boilerplates/default-boilerplates';
+import { findMainModule } from 'app/store/entities/sandboxes/modules/selectors';
+import defaultBoilerplates from 'app/store/entities/sandboxes/boilerplates/default-boilerplates';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 
 import Navigator from './Navigator';
@@ -193,7 +192,7 @@ export default class Preview extends React.PureComponent {
 
   getRenderedModule = () => {
     const { modules, module, isInProjectView } = this.props;
-    return isInProjectView ? modules.find(isMainModule) : module;
+    return isInProjectView ? findMainModule(modules) : module;
   };
 
   executeCodeImmediately = () => {

src/app/components/text/SubTitle.js

@@ -8,5 +8,6 @@ export default styled.h2`
   font-size: 1.75rem;
   color: ${props => props.theme.background2.lighten(2)};
   font-weight: 300;
+  margin-top: 0;
   margin-bottom: 1.5rem;
 `;

src/app/hoc/__snapshots__/show-alternative-component.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hoc show-alternative-component only renders app if all prop exists and is falsy 1`] = `
+<div>
+  Loading
+</div>
+`;
+
+exports[`hoc show-alternative-component only renders app if all prop exists and is falsy 2`] = `
+<div>
+  App
+</div>
+`;
+
+exports[`hoc show-alternative-component renders app if prop exists 1`] = `
+<div>
+  App
+</div>
+`;
+
+exports[`hoc show-alternative-component renders app if prop exists and is falsy 1`] = `
+<div>
+  App
+</div>
+`;
+
+exports[`hoc show-alternative-component renders loading component if prop doesn't exist 1`] = `
+<div>
+  Loading
+</div>
+`;

src/app/hoc/show-alternative-component.js

@@ -0,0 +1,19 @@
+import { createElement } from 'react';
+
+/**
+ * Shows a loading component if any of the props provided by `fields` does
+ * not exist
+ */
+export default (LoadingComponent, fields = []) => Component => props => {
+  const componentLoaded = fields.every(
+    field => typeof props[field] !== 'undefined' && props[field] !== null,
+  );
+
+  if (componentLoaded) {
+    return createElement(Component, props);
+  }
+
+  return createElement(LoadingComponent, props);
+};
+
+// AlternativeComponent(LoadingComponent, ['field'])(Component)

src/app/hoc/show-alternative-component.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import testRemder from 'app/utils/test/render';
+
+import showAlternativeComponent from './show-alternative-component';
+
+describe('hoc', () => {
+  describe('show-alternative-component', () => {
+    const LoadingComponent = () => <div>Loading</div>;
+    const AppComponent = () => <div>App</div>;
+    it("renders loading component if prop doesn't exist", () => {
+      const ComposedComponent = showAlternativeComponent(LoadingComponent, [
+        'field',
+      ])(AppComponent);
+
+      testRemder(<ComposedComponent />);
+    });
+
+    it('renders app if prop exists', () => {
+      const ComposedComponent = showAlternativeComponent(LoadingComponent, [
+        'field',
+      ])(AppComponent);
+
+      testRemder(<ComposedComponent field="test" />);
+    });
+
+    it('renders app if prop exists and is falsy', () => {
+      const ComposedComponent = showAlternativeComponent(LoadingComponent, [
+        'field',
+      ])(AppComponent);
+
+      testRemder(<ComposedComponent field={false} />);
+    });
+
+    it('only renders app if all prop exists and is falsy', () => {
+      const ComposedComponent = showAlternativeComponent(LoadingComponent, [
+        'field',
+        'field2',
+      ])(AppComponent);
+
+      testRemder(<ComposedComponent field={false} />);
+      testRemder(<ComposedComponent field={false} field2={false} />);
+    });
+  });
+});

src/app/pages/Profile/Showcase/ShowcasePreview.js

@@ -9,18 +9,16 @@ import Preview from 'app/components/sandbox/Preview';
 import delayEffect from 'app/utils/animation/delay-effect';
 import {
   modulesFromSandboxSelector,
-  isMainModule,
+  findMainModule,
 } from 'app/store/entities/sandboxes/modules/selectors';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 
-import {
-  directoriesFromSandboxSelector,
-} from 'app/store/entities/sandboxes/directories/selectors';
+import { directoriesFromSandboxSelector } from 'app/store/entities/sandboxes/directories/selectors';
 import { preferencesSelector } from '../../../store/preferences/selectors';
 
 const Container = styled.div`
   position: relative;
-  ${delayEffect(0.40)}
+  ${delayEffect(0.4)}
   height: 500px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
 
@@ -62,7 +60,7 @@ class ShowcasePreview extends React.PureComponent {
       directories,
     } = this.props;
 
-    const mainModule = modules.find(isMainModule);
+    const mainModule = findMainModule(modules);
 
     return (
       <Container>

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -6,12 +6,10 @@ import ShareIcon from 'react-icons/lib/md/share';
 import Files from 'embed/components/Files';
 import ModeIcons from 'app/components/sandbox/ModeIcons';
 import {
-  isMainModule,
+  findMainModule,
   modulesFromSandboxSelector,
 } from 'app/store/entities/sandboxes/modules/selectors';
-import {
-  directoriesFromSandboxSelector,
-} from 'app/store/entities/sandboxes/directories/selectors';
+import { directoriesFromSandboxSelector } from 'app/store/entities/sandboxes/directories/selectors';
 import {
   optionsToParameterizedUrl,
   protocolAndHost,
@@ -31,6 +29,11 @@ const Container = styled.div`
   height: 100%;
 `;
 
+const FilesContainer = styled.div`
+  max-height: 300px;
+  overflow: auto;
+`;
+
 const PaddedPreference = styled(Preference)`
   color: rgba(255, 255, 255, 0.6);
   padding-bottom: 1rem;
@@ -223,7 +226,8 @@ class ShareView extends React.PureComponent {
   // eslint-disable-next-line
   getButtonMarkdown = () => {
     const { sandbox } = this.props;
-    return `[![Edit ${sandbox.title || sandbox.id}](${BUTTON_URL})](${this.getEditorUrl()})`;
+    return `[![Edit ${sandbox.title ||
+      sandbox.id}](${BUTTON_URL})](${this.getEditorUrl()})`;
   };
 
   // eslint-disable-next-line
@@ -248,7 +252,7 @@ class ShareView extends React.PureComponent {
     const { showEditor, showPreview, autoResize, hideNavigation } = this.state;
 
     const defaultModule =
-      this.state.defaultModule || modules.find(isMainModule).id;
+      this.state.defaultModule || findMainModule(modules).id;
 
     return (
       <Container>
@@ -260,7 +264,7 @@ class ShareView extends React.PureComponent {
             moreInfo: true,
           }}
         >
-          {() => (
+          {() =>
             <ShareOptions>
               <h3>Share options</h3>
               <Divider>
@@ -302,13 +306,15 @@ class ShareView extends React.PureComponent {
                   <div>
                     <h4>Default module to show and preview</h4>
 
-                    <Files
-                      modules={modules}
-                      directories={directories}
-                      directoryId={null}
-                      currentModule={defaultModule}
-                      setCurrentModule={this.setDefaultModule}
-                    />
+                    <FilesContainer>
+                      <Files
+                        modules={modules}
+                        directories={directories}
+                        directoryId={null}
+                        currentModule={defaultModule}
+                        setCurrentModule={this.setDefaultModule}
+                      />
+                    </FilesContainer>
                   </div>
                 </Column>
                 <Column>
@@ -352,8 +358,7 @@ class ShareView extends React.PureComponent {
                   </Inputs>
                 </Column>
               </Divider>
-            </ShareOptions>
-          )}
+            </ShareOptions>}
         </HoverMenu>
       </Container>
     );

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -65,7 +65,8 @@ const Chevron = styled.div`
 
   cursor: pointer;
   &:hover {
-    transform: rotateZ(${props => (props.workspaceHidden ? '135deg' : '45deg')});
+    transform: rotateZ(${props =>
+      props.workspaceHidden ? '135deg' : '45deg'});
     color: white;
   }
 

src/app/pages/Sandbox/Editor/Content/Skeleton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Fullscreen from 'app/components/flex/Fullscreen';
+import Title from 'app/components/text/Title';
+import SubTitle from 'app/components/text/SubTitle';
+import Centered from 'app/components/flex/Centered';
+
+const Header = styled.div`
+  position: absolute;
+  top: 0;
+  height: 3rem;
+  left: 0;
+  right: 0;
+  background-color: ${props => props.theme.background2};
+  z-index: 40;
+  border-bottom: 1px solid ${props => props.theme.background2.darken(0.3)};
+`;
+
+export default () =>
+  <Fullscreen>
+    <Header />
+    <Centered horizontal vertical>
+      <Title delay={0.6}>Loading Sandbox...</Title>
+      <SubTitle delay={1}>Fetching git repository...</SubTitle>
+    </Centered>
+  </Fullscreen>;