Skip to content

Instantly share code, notes, and snippets.

Cory House coryhouse

Block or report user

Report or block coryhouse

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
@coryhouse
coryhouse / Layout.jsx
Created Jan 24, 2020
Example App Layout React component
View Layout.jsx
import React, {
isValidElement,
Suspense,
useState,
useRef,
useEffect
} from "react";
import PropTypes from "prop-types";
import { Route } from "react-router-dom";
import H1 from "reusable/lib/H1";
@coryhouse
coryhouse / useAlert.js
Last active Jan 24, 2020
Hook for easily creating an alert
View useAlert.js
// Hook to make consuming Alert context more convenient
import { useContext } from "react";
import AlertContext from "../components/AlertContext";
import { ALERT_TYPES } from "reusable/lib/Alert";
import { useHistory } from "react-router";
export default function useAlert() {
const history = useHistory();
const { setAlerts } = useContext(AlertContext);
@coryhouse
coryhouse / useSafeState.js
Created Jan 23, 2020
React useSafeState hook - Only set state if mounted
View useSafeState.js
import { useEffect, useRef, useState } from "react";
/**
* Provides the functionality of React.useState() with the only difference that
* it sets a state only if its parent component is still mounted, aka "safe setState".
*/
export default function useSafeState(initialState) {
const mountedRef = useRef(false);
const [state, setState] = useState(initialState);
View git-aliases.txt
[alias]
co = checkout
ec = config --global -e
up = !git pull --rebase --prune $@ && git submodule update --init --recursive
cob = checkout -b
cm = !git add -A && git commit -m
save = !git add -A && git commit -m 'SAVEPOINT'
wip = !git add -u && git commit -m "WIP"
undo = reset HEAD~1 --mixed
amend = commit -a --amend
@coryhouse
coryhouse / logic-less-jsx.jsx
Last active Aug 23, 2019
Note that the vars at the top keep the JSX simple. Other options here: https://verekia.com/react/logic-less-jsx/
View logic-less-jsx.jsx
// Logic-less JSX via vars above
const Animal = ({ id, name, legCount, isFriendly }) => {
const url = `url/animal/${id}`
const legCountStr = toString(legCount) || '?'
const friendliness = { true: 'Friendly', false: 'Unfriendly' }[isFriendly]
const hasNotEnoughData = legCount === undefined && isFriendly === undefined
return (
<li>
<a href={url}>{name}</a> - {legCountStr} legs
View Conditionals.jsx
str // strings
<Cmp /> // components
<Cmp {...{ a, b, }} /> // instead of a={a} b={b}. yes, it's less performant
foo && <Cmp /> // shows if truthy
foo === somevalue && <Cmp /> // shows if foo is somevalue
!foo && <Cmp /> // shows if falsy
foo !== somevalue && <Cmp /> // shows if foo is not somevalue
@coryhouse
coryhouse / customRenderPerComponent.js
Created Mar 29, 2019
Custom render wrapper for each component with getters for each input for react-testing-library
View customRenderPerComponent.js
import { render as r } from '../test-utils'
function render(ui, options) {
const utils = r(ui, options)
return {
...utils,
username: utils.getByLabelText(/username/i),
password: utils.getByLabelText(/password/i),
login: utils.getByText(/login/i),
successModal: () => utils.getByTestId('login-success')
}
@coryhouse
coryhouse / centralizedRender.js
Created Mar 29, 2019
Custom centralized render for react-testing-library
View centralizedRender.js
import { render as r } from 'react-testing-library'
import { createStore } from 'redux'
import { Provider as ReduxProvider } from 'react-redux'
import { LocationProvider, createHistory } from "@reach/router"
import { AuthenicationProvider, createAuth } from '../auth'
import { reducer } from '../state'
export function reducer(ui, {
initialState = {},
store = createStore(reducer, initialState),
history = createHistory(),
@coryhouse
coryhouse / updates.md
Last active Sep 30, 2019
Building Apps with React Redux on Pluralsight - 2019 Course Updates
View updates.md

Enhancements and changes

  1. Upgraded to React 16.8, React Router 5, Babel 7, Webpack 4
  2. Hooks
  3. Optimistic delete example
  4. Middleware coverage
  5. Async/await coverage
  6. Using json-server instead of homemade mock API
  7. Centralized API proxy and utils
  8. Immer coverage
  9. Webpack-bundle-analyzer
View mockdata.json
{
"newCourse": {
"id": "",
"watchHref": "",
"title": "",
"authorId": "",
"length": "",
"category": ""
},
"courses": [
You can’t perform that action at this time.