Skip to content

Instantly share code, notes, and snippets.

@simenbrekken
simenbrekken / analytics.js
Created Feb 12, 2018
KISS analytics abstraction
View analytics.js
const googleAnalytics = event => {
switch (event.type) {
default:
window.dataLayer.push(event)
}
}
const facebook = event => {
switch (event.type) {
case 'pageview':
@simenbrekken
simenbrekken / README.md
Last active Aug 7, 2019
Apollo Client 2.0 withFragments
View README.md

This HoC gives you a way to work with co-located fragments that is similar to Relay's FragmentContainer

It supports both fragment maps extrapolation of prop names from fragment definitions.

Fragment map

export default withFragments({
  price: gql`
    fragment ProductDetails_price on Product {
@simenbrekken
simenbrekken / index.html
Created Nov 22, 2017 — forked from SimenBAndersen/index.html
Field-error-handling
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
@simenbrekken
simenbrekken / GraphQL.js
Last active Nov 7, 2017
react-apollo graphql de-enhancer
View GraphQL.js
import { Component, createElement } from 'react'
import { graphql as withGraphQL } from 'react-apollo'
class GraphQL extends Component {
constructor(props, context) {
super(props, context)
this.client = props.client || context.client
this.renderer = this.createRenderer(this.props)
}
@simenbrekken
simenbrekken / index.js
Created Oct 4, 2017
Signal handling for node Express apps in Docker
View index.js
const PORT = process.env.PORT || 8081
const HOST = process.env.HOST || 'localhost'
const app = express()
const server = app.listen(PORT, err => {
if (err) {
console.error(err)
process.exit(1)
}
@simenbrekken
simenbrekken / README.md
Last active Oct 11, 2017
Express.js brute-force ☕️-reloading
View README.md

This neat little script let's you develop Express apps without using something like nodemon to reload your server between changes.

Usage:

  1. Put dev.js outside your project source folder, scripts/dev.js is what I'm using.
  2. Make sure your actual app in src/index.js exports the Express instance itself without listening:
import express from 'express'
@simenbrekken
simenbrekken / MyComponent.js
Created Sep 13, 2017
Server-side rendering React applications with request resolver
View MyComponent.js
componentWillMount() {
registerRequestPromises(() => {
const queries = createQueries(mapPropsToQueries, this.props)
return this.dispatchQueries(queries)
})
}
@simenbrekken
simenbrekken / Component.js
Last active Apr 28, 2017
Simplified redux-query reducer with error handling
View Component.js
import { getQueryByUrl } from './reducers/queries'
import { getPageByPath } from './reducers/pages'
const Page = ({ loading = true, error, page }) => {
if (loading) {
return <Loader />
}
if (error) {
return <Error error={error} />
@simenbrekken
simenbrekken / request-resolver.js
Last active Apr 10, 2017
Universal Rendering with Redux Query and React Router v4
View request-resolver.js
let pendingPromises
let resolving = false
export const registerRequestPromises = createRequestPromises => {
if (resolving) {
const promises = createRequestPromises()
if (promises) {
pendingPromises.push(...promises)
}
View withForm.js
export const RESET_FORM = 'RESET_FORM'
export const SET_FORM_VALUE = 'SET_FORM_VALUE'
export const setValue = (id, name, value) => ({ type: SET_FORM_VALUE, id, name, value })
export const reset = (id, name, value) => ({ type: SET_FORM_VALUE, id })
const withForm = (stateName, id = stateName, resetOnUmount = true) => {
const composers = [
connect(state => {
form: state.forms[id],