rhernandog

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

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

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

rhernandog

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

const colorGroups = [
  // PINK
  "#FFC0CB",
  "#FFB6C1",
  "#FF69B4",
  "#FF1493",
  "#DB7093",
  "#C71585",
  // PURPLE
  "#E6E6FA",

rhernandog

const colors = [
  "#F0F8FF",
  "#FAEBD7",
  "#00FFFF",
  "#7FFFD4",
  "#F0FFFF",
  "#F5F5DC",
  "#FFE4C4",
  "#000000",
  "#FFEBCD",

rhernandog

{
  "colorGroups" : [
    {
      "groupName": "Pink",
      "colors": [
        {"name": "Pink", "color": "#FFC0CB"},
        {"name": "LightPink", "color": "#FFB6C1"},
        {"name": "HotPink", "color": "#FF69B4"},
        {"name": "DeepPink", "color": "#FF1493"},
        {"name": "PaleVioletRed", "color": "#DB7093"},

rhernandog

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

{
  "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

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

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