Skip to content

Instantly share code, notes, and snippets.

Adam Terlson adamterlson

View GitHub Profile
View machine.js
const transactionMachine = Machine({
id: 'transaction',
initial: 'draft',
states: {
draft: {
on: {
AUTHORIZE_PAYMENT: {
target: 'authorizing',
},
ADD_ITEM: {
@adamterlson
adamterlson / flowbindings.js
Created Jan 22, 2019
Custom flowbindings for React-Redux
View flowbindings.js
/* @flow */
import * as React from 'react'
import type { ComponentType, ElementConfig } from 'react'
declare type Action = { type: string }
declare type Dispatch = (arg: Action | Array<Action>) => mixed
declare type MapStateToProps<S, OP, SP> = (state: S, ownProps: OP) => SP
declare type MapDispatchToProps<OP, DP> = (dispatch: Dispatch, ownProps: OP) => DP
declare type MergeProps<SP, DP, OP, MP> = (stateProps: SP, dispatchProps: DP, ownProps: OP) => MP
View connect-plus-map.js
const propMap = (mapper) => (WrappedComponent) => (props) => <WrappedComponent {...mapper(props) } />
const mapStateToProps = (state) => {
user: state.currentUser
}
// This component will display the firstName of the current user
const MyComponent = compose(
connect(mapStateToProps),
propMap(props => ({
@adamterlson
adamterlson / Usage.js
Created Oct 13, 2016
Bug: React will blur on every key press when this HOC is used. Due to the component returned not being the same?
View Usage.js
compose(
ownState(
set => ({
setValue: e => set(state => ({
...state,
value: e.target.value,
})),
clearValue: () => set(state => ({
...state,
value: '',
@adamterlson
adamterlson / Propsal.md
Last active Oct 2, 2019
Lightning talk proposal for the Reactive 2016 Conference: Reconceptualizing react applications as a function
View Propsal.md

Lightning talk proposal for the Reactive 2016 Conference. Here's a handy retweet link

If you want to hear this talk, or if you just want to support me, please star the Gist!

When I started writing React apps, I approached components as if they were “just the V in MVC!” Seriously, we’ve all heard it.

I have found this to be an inferior way of thinking about and building React applications. It makes people treat React as a drop-in replacement for something like a Backbone or Angular 1.x View. In other words, people treat it like a glorified template system with partials and don’t harness the power of its functional paradigms.

This talk is about a functional way to write and conceptualize entire React applications.

@adamterlson
adamterlson / app.jsx
Created Jun 8, 2016
Overriding default child styles in RN
View app.jsx
class MyChildComponent extends Component {
render() {
return (
<View style={[{ height: 100 }, this.props.style]}>
The height of this container will be **50**
</View>
);
}
}
@adamterlson
adamterlson / context-test.js
Last active Apr 5, 2016
Testing this context on class instance methods
View context-test.js
const c = (function () {
this.context = 'lexical context';
const bar1 = () => {
console.log('bar 1:', this.context);
};
const curry = (fn) => {
console.log('bar 3 curryer context:', this.context);
return () => {
View english.js
let user = {
teacherId: 1,
first: 'Bob',
last: 'Smith',
room: {
floor: 2,
number: 40
}
};
@adamterlson
adamterlson / fixingAlly.js
Created Oct 17, 2014
How Ally can fix their lack of quickly-pickable date ranges
View fixingAlly.js
function formatDate(date) {
return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
}
$('form[name=accountDetailForm]').on('submit', function (e) {
alert('Submitted!');
e.preventDefault();
});
$('#dateRange a[data-date-range]').click(function (e) {
@adamterlson
adamterlson / jsonPropertySort.js
Last active Aug 29, 2015
Ordering JSON document properties alphabetically
View jsonPropertySort.js
function sortProperties(objToSort) {
var properties = Object.keys(objToSort).sort();
var result = {};
properties.forEach(function (prop) {
if (!objToSort[prop]) {
result[prop] = objToSort[prop];
}
else if (Array.isArray(objToSort[prop])){
result[prop] = objToSort[prop].map(sortProperties);
}
You can’t perform that action at this time.