🐯

Rodrigo Hernando rhernandog

🐯

Senior developer @webflow / @greensock gsap.com

rhernandog / Users.js

Created August 14, 2020 01:10

Implementation in the client side

	const Users = () => {
	const [users, setUsers] = useState([]);
	const [nameSearch, setSearchUserInput] = useState("ad");
	const [userTypeFilter, setUserTypeFilter] = useState("all");
	const [fetchUsers, { loading, error, data }] = useLazyQuery(ALL_USERS, {
	variables: {
	input: {
	name: nameSearch,
	userType: userTypeFilter
	}

rhernandog / queries.js

Last active August 14, 2020 01:15

Client side queries file

	import { gql } from "@apollo/client";

	export const ALL_USERS = gql`
	query AllUsers ($searchUserInput: SearchUserInput) {
	allUsers (input: $searchUserInput) {
	id
	name
	}
	}
	`;

rhernandog / class-toggle.js

Last active January 7, 2018 16:19

Vanilla class toggle function

	// this function assumes that the target is a DOM element
	function classToggle(element, name) {
	var target = element.target;
	var classEx = new RegExp(" " + name + "\|" + name + " ", "g");

	if (target.classList) {
	// there's support for the class list API
	if (target.classList.contains(name)) {
	target.classList.remove(name);
	} else {

rhernandog / color-groups-array.js

Created December 31, 2017 15:40

Array of web safe colors ordered in groups: https://www.w3schools.com/colors/colors_groups.asp

rhernandog / colors-array.js

Created December 31, 2017 15:36

Array of web safe colors by HEX code

rhernandog / color-groups.json

Created December 30, 2017 20:50

Color groups as described here: https://www.w3schools.com/colors/colors_groups.asp

rhernandog / color-groups.js

Created December 30, 2017 20:49

Color groups as described here: https://www.w3schools.com/colors/colors_groups.asp

	export const colorGroups = [
	{name: "Pink", color: "#FFC0CB"},
	{name: "LightPink", color: "#FFB6C1"},
	{name: "HotPink", color: "#FF69B4"},
	{name: "DeepPink", color: "#FF1493"},
	{name: "PaleVioletRed", color: "#DB7093"},
	{name: "MediumVioletRed", color: "#C71585"},

	{name: "Lavender", color: "#E6E6FA"},
	{name: "Thistle", color: "#D8BFD8"},

rhernandog / color-names.json

Created December 30, 2017 15:48

JSON File with HTML Colors as shown here https://www.w3schools.com/colors/colors_names.asp

	{
	"colorNames": [
	{"name": "AliceBlue", "code":"#F0F8FF"},
	{"name": "AntiqueWhite", "code":"#FAEBD7"},
	{"name": "Aqua", "code":"#00FFFF"},
	{"name": "Aquamarine", "code":"#7FFFD4"},
	{"name": "Azure", "code":"#F0FFFF"},
	{"name": "Beige", "code":"#F5F5DC"},
	{"name": "Bisque", "code":"#FFE4C4"},
	{"name": "Black", "code":"#000000"},

rhernandog / color-names.js

Last active December 30, 2017 15:43

Javascript file with all the web-safe colors shown here https://www.w3schools.com/colors/colors_names.asp

	const colors = [
	{name: "AliceBlue", code:"#F0F8FF"},
	{name: "AntiqueWhite", code:"#FAEBD7"},
	{name: "Aqua", code:"#00FFFF"},
	{name: "Aquamarine", code:"#7FFFD4"},
	{name: "Azure", code:"#F0FFFF"},
	{name: "Beige", code:"#F5F5DC"},
	{name: "Bisque", code:"#FFE4C4"},
	{name: "Black", code:"#000000"},
	{name: "BlanchedAlmond", code:"#FFEBCD"},

rhernandog / index.jsx

Last active December 17, 2020 14:53

React & Recompose withProps - A simple example of using recompose's withProps

	// styles for this are based on Bootstrap 3.3.7
	import React, { Component } from "react";

	import ReactDOM from "react-dom";

	import { withProps } from "recompose";


	const users = [
	{ "name": "Homer Jay", "status": "pending" },