danielkcz

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

danielkcz

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

danielkcz

import { observer } from 'mobx-react-lite'

const RandomGiphy = observer(() => {
  const settings = useSettings()
  const giphy = useRandomGiphy(settings.tag)
  return giphy ? <img src={giphy.url} /> : null
})

danielkcz

// HOC approach was first and some still prefer it for whatever reasons
// Along with recompose you can do some real nasty tricks
const MutateMe = graphql(MutationDocument, { name: 'execute' })(({ execute }) => {
  // In comparison it's not a terrible way to execute a mutation
  // But naming the mutation with string 😆
  return <button onClick={() => execute({ variables: { secretName: 'Me' }})} />
})

// Mutation component is fine for simple cases, but gets ugly otherwise
const MutateMe = () => {

danielkcz

import React from 'react'

const context = React.createContext(mobx.observable({
  tag: 'kittens'
}))

export const SettingsProvider = ({ children }) => {
  // we can employ some persistence here and load previous settings
  // for now just return children because context already has state set
  return children

danielkcz

import { useQuery } from 'react-apollo-hooks'

const RandomGiphy = ({ tag }) => {
  const { data } = useQuery(
    RandomGiphyQuery, {
      variables: { tag }
    }
  }
  // handle loading & error states...
  return <img src={data.giphy.random.url} />

danielkcz

const formik = mobx.observable({
  values: props.initialValues || {},
  touched: {},
  errors: {},
  // scalar values needs to be wrapped into another object
  // otherwise after spreading MobX would lost track of it
  state: {
    isSubmitting: false,
    submitError: null
  }

danielkcz

declare module 'mobx-react-form' {
  export default MRF.MobxReactForm
}

type Dictionary<T> = { [key: string]: T }

declare namespace MRF {
  class MobxReactForm {
    constructor(options: MRF.Options, settings?: MRF.Settings)
    isValid: boolean

danielkcz

const functions = require('firebase-functions')
const admin = require('firebase-admin')

// This is hosted using Firebase Functions to gain easier access without meddling with service key

admin.initializeApp(functions.config().firebase)

exports.verifyToken = functions.https.onRequest((req, res) => {
  const { idToken } = req.query
  if (!idToken) {

danielkcz

import { Trans } from '@lingui/react'
import React, { Children } from 'react'


interface IProps {
  children: ReactNode | string
}

interface IState {
  refs: React.RefObject<Trans>[]