danawoodman

WebSockets + Reflux + React

Using WebSockets, React and Reflux together can be a beautiful thing, but the intial setup can be a bit of a pain. The below examples attempt to offer one (arguably enjoyable) way to use these tools together.

Overview

This trifect works well if you think of things like so:

1. Reflux Store: The store fetches, updates and persists data. A store can be a list of items or a single item. Most of the times you reach for this.state in react should instead live within stores. Stores can listen to other stores as well as to events being fired.
2. Reflux Actions: Actions are triggered by components when the component wants to change the state of the store. A store listens to actions and can listen to more than one set of actions.

danawoodman

<script lang="ts">
  export let label: string
  export let type: string = "text"
  export let value: string = ""
  export let disabled: boolean = false
  export let validate: (val: string) => boolean
  export let valid: boolean = false

  let id = `field-${Math.floor(Math.random() * 1000)}`

danawoodman

Hello world

This is a test.

• Foo
• Bar
• Baz

Hello

danawoodman

// Lots of examples here:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

const arr = [ 1, 2, 3 ]

// first item in array:
arr[0]

// last item:
arr[2]

danawoodman

Git Workflow

Below outlines the general git workflow I find works well in most situations/teams/projects.

Feature Branches

Make sure master is up to date before starting a feature branch.

danawoodman

SUBSYSTEM=="input", GROUP="input", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="16c0", ATTRS{idProduct}=="05df", MODE:="666", GROUP="plugdev"
KERNEL=="hidraw*", ATTRS{idVendor}=="16c0", ATTRS{idProduct}=="05df", MODE="0666", GROUP="plugdev"

danawoodman

/**
 * Control a USB relay board using USB.
 *
 * This code helped a lot in the understanding of what they boards
 * expect for hex inputs:
 * https://github.com/jaketeater/Very-Simple-USB-Relay/blob/master/relay.py
 */
const HID = require('node-hid')

const ALL_ON = 0xfe

danawoodman

/**
 * Control a USB relay board using USB.
 *
 * This code helped a lot in the understanding of what they boards
 * expect for hex inputs:
 * https://github.com/jaketeater/Very-Simple-USB-Relay/blob/master/relay.py
 */
const HID = require('node-hid')

const ON = 0xfe

danawoodman

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const COMPANIES = [
  {
    id: 1,
    name: "Foo",
    accounts: [{ id: 4, name: "SubAccount", accounts: [] }]

danawoodman

alias -='cd -'
alias ..='cd ..'
alias ..-='cd .. && cd -'
alias ...='cd ../..'
alias ....='cd ../../..'
alias .....='cd ../../../..'
alias be='bundle exec'
alias cl='clear'
alias cleanup='find . -name '\''*.DS_Store'\'' -type f -ls -delete'
alias d='docker'