Pain points

• Cofee
• Backbone
• jQuery Endpoints
• Webpack configuration (support of coffee etc)
• No spec

Patient client

APP

Modules

Hybrid Bridge

BUS

Mobile

Activation

Conversation

Signup

• Remove unused modules 
• Move modules to React controller-view
• Make services aware of Store
• Create React-Router

Controller View

• Self-aware
• Connects to stores
• Sends actions
• Doesn't need extra data from props
• "Stateless"

Propositions

const SomeSampleScreenView = ({elements}) => {
  return (
    <ul>
      {elements.map((element) =>
        <li key={element.id}>{element.name}</li>
      }
    </ul>
  );
}

const someSampleScreen = React.createClass({
  compoenentDidMount() {
    ASDStore.addChangeListener(this.setStateFromStore);
  },
  
  setStateFromStore(){ 
    this.setState({ elements: ASDStore.getElements() });
  },

  const {elements} = this.state;
  render() {
    return <SomeSampleScreenView elements={elements} />
  }
});

Element

Propositions

• no function inside render function 
• shouldn't connect to store/actions directly
• Pure Stateless if possible 

render() {
  const elements, name = {this.props};
  const renderPartA() {
    return <h1>{name}</h1>;
  }

  return(<div>{renderPartA()}</div>); 
}

// =================
const renderPartA(name) {    
  return <h1>{name}</h1>;
}

render() {
  const elements, name = {this.props};

  return(<div>{renderPartA(name)}</div>); 
}

Store / Action

export const ACTION_TYPES = {
  patientReceived: 'PATIENT_RECEIVED',
  patientSearchResultsReceived: 'PATIENT_SEARCH_RESULTS_RECEIVED',
  patientIssuesReceived: 'PATIENT_ISSUES_RECEIVED',
};

export function loadPatientDataAction(patientId, patientData) {
  return {
    actionType: ACTION_TYPES.patientReceived,
    patientId,
    patientData,
  };
}

=====

import { ACTION_TYPES } from 'stores/abcStore';

Services

Types

• Libs (HTTP Service)
• State listeners
• Separate Serivces

TODO

• Separation
• Naming
• Initialization

Router

Router

Propositions

• Multiple Routes
• Singleton Router (state in store)
• Allow mutation/ disallow mutation
  • Push state / setState
• Auth

Roadmap

Patient client to react

Tests​

Unify services​
Unify endpoints​

Reimplement auth

Sockets