Kurt DiPaolo kdipaolo

## handle_active_tabs.js
// example url: http://localhost:3000/project/26/details

const StyledLink = styled(Link)`
  border: 2px solid green;
  ${props =>
    props.active &&
    css`
    border: 2px solid red;
  `}
`

## forceSignIn.js
class ForceSignIn extends React.Component {
  handleClick = e => {
    this.forceSignIn()
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        {this.props.children}
      </div>

## gist:5a5ffd44349198aac5d154fc894d1835
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script>

        document.addEventListener("DOMContentLoaded", function (event) {
            var form = document.querySelector('#intercom_form')
            form.addEventListener('submit', e => {

## user_render_prop_component.js
// User Render Porop
// A user can wrap this <GetUser /> component around any other component and have access to the current user.
// This strategy helps create modularity and avoids passing the user info down via props which can pollute the code base

// Usage
 <GetUser>
    {user =>
      user.subscription === 'paid' && (
        <GoBoss to="/proposal-preview/go-boss">
          <span>Create unlimited proposals only $10 a month!</span>

## button_component.js
// This Button component uses a library called styled components (CSS in JS) which helps write declarative components for your css.
// This allow for extremley flexible user interfaces because you can combine css and JS logic to write flexible components.


// Usage
 <Button inverted disabled inline>Join Now</Button>


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

## context_api_modal.js
// Below I am using react's context api to create a modular way to manage modals within an application

// Context Environment

import React, { Component, createContext } from 'react'

const ModalContext = createContext({
  component: null,
  props: {},
  showModal: () => {},

## name_graphql_queries.js
// Name your graph ql queries so that they show up in apollos's dev tools
// allPosts will show up in apollos dev tools

const POSTS_QUERY = gql`
  query allPosts {
    posts {
      id
      title
  }
`

## update_apollo_link_state_from_mutation.js
import React, { Component } from 'react'
// With apollo mutations you are able to access the link state from within a second argument in a mutation render prop
export default class App extends Component {
  render() {
    return (
      <Mutation mutation={UPDATE_POST}>
        {(updatePost, result) => {
          // Here
          const onSuccess = () => result.client.writeData({data: isEditMode: false)
          return <PostForm post={post} onSubmit={updatePost} onSuccess={onSuccess} />

## apollo_link_state.js
// App.js
// Need apollo-boost for link state functionality
import ApolloClient from 'apollo-boost'

const defaultLinkState = {
  edit: false,
  open: false
}

const client = new ApolloClient({

## auto_refetch_on_mutation_apollo.js
const QUERY = gql`
  // This query name needs to be named so that we can put this name in the refetch query array
  query Resolutions {
    resolutions {
      _id
      name
    }
  }
`
class ResolutionForm extends Component {
	// example url: http://localhost:3000/project/26/details

	const StyledLink = styled(Link)`
	border: 2px solid green;
	${props =>
	props.active &&
	css`
	border: 2px solid red;
	`}
	`
	class ForceSignIn extends React.Component {
	handleClick = e => {
	this.forceSignIn()
	}

	render() {
	return (
	<div onClick={this.handleClick}>
	{this.props.children}
	</div>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<script>

	document.addEventListener("DOMContentLoaded", function (event) {
	var form = document.querySelector('#intercom_form')
	form.addEventListener('submit', e => {
	// User Render Porop
	// A user can wrap this <GetUser /> component around any other component and have access to the current user.
	// This strategy helps create modularity and avoids passing the user info down via props which can pollute the code base

	// Usage
	<GetUser>
	{user =>
	user.subscription === 'paid' && (
	<GoBoss to="/proposal-preview/go-boss">
	<span>Create unlimited proposals only $10 a month!</span>
	// This Button component uses a library called styled components (CSS in JS) which helps write declarative components for your css.
	// This allow for extremley flexible user interfaces because you can combine css and JS logic to write flexible components.


	// Usage
	<Button inverted disabled inline>Join Now</Button>


	// implementation
	import styled, { css } from 'styled-components'
	// Below I am using react's context api to create a modular way to manage modals within an application

	// Context Environment

	import React, { Component, createContext } from 'react'

	const ModalContext = createContext({
	component: null,
	props: {},
	showModal: () => {},
	// Name your graph ql queries so that they show up in apollos's dev tools
	// allPosts will show up in apollos dev tools

	const POSTS_QUERY = gql`
	query allPosts {
	posts {
	id
	title
	}
	`
	import React, { Component } from 'react'
	// With apollo mutations you are able to access the link state from within a second argument in a mutation render prop
	export default class App extends Component {
	render() {
	return (
	<Mutation mutation={UPDATE_POST}>
	{(updatePost, result) => {
	// Here
	const onSuccess = () => result.client.writeData({data: isEditMode: false)
	return <PostForm post={post} onSubmit={updatePost} onSuccess={onSuccess} />
	// App.js
	// Need apollo-boost for link state functionality
	import ApolloClient from 'apollo-boost'

	const defaultLinkState = {
	edit: false,
	open: false
	}

	const client = new ApolloClient({
	const QUERY = gql`
	// This query name needs to be named so that we can put this name in the refetch query array
	query Resolutions {
	resolutions {
	_id
	name
	}
	}
	`
	class ResolutionForm extends Component {