Deleting sandboxes (#11)

* Possible to delete sandboxes

* Int

* Fix lint errors

* Styling tweaks

.eslintrc

@@ -20,7 +20,8 @@
     "react/jsx-filename-extension": 0,
     "react/sort-comp": 0,
     "import/no-extraneous-dependencies": 0,
-    "arrow-parens": 0
+    "arrow-parens": 0,
+    "import/prefer-default-export": 0
   },
   "settings": {
     "import/resolver": {

package.json

@@ -119,7 +119,8 @@
     "build": "NODE_ENV=production node scripts/build.js && gulp",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
-    "lint": "eslint src"
+    "lint:app": "eslint src/app",
+    "lint:embed": "eslint src/embed"
   },
   "jest": {
     "rootDir": "src",

src/app/components/Logo.js

@@ -1,6 +1,10 @@
 import React from 'react';
 
-export default ({ width = 35, height = 35, className }) => (
+export default ({
+  width = 35,
+  height = 35,
+  className,
+}: { width: number, height: number, className: ?string }) => (
   <svg
     x="0px"
     y="0px"
@@ -12,15 +16,15 @@ export default ({ width = 35, height = 35, className }) => (
     <g id="Layer_1">
       <polyline
         fill="#FFFFFF"
-        points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851 	"
+        points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"
       />
       <polyline
         fill="#FFFFFF"
-        points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438 	"
+        points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"
       />
       <polyline
         fill="#FFFFFF"
-        points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795 	"
+        points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"
       />
     </g>
     <g id="Layer_2">
@@ -29,7 +33,7 @@ export default ({ width = 35, height = 35, className }) => (
         stroke="#FFFFFF"
         strokeWidth="50"
         strokeMiterlimit="10"
-        points="899,287.833 509,513 509,963 	"
+        points="899,287.833 509,513 509,963"
       />
       <line
         fill="none"
@@ -53,8 +57,7 @@ export default ({ width = 35, height = 35, className }) => (
         stroke="#FFFFFF"
         strokeWidth="50"
         strokeMiterlimit="10"
-        points="121,739.083 510.917,963.042 901,738.333
-		901,288 511,62 121,289 	"
+        points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
       />
     </g>
   </svg>

src/app/components/Notification.js

@@ -93,7 +93,7 @@ const CloseIconHandler = styled.div`
 
 type Props = {
   title: string,
-  body: string,
+  body: string, // eslint-disable-line
   type: string,
   buttons: Array<NotificationButton>,
   close: () => void,

src/app/components/Switch.js

@@ -28,14 +28,17 @@ const Container = styled.div`
   }
 `;
 
+const getSize = ({ small }) =>
+  (small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)');
+
 const Dot = styled.div`
   transition: inherit;
   position: absolute;
   height: ${props => (props.small ? 14 : 20)}px;
   width: 1rem;
   left: 0.1rem;
   border-radius: 4px;
-  transform: translateX(${props => (props.right ? props.small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)' : '0')});
+  transform: translateX(${props => (props.right ? getSize(props) : '0')});
   top: ${({ small }) => (small ? `calc(0.1rem + 1px)` : `calc(0.1rem)`)};
   background-color: white;
   box-shadow: 0 0 4px rgba(0,0,0,0.2);

src/app/components/Tooltip.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
+// eslint-disable-next-line
 const getDirectionTransforms = ({ offset = 0, left, right, bottom, top }) => {
   if (left) {
     return `
@@ -29,6 +30,7 @@ const getDirectionTransforms = ({ offset = 0, left, right, bottom, top }) => {
   `;
 };
 
+// eslint-disable-next-line
 const getDirectionArrow = ({ theme, left, right, bottom, top }) => {
   if (left) {
     return `
@@ -115,7 +117,7 @@ const Tooltip = styled.div`
 `;
 
 type Props = {
-  className: ?tring,
+  className: ?string,
   offset: ?number,
   children: React.CElement,
   message: string,

src/app/components/buttons/Button.js

@@ -59,7 +59,13 @@ const LinkButton = styled(Link)`${styles}`;
 const AButton = styled.a`${styles}`;
 const Button = styled.button`${styles}`;
 
-export default props => {
+type Props = {
+  [key: any]: any,
+  to: ?string,
+  href: ?string,
+};
+
+export default (props: Props) => {
   // Link
   if (props.to) {
     return <LinkButton {...props} />;

src/app/components/buttons/Button.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import testRender from 'app/utils/test/render';
+import { MemoryRouter } from 'react-router-dom';
+import Button from './Button';
+
+describe('Button', () => {
+  it('renders', () => {
+    testRender(<Button>Test</Button>);
+  });
+
+  it('renders onClick', () => {
+    testRender(<Button onClick={() => {}}>Test</Button>);
+  });
+
+  it('renders hrefs', () => {
+    testRender(
+      <MemoryRouter>
+        <Button to="https://ivesvh.com">Test</Button>
+      </MemoryRouter>,
+    );
+  });
+
+  it('renders properties', () => {
+    testRender(<Button small>Test</Button>);
+  });
+
+  it('renders disabled', () => {
+    testRender(<Button disabled>Test</Button>);
+  });
+});

src/app/components/buttons/LinkButton.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import theme from 'common/theme';
+
+export default styled.button`
+  display: inline-block;
+  background-color: transparent;
+  color: ${() => theme.secondary()};
+  border: none;
+  outline: none;
+  cursor: pointer;
+  text-decoration: underline;
+`;

src/app/components/buttons/LinkButton.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import testRender from 'app/utils/test/render';
+import LinkButton from './LinkButton';
+
+describe('LinkButton', () => {
+  it('renders', () => {
+    testRender(<LinkButton>Test</LinkButton>);
+  });
+
+  it('renders onClick', () => {
+    testRender(<LinkButton onClick={() => {}}>Test</LinkButton>);
+  });
+});

src/app/components/buttons/__snapshots__/Button.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+<button
+  className="gSpDoI"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders disabled 1`] = `
+<button
+  className="dEOCIp"
+  disabled={true}
+>
+  Test
+</button>
+`;
+
+exports[`Button renders hrefs 1`] = `
+<a
+  className="gSpDoI"
+  href="https://ivesvh.com"
+  onClick={[Function]}
+>
+  Test
+</a>
+`;
+
+exports[`Button renders onClick 1`] = `
+<button
+  className="gSpDoI"
+  onClick={[Function]}
+>
+  Test
+</button>
+`;
+
+exports[`Button renders properties 1`] = `
+<button
+  className="eDPTas"
+>
+  Test
+</button>
+`;

src/app/components/buttons/__snapshots__/LinkButton.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinkButton renders 1`] = `
+<button
+  className="lnvNEu"
+>
+  Test
+</button>
+`;
+
+exports[`LinkButton renders onClick 1`] = `
+<button
+  className="lnvNEu"
+  onClick={[Function]}
+>
+  Test
+</button>
+`;

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

@@ -194,7 +194,7 @@ export default class CodeEditor extends React.PureComponent {
 
     const showAutoComplete = cm => {
       if (this.server) {
-        const filter = new RegExp('[\.a-z_$]', 'i');
+        const filter = new RegExp('[.a-z_$]', 'i');
         if (cm.display.input.textarea.value.slice(-1).match(filter)) {
           cm.showHint({ hint: this.server.getHint, completeSingle: false });
         }

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

@@ -56,9 +56,9 @@ type Props = {
   url: string,
   onChange: (text: string) => void,
   onConfirm: () => void,
-  onBack?: () => void,
-  onForward?: () => void,
-  onRefresh?: () => void,
+  onBack: ?() => void,
+  onForward: ?() => void,
+  onRefresh: ?() => void,
   isProjectView: boolean,
   toggleProjectView: () => void,
 };

src/app/containers/Notifications.js

@@ -20,6 +20,7 @@ type State = {
   hovering: boolean,
 };
 
+// eslint-disable-next-line
 injectGlobal`
   .notifications-leave {
     opacity: 1;

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

@@ -3,6 +3,7 @@ import React from 'react';
 type Props = {
   HeaderComponent: React.Component<any, any>,
   headerProps: ?Object,
+  children: Function,
 };
 
 type State = {
@@ -23,7 +24,7 @@ export default class HoverMenu extends React.PureComponent {
     }
   };
 
-  handleViewClick = e => {
+  handleViewClick = () => {
     // Prevent element from closing itself when you click on it
     this.setState({ clicked: true });
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import type { User } from 'app/store/user/reducer';
-import type { Sandbox } from 'app/store/entities/sandboxes/entity';
 import Tooltip from 'app/components/Tooltip';
 
 import DownIcon from 'react-icons/lib/go/chevron-down';
@@ -79,7 +78,6 @@ const Sandboxes = styled.div`
 
 type Props = {
   user: User,
-  sandbox: Sandbox,
   signOut: () => void,
   loadUserSandboxes: () => void,
 };

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.js

@@ -37,7 +37,7 @@ type Props = {
   setCurrentModule: (id: string) => any,
   root: ?boolean,
   isMainModule: boolean,
-  isInProjectView: boolean,
+  isInProjectView: boolean, // eslint-disable-line
   moduleHasError: boolean,
 };
 
@@ -161,7 +161,7 @@ class Entry extends React.PureComponent {
       type,
       active,
       setCurrentModule,
-      connectDragSource,
+      connectDragSource, // eslint-disable-line
       onCreateModuleClick,
       onCreateDirectoryClick,
       deleteEntry,

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js

@@ -48,7 +48,6 @@ type Props = {
   root: ?boolean,
   siblings: Array<Module | Directory>,
   depth: ?number,
-  openModuleTab: (id: string) => void,
   openMenu: (e: Event) => void,
   sandboxActions: typeof sandboxActionCreators,
   currentModuleId: ?string,
@@ -176,8 +175,8 @@ class DirectoryEntry extends React.PureComponent {
       title,
       openMenu,
       currentModuleId,
-      connectDropTarget,
-      isOver,
+      connectDropTarget, // eslint-disable-line
+      isOver, // eslint-disable-line
       errors,
       isInProjectView,
       depth = 0,
@@ -283,11 +282,11 @@ const entryTarget = {
   },
 };
 
-function collectTarget(connect, monitor) {
+function collectTarget(connectMonitor, monitor) {
   return {
     // Call this function inside render()
     // to let React DnD handle the drag events:
-    connectDropTarget: connect.dropTarget(),
+    connectDropTarget: connectMonitor.dropTarget(),
     // You can ask the monitor about the current drag state:
     isOver: monitor.isOver({ shallow: true }),
     canDrop: monitor.canDrop(),

src/app/pages/Sandbox/Editor/Workspace/Preferences/Preference.js

@@ -16,6 +16,8 @@ type Props = {
   title: string,
   enabled: boolean,
   onClick: (on: boolean) => void,
+  tooltip: ?string,
+  offset: ?number,
 };
 
 export default class Preference extends React.Component {