Sawtaytoes’s gists

Sawtaytoes / 1-single-press.js

Created September 20, 2018 02:49

Flic Button listener for a single button press.

	import {
	BUTTON_DOWN,
	singlePressAction,
	} from './actions'

	const handleButtonPress = buttonState => (
	buttonState === BUTTON_DOWN
	&& singlePressAction()
	)

Sawtaytoes / functional-curry.js

Created September 20, 2018 02:49

Dynamic currying function written for functional code (no `this` context).

	curry = func => (...args) => (
	args.length >= func.length
	? func(...args)
	: (...moreArgs) => curry(func)(...args.concat(moreArgs))
	)

Sawtaytoes / functional-uncurry.js

Created September 20, 2018 02:49

Dynamic uncurrying function written for functional code (no `this` context).

	uncurry = func => (...args) => {
	const numberOfFunctionArgs = func.length \|\| args.length
	const value = func(...args.slice(0, numberOfFunctionArgs))

	return (
	typeof value === 'function'
	? uncurry(value)(...args.slice(numberOfFunctionArgs))
	: value
	)
	}

Sawtaytoes / TestComponent.js

Last active September 20, 2018 06:10

Using `ReduxConnection` instead of `connect`.

	import React from 'react'
	import { ReduxConnection } from '@ghadyani-framework/redux-components'

	const textSelector = (
	({ text }) => (
	text,
	)
	)

	const TestComponent = ({

Sawtaytoes / IsAuthenticated.js

Last active September 20, 2018 06:10

Advanced use of `ReduxConnection` to compose other Redux-stateful components.

	import React from 'react'
	import { ReduxConnection } from '@ghadyani-framework/redux-components'

	import { authInfoSelector } from '~/redux/auth/selectors'

	const IsAuthenticated = ({
	children,
	}) => (
	<ReduxConnection selector={authInfoSelector}>
	{({

Sawtaytoes / IsAuthenticated.js

Last active September 20, 2018 03:31

`IsAuthenticated` React component using react-redux's `connect`.

	import React from 'react'
	import { connect } from 'react-redux'

	import { authInfoSelector } from '~/redux/auth/selectors'

	export const IsAuthenticated = ({
	children,
	hasReceivedAuthInfo,
	isAuthenticated,
	}) => ({

Sawtaytoes / IsAuthenticated_ReduxConnection.js

Last active September 20, 2018 06:09

A comparison of the `IsAuthenticated` components from `connect` and `ReduxConnection` when using PropTypes.

	import PropTypes from 'prop-types'
	import React from 'react'
	import { ReduxConnection } from '@ghadyani-framework/redux-components'

	import { authInfoSelector } from '~/redux/auth/selectors'

	const propTypes = {
	children: PropTypes.node.isRequired,
	}

Sawtaytoes / PersonsList_ReduxConnection.js

Last active September 30, 2018 04:23

A complex example of using `connect` with its failure situations compared to `ReduxConnection`: - You use mapDispatchToProps. - You stack higher-order components such as connect and reduxForm. - You have to combine two or more state selectors for one

	import CheckCircleIcon from '@material-ui/icons/CheckCircle'
	import CircleIcon from '@material-ui/icons/Circle'
	import List from '@material-ui/core/List'
	import ListItem from '@material-ui/core/ListItem'
	import ListItemIcon from '@material-ui/core/ListItemIcon'
	import ListItemText from '@material-ui/core/ListItemText'
	import PropTypes from 'prop-types'
	import React, { Fragment } from 'react'
	import { MaterialUiStyles } from 'imagined-material-ui-styles-component'
	import { push } from 'connected-react-router'

Sawtaytoes / PersonsList.js

Last active September 30, 2018 04:23

This is an improved version of `PersonsList` using render props with `ReduxConnection`'s `component` prop.

	import List from '@material-ui/core/List'
	import PropTypes from 'prop-types'
	import React, { Fragment } from 'react'
	import { MaterialUiStyles } from 'imagined-material-ui-styles-component'
	import { ReduxConnection } from '@ghadyani-framework/redux-components'

	import CheckboxListItems from '~/components/lists/CheckboxListItems'
	import SectionHeading from '~/components/siteLayout/SectionHeading'
	import { listItemsSelector } from '~/redux/lists/selectors'
	import { sectionHeadingSelector } from '~/redux/sections/selectors'

Sawtaytoes / ReduxConnectionDrawback.js

Last active September 30, 2018 04:23

A drawback of using `ReduxConnection` is it doesn't re-render when the parent component re-renders it. This means you need to pass in `name` and any other props closed around in the render props function.

	<ReduxConnection
	namespace={namespace}
	selector={listItemsSelector}
	>
	{({ listItems }) => (
	listItems
	.map(({
	id,
	isChecked,
	name,

Kevin Ghadyani Sawtaytoes