Using A Single Source of Truth(Data)

[Amoodaa]

• using React's Higher Order Components

import React, { Component } from 'react';
import DataSource from '../../services/dataSource';

const WithSubscription = (WrappedComponent, selectData) => {
  return class extends Component {
    state = {
      data: selectData(DataSource, this.props),
    };

    componentDidMount() {
      // ... that takes care of the subscription...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange = () =>
      this.setState({ data: selectData(DataSource, this.props) });

    render() {
      const { data, props } = this.state;
      return <WrappedComponent data={data} {...props} />;
    }
  };
};

export default WithSubscription;

• using some kind of a handmade Data Store, with a subscription system

import api from './api';

const DataSource = {
  data: {
    loggedUser: {},
    users: [],
    channels: [],
  },
  subscribers: [],
  addChangeListener: handleChange => {
    if (DataSource.subscribers.indexOf(handleChange) === -1)
      DataSource.subscribers.push(handleChange);
  },
  removeChangeListener: handleChange => {
    DataSource.subscribers = DataSource.subscribers.filter(
      e => e !== handleChange
    );
  },
  onChange: () => DataSource.subscribers.forEach(fun => fun()),
};

export default DataSource;

[Amoodaa]

@11janci give us ur feedback :D
TMW IS GONNA BE EXCITING
implementing the socket and this thing in 1 day, i wonder if we can do it