Everything compiling again

mobile/.expo/packager-info.json

@@ -1,5 +1,5 @@
 {
   "expoServerPort": 19000,
   "packagerPort": 19001,
-  "packagerPid": 44581
+  "packagerPid": 76299
 }

website/config/webpack.config.dev.js

@@ -1,4 +1,4 @@
-feslint'use strict';
+'use strict';
 
 const autoprefixer = require('autoprefixer');
 const path = require('path');

website/src/Dialog/ProgressDialog.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Dimmer, Button, Progress } from '../ui'
-
-export class ProgressDialog extends React.Component {
-  static propTypes = {
-    open: PropTypes.bool.isRequired,
-    message: PropTypes.string.isRequired,
-    percent: PropTypes.number.isRequired,
-    onCancel: PropTypes.func
-  }
-
-  render() {
-    return (
-      <Dimmer inverted page active={this.props.open}>
-        <div className='progress-dialog'>
-          <Progress id='progress' percent={this.props.percent}
-            size='large' progress indicating autoSuccess>{this.props.message}
-          </Progress>
-          <Button name='cancel' primary onClick={this.props.onCancel}>Cancel</Button>
-        </div>
-      </Dimmer>
-    )
-  }
-}

website/src/Dialog/WaitDialog.js

@@ -1,70 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Dimmer, Loader } from '../ui'
+import { Dimmer, Loader, Text } from '../ui'
 
 export class WaitDialog extends React.Component {
   static propTypes = {
-    active: PropTypes.bool.isRequired,
     message: PropTypes.string.isRequired
   }
 
   render() {
     return (
-      <div style={style.dimmer}>
+      <Dimmer>
-        <Loader inverted size='massive'>{this.props.message}...</Loader>
+        <Loader />
-      </div>
+        {this.props.message && <Text size='Huge'>{this.props.message}...</Text>}
+      </Dimmer>
     )
   }
 }
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { keyframes, css } from 'emotion';
-import { onlyUpdateForKeys } from 'recompose';
-
-// This returns an animation
-const pulse = keyframes`
-  0% {transform: scale(1);opacity: 1}
-  45% {transform: scale(0.1);opacity: 0.7}
-  80% {transform: scale(1);opacity: 1}
-`;
-
-class Loader extends React.Component {
-  style = i => css`{
-        background-color: ${this.props.color};
-        width: ${this.props.size}px;
-        height: ${this.props.size}px;
-        margin: ${this.props.margin};
-        border-radius: 100%;
-        display: inline-block;
-        animation: ${pulse} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08);
-        animation-fill-mode: both;
-    }`;
-
-  render() {
-    return this.props.loading ?
-      <div>
-        <div className={this.style(1)} />
-        <div className={this.style(2)} />
-        <div className={this.style(3)} />
-      </div> : null;
-  }
-}
-
-Loader.propTypes = {
-  loading: PropTypes.bool,
-  color: PropTypes.string,
-  size: PropTypes.number,
-  margin: PropTypes.string
-};
-
-Loader.defaultProps = {
-  loading: true,
-  color: '#000000',
-  size: 15,
-  margin: '2px'
-};
-
-const Component = onlyUpdateForKeys(['loading', 'color', 'size', 'margin'])(Loader);
-Component.defaultProps = Loader.defaultProps;
-export default Component;

website/src/Dialog/index.js

@@ -1,5 +1,4 @@
 export { WaitDialog } from './WaitDialog'
-export { ProgressDialog } from './ProgressDialog'
 export { YesNoMessageDialog } from './YesNoMessageDialog'
 export { MessageDialog } from './MessageDialog'
 export { ChangePasswordDialog } from './ChangePasswordDialog'

website/src/Profile/Profile.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ProfileForm } from './ProfileForm'
 import { Constants, api } from '../helpers'
-import { WaitDialog, MessageDialog, ChangePasswordDialog, ProgressDialog, ChangeEmailDialog } from '../Dialog'
+import { WaitDialog, MessageDialog, ChangePasswordDialog, ChangeEmailDialog } from '../Dialog'
 import { autoBind } from 'auto-bind2'
 
 export class Profile extends React.Component {
@@ -165,11 +165,6 @@ export class Profile extends React.Component {
         <WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
 
         <ChangePasswordDialog open={!!this.state.changePasswordDialog} onDismiss={this.handleChangePasswordDismiss} />
-
-        <ProgressDialog open={!!this.state.progressDialog}
-          message={this.state.progressDialog ? this.state.progressDialog.message : ''}
-          percent={this.state.uploadPercent}
-          onCancel={this.handleUploadCancel} />
       </div>
     )
   }

website/src/ui/Dimmer.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import style from './Dimmer.style'
+import { reactAutoBind } from 'auto-bind2'
+
+export class Dimmer extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
+  preventPropagation(e) {
+    e.stopPropagation()
+  }
+
+  render() {
+    return (
+      <div style={style.dimmer} onClick={this.preventPropagation}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export default Radium(Dimmer)

website/src/ui/Dimmer.style.js

@@ -0,0 +1,17 @@
+export default {
+  dimmer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    width: '100vw',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 100,
+    background: 'rgba(25, 25, 30, 0.75)'
+  }
+}

website/src/ui/Loader.js

@@ -1,51 +1,43 @@
-import React from 'react';
+import React from 'react'
-import PropTypes from 'prop-types';
+import Radium from 'radium'
-import { keyframes, css } from 'emotion';
+import PropTypes from 'prop-types'
-import { onlyUpdateForKeys } from 'recompose';
-
-// This returns an animation
-const pulse = keyframes`
-  0% {transform: scale(1);opacity: 1}
-  45% {transform: scale(0.1);opacity: 0.7}
-  80% {transform: scale(1);opacity: 1}
-`;
 
 class Loader extends React.Component {
-  style = i => css`{
+  static propTypes = {
-        background-color: ${this.props.color};
+    color: PropTypes.string,
-        width: ${this.props.size}px;
+    size: PropTypes.number,
-        height: ${this.props.size}px;
+    margin: PropTypes.string
-        margin: ${this.props.margin};
+  }
-        border-radius: 100%;
+
-        display: inline-block;
+  static defaultProps = {
-        animation: ${pulse} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08);
+    color: '#000000',
-        animation-fill-mode: both;
+    size: 15,
-    }`;
+    margin: '2px'
+  }
+
+  style(i) {
+    return {
+      backgroundColor: `${this.props.color}`,
+      width: `${this.props.size}px`,
+      height: `${this.props.size}px`,
+      margin: `${this.props.margin}`,
+      borderRadius: '100%',
+      display: 'inline-block',
+      // 0% {transform: scale(1); opacity: 1} 45% {transform: scale(0.1); opacity: 0.7} 80% {transform: scale(1); opacity: 1} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08)
+      animation: ``,
+      animationFillMode: 'both'
+    }
+  }
 
   render() {
-    return this.props.loading ?
+    return (
       <div>
         <div className={this.style(1)} />
         <div className={this.style(2)} />
         <div className={this.style(3)} />
-      </div> : null;
+      </div>
+    )
   }
 }
 
-Loader.propTypes = {
+export default Radium(Loader)
-  loading: PropTypes.bool,
-  color: PropTypes.string,
-  size: PropTypes.number,
-  margin: PropTypes.string
-};
-
-Loader.defaultProps = {
-  loading: true,
-  color: '#000000',
-  size: 15,
-  margin: '2px'
-};
-
-const Component = onlyUpdateForKeys(['loading', 'color', 'size', 'margin'])(Loader);
-Component.defaultProps = Loader.defaultProps;
-export default Component;

website/src/ui/Modal.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import style from './Modal.style'
 import { reactAutoBind } from 'auto-bind2'
+import Radium from 'radium'
 
-export class Modal extends Component {
+class Modal extends Component {
   static propTypes = {
     children: PropTypes.node
   }
@@ -27,3 +28,5 @@ export class Modal extends Component {
     )
   }
 }
+
+export default Radium(Modal)

website/src/ui/Modal.style.js

@@ -1,20 +1,4 @@
 export default {
-  dimmer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100vh',
-    width: '100vw',
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 100,
-    background: 'rgba(25, 25, 30, 0.75)'
-  },
-
   modal: {
     zIndex: 101,
     background: '#FFFFFF',