alobato

import React, { useContext, useState, useEffect } from 'react'

const ApolloContext = React.createContext()

export function ApolloProvider({ children, client }) {
  return (<ApolloContext.Provider value={client}>{children}</ApolloContext.Provider>)
}

export function useApolloClient() {
  return useContext(ApolloContext)

alobato

import React from 'react'
import styled, { css } from 'styled-components'

import { ExpandLessIcon } from '../components/Icons'

const Accordion = ({ open, title, children, onChange, ...rest }) => (
  <div onKeyPress={e => (['Enter', ' '].includes(e.key)) && onChange(!open)} {...rest}>
    <label onClick={() => onChange(!open)}>
      <span>{title}</span>
      <i><ExpandLessIcon /></i>

alobato

import React from 'react'
import ReactDOM from 'react-dom'
import App from './containers/App'
import * as serviceWorker from './serviceWorker'

import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'

import { HttpLink } from 'apollo-link-http'

alobato

import styled from 'styled-components'
import { style, space, color, width, height, fontSize, fontWeight, flex, order, alignSelf, textAlign, lineHeight, top, right, bottom, left, maxWidth, maxHeight, minWidth, minHeight, position, overflow, justifyContent, alignItems, flexDirection, flexWrap } from 'styled-system'

const lh = style({prop: 'lh', cssProperty: 'lineHeight'})
const ta = style({prop: 'ta', cssProperty: 'textAlign'})
const t = style({prop: 't', cssProperty: 'top', transformValue: n => /^\d+$/.test(n) ? n + 'px': n})
const r = style({prop: 'r', cssProperty: 'right', transformValue: n => /^\d+$/.test(n) ? n + 'px': n})
const b = style({prop: 'b', cssProperty: 'bottom', transformValue: n => /^\d+$/.test(n) ? n + 'px': n})
const l = style({prop: 'l', cssProperty: 'left', transformValue: n => /^\d+$/.test(n) ? n + 'px': n})
const w = style({prop: 'w', cssProperty: 'width', transformValue: n => /^\d+$/.test(n) ? n + 'px': n})

alobato

// https://reactjs.org/docs/error-boundaries.html
// https://docs.sentry.io/platforms/javascript/react/

import React from 'react'
import * as Sentry from '@sentry/browser'

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null }

alobato

import styled from 'styled-components'

export const FormError = styled.div`
  font-size: 12px;
  line-height: 20px;
  color: hsla(6, 66%, 47%, 1);
`

export default FormError

alobato

import React from 'react'

export const CloseIcon = props => (
  <svg
    viewBox="0 0 30 30"
    {...props}
    width={30}
    height={30}
    fill='currentColor'
  >

alobato

import React from 'react'
const CircularProgress = () => (
  <div style={{width: '100%', textAlign: 'center'}}>
    <svg
      width='120'
      height='120'
      viewBox='0 0 100 100' 
      preserveAspectRatio='xMidYMid'
      style={{background: 'none'}}
    >

alobato

import styled, { css } from 'styled-components'

const Button = styled.button`
  cursor: pointer;
  display: inline-block;
  border-radius: 22px;
  color: white;
  border: none;
  background: hsla(0, 0%, 68%, 1);
  font-size: 16px;

alobato

import { useState, useEffect } from 'react'

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value)
      }, delay)