Skip to content

Instantly share code, notes, and snippets.

Matthew Brooks mdboop

Block or report user

Report or block mdboop

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@mdboop
mdboop / autocomplete.jsx
Last active Sep 4, 2019
Simple Rxjs + Downshift autocomplete
View autocomplete.jsx
import React from 'react';
import Downshift from 'downshift';
import Rx from 'rxjs';
import { ajax } from 'rxjs/observable/dom/ajax';
const makeUrl = search =>
`https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=${encodeURIComponent(str)}`;
const input$ = new Rx.Subject();
@mdboop
mdboop / shrimp-linguine.md
Last active Jan 12, 2018
Simple pasta recipe with shrimp
View shrimp-linguine.md

Shrimp Linguine

  • 1 lb spaghetti or linguine
  • 1 lb shrimp, cleaned and deveined
  • 1/4 cup olive oil
  • 1/2 cup butter (1 stick)
  • 1 cup white wine
  • finely chopped garlic, as desired (4-5 gloves is good)
  • 1 medium shallot, finely chopped
  • sliced mushrooms, as desired (~2-3 cups)
@mdboop
mdboop / redux-observable-fsa.js
Last active Jun 29, 2017
A little function, which could be paired with flux standard actions to help reduce redux boilerplate.
View redux-observable-fsa.js
import { actionCreatorFactory } from 'typescript-fsa'
import { ajaxGetJSON, ajaxPost, ajaxPut, ajaxDelete } from 'rxjs'
import { combineEpics } from 'redux-observable'
const createEpic = (fsa, request, prepare) =>
(action$, store) =>
action$.ofType(fsa.started.type)
.map(
action => (typeof prepare === 'function' ? prepare(action, store.getState() : action.payload)
)
View epic.test.js
import configureMockStore from 'redux-mock-store';
import { createEpicMiddleware, combineEpics } from 'redux-observable';
import { Observable } from 'rxjs';
import userEpic from './userEpic.js';
import { fetchUser } from '../actionCreators/users.js';
describe('userEpic', () => {
// set up our mock data and mock request function
@mdboop
mdboop / either-react.jsx
Last active Aug 30, 2017
Functional null-check and code-branching with React
View either-react.jsx
/**
* This is something I threw together as a quick test.
* It's a contrived example because you'd likely just have one component for message and include something like:
* <p>{message.body || 'No message.'}</p>
*
* However, when I'm writing components, I often have to handle different UI treatments depending on the data.
* It's the same overall component, same logical chunk of UI, but it might take on three different forms, and
* those differences may have drastically different markup. Those situations make it easy start writing a lot
* of imperative code, and I always feel dissatisfied when I have to include if statements in my render functions.
*
View redux-observable-example.js
function epic(action$) {
return Observable.ofType('FETCH_FOO')
.mergeMap(() =>
ajax('/api/foos')
.map((data) => ({
type: 'FETCH_FOO_SUCCESS',
data,
}))
.catch((err) => [{
type: 'FETCH_FOO_ERROR',
You can’t perform that action at this time.