Removing mdbootstrap

app/assets/stylesheets/application.scss

@@ -15,15 +15,20 @@
  *= require font-awesome
  */
 
+ $primary: #01579b;
+
+$border-radius:               0;
+$border-radius-lg:            0;
+$border-radius-sm:            0;
+
 @import "bootstrap/scss/bootstrap";
-@import "mdbootstrap/css/mdb";
 
 body.application {
   padding-top: 3.6rem;
 }
 
 body.no-nav {
-  background-color: #01579b;
+  background-color: $primary;
 }
 
 .nav-border-left {

app/javascript/components/OrganizationInvitation/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import axios from 'axios';
-import { number } from 'prop-types'
+import { number } from 'prop-types';
 import {
   Button,
   Modal,
@@ -10,28 +10,26 @@ import {
 } from 'reactstrap';
 
 export default class OrganizationInvitation extends React.Component {
-  state = {
-    modalOpen: false,
-    email: null,
-    sending: false
-  }
-
   static propTypes = {
     organizationId: number.isRequired
   }
 
-  static defaultProps = {
-    organizationId: null
+  static defaultProps = { }
+
+  state = {
+    modalOpen: false,
+    email: null,
+    sending: false
   }
 
   toggleModal = () => {
     this.setState(state => ({ modalOpen: !state.modalOpen }));
   }
 
-  sendInvitation = () => {
+  sendInvitation = (event) => {
     event.preventDefault();
 
-    this.setState({ sending: true, })
+    this.setState({ sending: true });
 
     axios.post(`api/v1/organizations/${this.props.organizationId}/invite`, {
       email: this.state.email
@@ -46,9 +44,9 @@ export default class OrganizationInvitation extends React.Component {
   handleInputChanged = (event) => {
     event.preventDefault();
 
-    const target = event.target;
+    const { target } = event;
     const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
+    const { name } = target;
 
     this.setState({
       [name]: value
@@ -65,24 +63,24 @@ export default class OrganizationInvitation extends React.Component {
     return (
       <div>
         <button className="btn btn-sm btn-primary" onClick={this.toggleModal}>
-          <i className="fa fa-address-book-o mr-1"></i>
+          <i className="fa fa-address-book-o mr-1" />
           Invite User
-                </button>
+        </button>
         <Modal isOpen={modalOpen} toggle={this.toggleModal}>
           <ModalHeader toggle={this.toggleModal}>Invite User to Organization</ModalHeader>
           <ModalBody>
-            <div className="md-form">
-              <input type="email" name="email" value={email || ''} onChange={this.handleInputChanged} className="form-control" />
+            <div className="form-group">
               <label htmlFor="email">Email to invite</label>
+              <input type="email" name="email" value={email || ''} onChange={this.handleInputChanged} className="form-control" />
             </div>
           </ModalBody>
           <ModalFooter>
             <Button color="primary" onClick={this.sendInvitation} disabled={sending}>
-              {sending ? <span>Sending... <i className="fa fa-spin fa-spinner"></i></span> : 'Send Invitation'}
+              {sending ? <span>Sending... <i className="fa fa-spin fa-spinner" /></span> : 'Send Invitation'}
             </Button>
           </ModalFooter>
         </Modal>
       </div>
-    )
+    );
   }
-}
+}

app/javascript/components/OrganizationsView.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import axios from 'axios';
 import graph from 'graphql.js';
+import $ from 'jquery';
 import {
   Row,
-  Col,
-  Button
+  Col
 } from 'reactstrap';
 import {
   Route,
@@ -17,11 +16,6 @@ import ManageOrganizationView from './ManageOrganizationView';
 import CreateOrganizationView from './CreateOrganizationView';
 
 export default class OrganizationsView extends React.Component {
-  state = {
-    user: {},
-    saving: false
-  }
-
   constructor(props) {
     super(props);
 
@@ -32,10 +26,20 @@ export default class OrganizationsView extends React.Component {
     });
   }
 
-  fetchProfile() {
-    let fetchPromise;
+  state = {
+    user: {}
+  }
 
-    fetchPromise = this.graph(`
+  componentDidMount() {
+    this.fetchProfile();
+  }
+
+  componentWillReceiveProps() {
+    this.fetchProfile();
+  }
+
+  fetchProfile() {
+    this.graph(`
       {
         user {
           memberships {
@@ -56,14 +60,6 @@ export default class OrganizationsView extends React.Component {
       });
   }
 
-  componentDidMount() {
-    this.fetchProfile();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.fetchProfile();
-  }
-
   render() {
     const {
       user
@@ -78,16 +74,19 @@ export default class OrganizationsView extends React.Component {
         <Route
           exact
           path={match.url}
-          render={props =>
-            (<Row>
+          render={() => (
+            <Row>
               <Col sm="12">
-                <Link className="btn btn-sm btn-primary" to={`${match.url}/create`}>
-                  <i className="fa fa-plus mr-1" />
-                  Create New Organization
-                </Link>
+                <div className="mb-4">
+                  <Link className="btn btn-sm btn-primary" to={`${match.url}/create`}>
+                    <i className="fa fa-plus mr-1" />
+                    Create New Organization
+                  </Link>
+                </div>
                 <UserMemberships user={user} />
               </Col>
-             </Row>)
+            </Row>
+            )
           }
         />
 

app/javascript/components/ProfileForm/index.jsx

@@ -4,30 +4,25 @@ import {
   Col,
   Button
 } from 'reactstrap';
-import { func, object, bool } from 'prop-types'
+import { func, object, bool } from 'prop-types';
 import update from 'immutability-helper';
 
-
 export default class ProfileForm extends React.Component {
-
-  state = {
-    model: {}
-  }
-
   static propTypes = {
     model: object.isRequired,
     onSave: func,
     saving: bool
   }
 
   static defaultProps = {
-    model: {
-      id: 0
-    },
     onSave: () => { },
     saving: false
   }
 
+  state = {
+    model: {}
+  }
+
   componentDidMount() {
     this.setState({ model: this.props.model });
   }
@@ -36,32 +31,27 @@ export default class ProfileForm extends React.Component {
     this.setState({ model: nextProps.model });
   }
 
-  labelClass(input) {
-    return (input != null && input !== '') ? 'active' : '';
-  }
-
   handleInputChanged = (event) => {
     event.preventDefault();
 
-    const target = event.target;
+    const { target } = event;
     const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
+    const { name } = target;
 
-    this.setState((previousState) => update(previousState, {
+    this.setState(previousState => update(previousState, {
       model:
         {
           [name]: { $set: value }
         }
     }));
   }
 
-  handleSave = (event) => {
+  handleSave = () => {
     this.props.onSave(this.state.model);
   }
 
   render() {
     const {
-      onSave,
       saving
     } = this.props;
 
@@ -74,51 +64,51 @@ export default class ProfileForm extends React.Component {
         <Row>
           <Col>
             <div className="md-form">
+              <label htmlFor="email">Email</label>
               <div style={{ padding: '0.5em 0', fontWeight: 'bold' }}>{model.email}</div>
-              <label className={this.labelClass(model.email)} htmlFor="email">Email</label>
             </div>
           </Col>
         </Row>
         <Row>
           <Col xs="12" md="6">
-            <div className="md-form">
-              <input 
-                className="form-control" 
-                name="first_name" 
+            <div className="form-group">
+              <label htmlFor="first_name">
+                First Name
+              </label>
+              <input
+                className="form-control"
+                name="first_name"
                 type="text"
-                value={model.first_name || ""}
+                value={model.first_name || ''}
                 onChange={this.handleInputChanged}
               />
-              <label 
-                htmlFor="first_name"
-                className={this.labelClass(model.first_name)}
-              >
-                First Name
-              </label>
-
             </div>
           </Col>
           <Col xs="12" md="6">
-            <div className="md-form">
-              <input className="form-control" name="last_name" type="text"
-                value={model.last_name || ""}
-                onChange={this.handleInputChanged} />
-              <label htmlFor="last_name" className={this.labelClass(model.last_name)}>Last Name</label>
+            <div className="form-group">
+              <label htmlFor="last_name">Last Name</label>
+              <input
+                className="form-control"
+                name="last_name"
+                type="text"
+                value={model.last_name || ''}
+                onChange={this.handleInputChanged}
+              />
             </div>
           </Col>
         </Row>
         <Row>
           <Col>
             <Button color="primary" disabled={saving} onClick={this.handleSave}>
-              {saving ? <span><i className="fa fa-spin fa-spinner mr-1"></i> Saving...</span> : 'Save'}
+              {saving ? <span><i className="fa fa-spin fa-spinner mr-1" /> Saving...</span> : 'Save'}
             </Button>
             <br />
-            <a  href="/users/edit">
+            <a href="/users/edit">
               Change email, password, or cancel account
             </a>
           </Col>
         </Row>
       </div>
     );
   }
-}
+}

app/javascript/packs/application.js

@@ -8,6 +8,7 @@
 // layout file, like app/views/layouts/application.html.erb
 
 // Support component names relative to this directory:
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(componentRequireContext)
+const componentRequireContext = require.context('components', true);
+const ReactRailsUJS = require('react_ujs');
+
+ReactRailsUJS.useContext(componentRequireContext);

app/views/devise/confirmations/new.html.erb

@@ -6,15 +6,14 @@
       <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
       <%= devise_error_messages! %>
 
-        <div class="md-form">
+        <div class="form-group">
+         <%= f.label :email %>
           <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
-          <%= f.label :email %>
         </div>
 
         <div>
           <%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
-            <%= link_to "Back to Login", new_user_session_path, class: "btn btn-outline-primary" %>
-
+          <%= link_to "Back to Login", new_user_session_path, class: "btn btn-outline-primary" %>
         </div>
       <% end %>
     </div>