diffsync-state-component-example.js

'use strict';

/*

BAT SHIT FUCKING CRAZY IDEA DROP ZONE:

1. don't have a central server. have any peer be a server.
   will jsondiffpatch's "server" stuff work in a browser though?

*/

import 'babel/polyfill';

import _ from 'lodash';
import React, {
  Component
} from 'react';
import {Client} from 'diffsync';
import {Block, Flex, InlineBlock, rgb, rgba} from 'jsxstyle';
import moment from 'moment';
import socket from 'socket.io-client';
import uuid from 'uuid';

const styles = {
  fontFamily: 'Avenir Next',
  fontSize: 16,
  lineHeight: 20,
  unit: 10
};

const user = location.hash.slice(1) || 'anon';

class Main extends Component {
  componentDidMount() {
    React.findDOMNode(this.chatInput).focus();
  }

  componentDidUpdate() {
    const messageListNode = React.findDOMNode(this.messageList);
    console.log('scrolling to', messageListNode.scrollHeight);
    messageListNode.scrollTop = messageListNode.scrollHeight;
  }

  render() {
    const postChatMessage = () => {
      const node = React.findDOMNode(this.chatInput);
      const id = uuid.v4();
      const text = node.value;
      const ts = moment().format();
      node.value = '';

      const msg = {id, text, ts, user};

      this.props.setDiffSyncState(state => state.messages.push(msg));
    };

    return (
      <Flex
        flexDirection='column'
        height='100%'>
        <Block flexGrow={1} overflowY='auto' ref={messageList => this.messageList = messageList}>
          { _(this.props.messages || [])
            .sortBy(message => moment(message.ts))
            .map(message =>
              <Flex
                backgroundColor={message.text.match(user) ? rgba(0, 0, 0, 0.1) : ''}
                flexDirection='row'
                fontFamily={styles.fontFamily}
                fontSize={styles.fontSize}
                key={message.id}
                padding={styles.unit}>
                <InlineBlock color={rgba(0, 0, 0, 0.5)} marginRight={styles.unit}>
                  {moment(message.ts).format('HH:mm:ss')}
                </InlineBlock>
                <InlineBlock fontWeight={600} marginRight={styles.unit}>
                  {message.user}
                </InlineBlock>
                <InlineBlock>
                  {message.text}
                </InlineBlock>
              </Flex>
            )
            .value()
          }
        </Block>
        <Block
          background={rgb(100, 100, 100)}
          height={styles.lineHeight + 2 * styles.unit}
          padding={styles.unit}>
          <input
            onKeyDown={(e) => { if (e.key === 'Enter') { postChatMessage(); } return; } }
            ref={(chatInput) => this.chatInput = chatInput}
            style={{
              background: 'transparent',
              color: 'white',
              border: 0,
              outline: 0,
              width: '100%',
              fontSize: styles.fontSize,
              padding: 0,
              fontFamily: styles.fontFamily
            }}
          />
        </Block>
      </Flex>
    );
  }
}

const WithDiffSync = (ComposedComponent, {client, onError}) => class extends Component {
  diffSyncState = {};

  componentDidMount() {
    client.on('connected', () => {
      this.diffSyncState = client.getData();
      this.forceUpdate();
    });

    client.on('synced', () => {
      this.forceUpdate();
    });

    if (onError) {
      client.on('error', onError);
    }
  }

  setDiffSyncState(fn) {
    fn(this.diffSyncState);

    client.schedule();
  }

  render() {
    return (
      <ComposedComponent
        {...this.diffSyncState}
        {...this.props}
        setDiffSyncState={this.setDiffSyncState.bind(this)}
      />
    );
  }
};

async function main() {
  const client = new Client(socket('http://localhost:4000'), 'party');

  const DiffSyncedMain = WithDiffSync(Main, {client});

  client.initialize();

  React.render(<DiffSyncedMain />, document.getElementById('container'));
}

main();