kdipaolo’s gists

kdipaolo / handle_active_tabs.js

Created September 18, 2017 17:13

	// example url: http://localhost:3000/project/26/details

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

kdipaolo / forceSignIn.js

Created February 20, 2018 17:52

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

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

kdipaolo / gist:5a5ffd44349198aac5d154fc894d1835

Last active April 24, 2018 15:32

Intercom Form

	<!doctype html>
	<html>

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

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

kdipaolo / user_render_prop_component.js

Created May 28, 2018 14:23

	// 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>

kdipaolo / button_component.js

Created May 28, 2018 14:30

	// 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'

kdipaolo / context_api_modal.js

Created May 28, 2018 14:33

	// 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: () => {},

kdipaolo / name_graphql_queries.js

Created August 20, 2018 12:38

Named GraphQL Queries

	// 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
	}
	`

kdipaolo / update_apollo_link_state_from_mutation.js

Created August 21, 2018 11:37

	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} />

kdipaolo / apollo_link_state.js

Created August 21, 2018 19:57

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

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

	const client = new ApolloClient({

kdipaolo / auto_refetch_on_mutation_apollo.js

Created August 24, 2018 19:31

	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 {

Kurt DiPaolo kdipaolo