Skip to content

Instantly share code, notes, and snippets.

View whichsteveyp's full-sized avatar

Stephen Rivas Jr whichsteveyp

View GitHub Profile
@whichsteveyp
whichsteveyp / keybase.md
Last active December 22, 2020 20:10
pls don't hack me

Keybase proof

I hereby claim:

  • I am whichsteveyp on github.
  • I am steveyp (https://keybase.io/steveyp) on keybase.
  • I have a public key ASA-vzQSWq8PKNfyfJCQt7tx1SOAqF5RVaKDRrTOGubYXAo

To claim this, I am signing this object:

@whichsteveyp
whichsteveyp / .tsconfig
Created May 11, 2018 17:30
ultimate type system configuration
{
"exclude": [
"node_modules",
"**/*.js"
]
}
@whichsteveyp
whichsteveyp / action-creators.js
Last active October 25, 2017 23:40
initial API implementation WIP for action creators
import actionTypes from 'redux-resource';
const createActionCreators = (options = {}) => {
const { crudType, resourceName } = options;
const uppercaseCrud = crudType ? crudType.toUpperCase() : '';
const isValidCrudType =
uppercaseCrud === 'UPDATE' || uppercaseCrud === 'DELETE' ||
uppercaseCrud === 'READ' || uppercaseCrud === 'CREATE';
@whichsteveyp
whichsteveyp / component-getters.jsx
Created September 14, 2017 17:11
Prop Getters?
import React from 'react';
import Downshift from 'downshift';
class Foo extends React.Component {
render() {
return <Downshift onChange={this.onChange}>
{(controls) => {
const {isOpen, inputValue, selectedItem, ...funcs} = controls;
return <div>
@whichsteveyp
whichsteveyp / read-books-actions.js
Last active October 25, 2017 22:53
Dispatch Helpers API (allowing for custom XHR (or anything app controlled behavior
/*
Currently, I use `readResources(...)` for two main reasons:
1. easy conformity from my API responses into the reducers in a "resourceful" way,
along with all the great `getStatus()` and `meta` and `lists` benefits that each
slice has
2. it also makes XHRs for me and updates the above automatically for me
An issue with this is any time I need to control my _own_ XHRs, I loose out on the
@whichsteveyp
whichsteveyp / App.jsx
Created July 6, 2017 02:01
Stephen vs Promises
import React from 'react';
import Component from './Component.jsx';
export default class App extends React.Component {
render() {
return <Component options={{ autoplay: true }}>
{(status, video) => {
// this error is being caught in the promise in component render, even though
const API = ({ match, data }) => {
// this i left as is
const { params: { mod, header, environment } } = match;
const doc = data.api.find(doc => mod === doc.title.slug);
// don't mind the tern here as much, maybe would split the find to its own `validDocHeaderMatch`
const validHeader = doc && (header ? !!doc.headers.find(h => h.slug === header) : true );
// this is my 😍 for conditional JSX thus far
return <Block>
{!doc && <Redirect to={`/${environment}`}/>}
import B from './ComponentB-map.jsx';
export default const A = React.creatClass({
render() {
const { wrapperStyle, BStyleMap } = this.props.style;
// now you have to grok A's map, as well as B's map _and_ hope B has a map that supports the
// customization that you would want B to support when in this A context
return (
@whichsteveyp
whichsteveyp / children-as-function.js
Last active May 25, 2016 02:11 — forked from iammerrick/children-as-function.js
Which API do you prefer? Passing a function into the Ratio component or making a higher order component called Ratio you can use to configure a component.
// parent A wants to show a list
<GetLastNImagesOfType type="jpg" numImages={10}>
{(images) => {
return images.map(image => <span>{image.name}</span>)
}}
</GetLastNImagesOfType>
// parent B wants to show the images themselves
<GetLastNImagesOfType type="jpg" numImages={10}>
{(images) => {
@whichsteveyp
whichsteveyp / App.js
Created April 2, 2016 17:20
Considering usage for React Context - Localization/Utilities
// imports & variables, etc
ReactDOM.render(
<Localization messageBundle={{ foo: 'Welcome', bar: 'This is', baz: 'a website' }}>
<Provider store={Store}>
<Router history={history}>
<Route path="/" component={SomeParentRenderingGrandchildrenThatWantLocalizedStrings}>
</Router>
</Provider>
</Localization>,