Skip to content

Instantly share code, notes, and snippets.

Avatar
🐯

Rodrigo Hernando rhernandog

🐯
View GitHub Profile
@rhernandog
rhernandog / Users.js
Created Aug 14, 2020
Implementation in the client side
View Users.js
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
rhernandog / queries.js
Last active Aug 14, 2020
Client side queries file
View queries.js
import { gql } from "@apollo/client";
export const ALL_USERS = gql`
query AllUsers ($searchUserInput: SearchUserInput) {
allUsers (input: $searchUserInput) {
id
name
}
}
`;
@rhernandog
rhernandog / class-toggle.js
Last active Jan 7, 2018
Vanilla class toggle function
View class-toggle.js
// 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 {
View color-groups-array.js
const colorGroups = [
// PINK
"#FFC0CB",
"#FFB6C1",
"#FF69B4",
"#FF1493",
"#DB7093",
"#C71585",
// PURPLE
"#E6E6FA",
@rhernandog
rhernandog / colors-array.js
Created Dec 31, 2017
Array of web safe colors by HEX code
View colors-array.js
const colors = [
"#F0F8FF",
"#FAEBD7",
"#00FFFF",
"#7FFFD4",
"#F0FFFF",
"#F5F5DC",
"#FFE4C4",
"#000000",
"#FFEBCD",
View color-groups.json
{
"colorGroups" : [
{
"groupName": "Pink",
"colors": [
{"name": "Pink", "color": "#FFC0CB"},
{"name": "LightPink", "color": "#FFB6C1"},
{"name": "HotPink", "color": "#FF69B4"},
{"name": "DeepPink", "color": "#FF1493"},
{"name": "PaleVioletRed", "color": "#DB7093"},
View color-groups.js
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"},
View color-names.json
{
"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
rhernandog / color-names.js
Last active Dec 30, 2017
Javascript file with all the web-safe colors shown here https://www.w3schools.com/colors/colors_names.asp
View color-names.js
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
rhernandog / index.jsx
Last active Dec 17, 2020
React & Recompose withProps - A simple example of using recompose's withProps
View index.jsx
// 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" },