client-demo-statebus.html

<script type=coffee>
state.feed = []
state.replying_to = {}
state.editing = {}

icon_size = 34
post_width = 550
actual_post_width = post_width + 13 * 2

dom.BODY = ->
  DIV {},
    H1 'Braidmail'
    'You can also view the raw ', A(href: "/feed", '/feed'), '. '
    'Spec is ', A(href: 'https://braid.org/apps/braidmail/spec2', 'here'), '. '
    'Library to sync with a feed is ', A(href: '/feed-client.js', 'here'), '. '
    'Github ', A(href: 'https://github.com/braid-org/braidmail', 'here'), '. '
    DIV height: 20
    NEW_POST()
    FEED()
  
FEED = ->
  threads = make_threads()
  window.threads = threads
  DRAW_THREADS(threads)

DRAW_THREADS = (threads) ->
  DIV {},
    for post in threads
      [
        POST post
        if post.children.length > 0
          DIV marginLeft: icon_size, DRAW_THREADS(post.children)
        DIV marginBottom: icon_size / 2
      ]

  #  - Final "virtual" post creates reply box


dom.NEW_POST = ->
  DIV {},
    # TEXTAREA id: 'subject', placeholder: 'subject'
    IMG
      src: state.users?['mike@braid.org'].pic
      width: icon_size
      height: icon_size
      position: 'absolute'
    AUTOSIZEBOX
      id: 'body'
      placeholder: 'say stuff here'
      width: actual_post_width
      marginLeft: icon_size
      padding: '7px 13px'
      borderColor: '#aaa'
      # backgroundColor: '#eee'
      value: state.new_post
      onChange: (e) -> state.new_post = e.target.value
      onKeyDown: (e) -> if (state.new_post \
                            and e.keyCode == 13 and (e.ctrlKey or e.metaKey))
                           e.preventDefault()
                           e.stopPropagation()
                           make_new_post()
    DIV
      width: actual_post_width + icon_size
      height: 40
      INPUT
        float: 'right'
        type: 'button'
        value: 'Post'
        onClick: -> make_new_post()
        disabled: (state.new_post or '').length == 0

POST = (post) ->
  body = post.body.split('\n')

  DIV
    marginBottom: 2
    IMG
      src: state.users['mike@braid.org'].pic
      width: icon_size
      height: icon_size
      position: 'absolute'

    # Edit the post body
    if state.editing[post.url]
      AUTOSIZEBOX
        id: 'editing-' + post.url
        width: actual_post_width  - 1
        marginLeft: icon_size
        padding: '7px 12px'
        backgroundColor: '#eee'
        position: 'relative'
        placeholder: 'type stuff here'
        value: state.editing[post.url].body
        onChange: (e) ->
          state.editing[post.url].body = e.target.value
          edit_post(post, e.target.value)
        onBlur: (e) -> delete state.editing[post.url]

    # Display Post body
    else
      DIV
        width: post_width
        marginLeft: icon_size
        minHeight: 18
        padding: '8px 13px'
        backgroundColor: '#eee'
        position: 'relative'
        onDoubleClick: (e) ->
          state.editing[post.url] = {body: post.body}
          setTimeout((() -> document.getElementById('editing-'+post.url).focus()), 70)

        # Subject
        if post.subject then B(paddingRight: 13, post.subject)

        # Body
        # body[0]
        for p in body
          DIV p or ' '

        # Little url link
        CODE
          position: 'absolute'
          right: 2
          top: 2
          fontSize: 5
          A(href: post.url, color: '#aaa', textDecoration: 'none', post.url)

        # Reply icon
        IMG
          src: '/reply-icon.png'
          width: icon_size / 2
          position: 'absolute'
          right: 2
          bottom: 2
          opacity: .3
          cursor: 'pointer'
          onClick: ->
            state.replying_to[post.url] = {}
            setTimeout((() -> document.getElementById('replying-'+post.url).focus()), 70)

    if state.replying_to[post.url]
      DIV
        width: actual_post_width + icon_size
        AUTOSIZEBOX
          id: 'replying-'+post.url
          width: actual_post_width
          marginLeft: icon_size
          padding: '8px 13px'
          backgroundColor: '#eee'
          position: 'relative'
          placeholder: 'type a reply'
          value: state.replying_to[post.url].message or ''
          onChange: (e) ->
            state.replying_to[post.url].message = e.target.value
          onKeyDown: (e) ->
            if (state.replying_to[post.url].message \
                and e.keyCode == 13 and (e.ctrlKey or e.metaKey))
              e.preventDefault()
              e.stopPropagation()
              send_reply(post)
        DIV height: 30, INPUT
          float: 'right'
          type: 'button'
          value: 'Post'
          onClick: -> send_reply(post)
          disabled: (state.replying_to[post.url].message or '').length == 0

make_threads = () ->
  # Create Threads:
  #
  #  - Make hash of threads
  threads = {}
  posts = {}

  if not state.feed or state.feed.length == 0
    return []

  #  - Populate with all posts, first
  #    - with empty children hash
  #    - and thread-bump-date
  for post in state.feed
    post = Object.assign({}, post)    # Clone post so we can muck with it
    posts[post.url] = post
    posts[post.url].children = {}
    posts[post.url].bump_date = post.date or 631209355000

    # Initialize threads with all posts as thread roots, then we'll remove
    # them as we discover parentage
    threads[post.url] = post

  # console.log('Initialized threads are', threads)
  
  #  - Then for each, look up its reply-to
  #    - If exists, delete and move it to that post's children
  #      - Update thread_bump_time up to root
  bump_thread = (post) ->
    bump_date = post.date
    while true
      post.bump_date = bump_date
      if not (post['in-reply-to'] and posts[post['in-reply-to']])
        return
      post = posts[post['in-reply-to']]

  for url, post of threads
    parent = post['in-reply-to']
    if parent and posts[parent]
      # console.log('adding post', post, 'to parent', parent)
      delete threads[post.url]
      posts[parent].children[post.url] = post
      bump_thread(post)

  # console.log('Populated & bumped threads are', threads)

  # Traverse Threads:
  #
  #  - Grab all posts, and sort by thread-bump-date
  #  - Iterate, and recurse
  listify = (threads) ->
    listed = Object.values(threads)
    listed.sort((a, b) -> b.bump_date - a.bump_date)
    for thread in listed
      thread.children = listify(thread.children)
    return listed

  # Return the listed threads
  result = listify(threads)

  # console.log('Listed threads are', result)
  return result

## An auto-resizing <textarea>
dom.AUTOSIZEBOX = ->
  props = bus.clone(@props)
  props.ref = 'textbox'
  props.rows = 1
  delete props['data-widget']
  delete props['data-key']
  TEXTAREA(props)

dom.AUTOSIZEBOX.up = ->
  target = @refs.textbox.getDOMNode()
  resizebox(target)

dom.AUTOSIZEBOX.refresh = ->
  target = @refs.textbox.getDOMNode()
  resizebox(target)

resizebox = (target) ->
  while (target.rows > 1 && target.scrollHeight < target.offsetHeight)
    target.rows--
  while (target.scrollHeight > target.offsetHeight && target.rows < 10000)
    target.rows++

</script>

<!-- Include Statebus & Libs -->
<script src="/js/statebus/extras/coffee.js"></script>
<script src="/js/statebus/extras/react12.min.js"></script>
<script src="/js/statebus/statebus.js"></script>
<script src="/js/statebus/client-library.js"></script>

<script type=module>
// Configure Statebus

window.state = bus.state
bus.libs.react12.coffreact()
//bus.libs.http_out('/*', '/')


// Load feed from the network
import * as client from '/feed-client.js'

client.subscribe_to_feed('/feed', feed => state.feed = feed)

// Make new post
window.make_new_post = () => {
  client.make_new_post('', {
    to: ['public'],
    from: ['mike@braid.org'],
    subject: document.getElementById('subject')?.value,
    body: document.getElementById('body').value,
    date: new Date().getTime()
  })

  // Now clear the form
  // document.getElementById('subject').value = ''
  document.getElementById('body').value = ''
}

window.edit_post = (post, new_body) => {
  client.put_post({
    url: post.url,
    to: post.to,
    from: post.from,
    subject: post.subject,
    body: new_body,
    date: post.date,
    'in-reply-to': post['in-reply-to']
  })
}

window.send_reply = (post) => {
  client.make_new_post('', {
    to: ['public'],
    from: ['mike@braid.org'],
    'in-reply-to': post.url,
    body: state.replying_to[post.url].message,
    date: new Date().getTime()
  })

  delete state.replying_to[post.url]
}


import * as braid from 'https://esm.sh/braid-http@~1.3.40'
braid.fetch.enable_multiplex = window.location.hash === '#nomux' ? false : {via: 'POST'}

// Load the users
function subscribe_to_users (url) {
  var retry = () => setTimeout(() => subscribe_to_users(url), 3000)
  try {
    braid.fetch(url, {subscribe: true, retry: true}).then(
      res => res.subscribe(update => state.users = JSON.parse(update.body_text), retry)
    )
  }
  catch (e) { console.error('bad thing', e); retry() }
}

subscribe_to_users('/users')

</script>
<style>
body, p, input, textarea {
  font-family: avenext, avenir, avenir next, sans;
  font-size: 13px;
}
body { padding: 34px; margin: 0; }
</style>