Massive refactor

Author: Ives van Hoorne

.eslintignore

@@ -0,0 +1 @@
+**/cra-files/*.*

First_Concept.sketch

@@ -44,7 +44,7 @@
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.24.1",
     "http-proxy-middleware": "^0.17.3",
-    "jest": "^19.0.2",
+    "jest": "21",
     "json-loader": "0.5.4",
     "object-assign": "^4.1.1",
     "opn": "4.0.2",
@@ -123,7 +123,7 @@
     "build": "NODE_ENV=production node scripts/build.js && gulp",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
-    "lint:app": "eslint src/app",
+    "lint:app": "eslint src/app && flow-bin",
     "lint:embed": "eslint src/embed"
   },
   "jest": {

package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 
 import theme from 'common/theme';
 
@@ -24,41 +24,40 @@ const backward = keyframes`
   100%{background-position:0% 50%}
 `;
 
-const styles = props =>
-  `
+const styles = css`
   transition: 0.3s ease all;
   animation-name: ${backward};
   animation-duration: 300ms;
   animation-timing-function: ease;
 
   border: none;
   outline: none;
-  ${getBackgroundColor(props)};
+  ${props => getBackgroundColor(props)};
   background-size: 720%;
 
   border-radius: 4px;
 
   font-size: 1.125rem;
   text-align: center;
-  color: ${getColor(props)};
+  color: ${props => getColor(props)};
   font-weight: 300;
-  ${!props.disabled && `box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);`};
-  width: ${props.block ? '100%' : 'inherit'};
+  ${props => !props.disabled && `box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);`};
+  width: ${props => (props.block ? '100%' : 'inherit')};
 
-  ${(() => {
+  ${props => () => {
     if (props.small) {
       return `
         padding: 0.5rem 0.75rem;
         font-size: 0.875rem;
       `;
     }
     return 'padding: 0.65rem 2.25rem;';
-  })()}
+  }}
 
   user-select: none;
   text-decoration: none;
 
-  ${!props.disabled && `
+  ${props => !props.disabled && `
   cursor: pointer;
   &:hover {
     animation-name: ${forward};

src/app/components/buttons/Button.js

@@ -12,14 +12,18 @@ describe('Button', () => {
     testRender(<Button onClick={() => {}}>Test</Button>);
   });
 
-  it('renders hrefs', () => {
+  it('renders to', () => {
     testRender(
       <MemoryRouter>
         <Button to="https://ivesvh.com">Test</Button>
       </MemoryRouter>,
     );
   });
 
+  it('renders href', () => {
+    testRender(<Button href="https://ivesvh.com">Test</Button>);
+  });
+
   it('renders properties', () => {
     testRender(<Button small>Test</Button>);
   });

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

@@ -10,18 +10,17 @@ exports[`Button renders 1`] = `
 
 exports[`Button renders disabled 1`] = `
 <button
-  className="iMdJJE"
+  className="kzKEne"
   disabled={true}
 >
   Test
 </button>
 `;
 
-exports[`Button renders hrefs 1`] = `
+exports[`Button renders href 1`] = `
 <a
   className="gdCKHU"
   href="https://ivesvh.com"
-  onClick={[Function]}
 >
   Test
 </a>
@@ -43,3 +42,13 @@ exports[`Button renders properties 1`] = `
   Test
 </button>
 `;
+
+exports[`Button renders to 1`] = `
+<a
+  className="gdCKHU"
+  href="https://ivesvh.com"
+  onClick={[Function]}
+>
+  Test
+</a>
+`;

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

@@ -129,6 +129,8 @@ class EditorPreview extends React.PureComponent {
     } = this.props;
 
     const mainModule = modules.find(isMainModule);
+    if (!mainModule) throw new Error('Cannot find main module');
+
     const { currentModule: currentModuleId } = sandbox;
     const currentModule =
       modules.find(m => m.id === currentModuleId) || mainModule;
@@ -166,7 +168,7 @@ class EditorPreview extends React.PureComponent {
           addError={sandboxActions.addError}
           errors={sandbox.errors}
           clearErrors={sandboxActions.clearErrors}
-          isInProjectView={sandbox.isInProjectView}
+          isInProjectView={sandbox.isInProjectView || true}
           externalResources={sandbox.externalResources}
           setProjectView={sandboxActions.setProjectView}
           preferences={preferences}

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

@@ -31,7 +31,7 @@ const ViewCountContainer = styled.div`
 
 type Props = {
   id: string,
-  title: string,
+  title: ?string,
   description: string,
   viewCount: number,
   likeCount: number,

src/app/pages/Sandbox/Editor/Workspace/Project/index.js

@@ -34,7 +34,7 @@ type Props = {
   sandbox: Sandbox,
   sandboxActions: typeof sandboxActionCreators,
   preventTransition: boolean,
-  users: { [key: id]: User },
+  user: User,
 };
 
 const mapDispatchToProps = dispatch => ({
@@ -43,11 +43,15 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = createSelector(
   modulesFromSandboxNotSavedSelector,
   usersSelector,
-  (preventTransition, users) => ({ preventTransition, users }),
+  (_, props) => props.sandbox && props.sandbox.author,
+  (preventTransition, users, author) => ({
+    preventTransition,
+    user: users[author],
+  }),
 );
 const Workspace = ({
   sandbox,
-  users,
+  user,
   preventTransition,
   sandboxActions,
 }: Props) => (
@@ -65,7 +69,7 @@ const Workspace = ({
         forkedSandbox={sandbox.forkedFromSandbox}
         preventTransition={preventTransition}
         owned={sandbox.owned}
-        author={users[sandbox.author]}
+        author={user}
         deleteSandbox={sandboxActions.deleteSandbox}
       />
     </WorkspaceItem>

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

@@ -10,7 +10,6 @@ import type { Sandbox } from 'common/types';
 
 import { sandboxesSelector } from 'app/store/entities/sandboxes/selectors';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
-import { jwtSelector } from 'app/store/user/selectors';
 
 import Title from 'app/components/text/Title';
 import Centered from 'app/components/flex/Centered';
@@ -21,7 +20,6 @@ type Props = {
   sandbox: ?Sandbox,
   sandboxes: { [id: string]: Sandbox },
   sandboxActions: typeof sandboxActionCreators,
-  hasLogin: boolean,
   match: { params: { id: ?string } },
 };
 type State = {
@@ -37,11 +35,10 @@ const Container = styled.div`
 const mapStateToProps = createSelector(
   sandboxesSelector,
   (_, props) => props.match.params.id,
-  jwtSelector,
-  (sandboxes, id, jwt) => {
+  (sandboxes, id) => {
     const sandbox = sandboxes[id];
 
-    return { sandbox, sandboxes, hasLogin: !!jwt };
+    return { sandbox, sandboxes };
   },
 );
 const mapDispatchToProps = dispatch => ({