Skip to content

Instantly share code, notes, and snippets.

View danielpowell4's full-sized avatar

Daniel Powell danielpowell4

View GitHub Profile
@danielpowell4
danielpowell4 / dependent_tag_ui.md
Last active January 27, 2023 11:04
progressively disable dependent options

Tag Type

  • category of tag
  • has_many :tags
  • optionally belongs to a parent tag type (nested option)

Tag

  • specific field
  • belongs_to :tag_type
  • optionally belongs to a parent tag (nested option)
@danielpowell4
danielpowell4 / parsePropsFromDataset.js
Last active January 27, 2023 10:17
a simple way to hand off server side rendered data attributes to props in components
// - example rails erb view
// <div id="edit-react-form"
// data-submit-endpoint="<%= billing_profile_path(@billing_profile.token) %>"
// data-initial-values="<%= @form.initial_values.to_json %>"
// data-cancel-url="<%= billing_profile_path(@billing_profile.token) %>"
// >
// </div>
function parsePropsFromDataset(dataset) {
let stringifyedOptions = { ...dataset }; // convert DOMStringMap into Object
@danielpowell4
danielpowell4 / DisplayLocalStorage.js
Last active December 20, 2022 20:25
react component to read and display localStorage in a _more_ human readable manner
import * as React from "react";
import { SmallButton } from "../../shared"; // a cool <button />
const DisplayLocalStorage = () => {
const [changes, setChanges] = React.useState(0); // triggers re-renders
let localStorageState = {};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
let value;
@danielpowell4
danielpowell4 / ClientSideFiltering.js
Last active June 9, 2021 14:10
abstracted, client side filtering with location.search navigation via hooks
import * as React from "react";
import { GET } from "../utils/service"; // a fetch wrapper
import { useFilters } from "../hooks";
import FilterForm from "../components/FilterForm";
// filterTemplate instructs useFilters
// which filters should be allowed
// and how they are to traverse the data object tree
@danielpowell4
danielpowell4 / application_system_test_case.rb
Last active October 9, 2020 16:38
helpers for debugging webpacker + rails system test for minitest including printing to the console and disabling uglify
# based on https://intellipaat.com/community/16534/is-there-a-way-to-print-javascript-console-errors-to-the-terminal-with-rspec-capybara-selenium
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
JavaScriptError = Class.new(StandardError)
driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]
def teardown
logs = page.driver.browser.manage.logs.get(:browser)
errors = logs.select { |e| e.level == 'SEVERE' && e.message.present? }
@danielpowell4
danielpowell4 / passwordVisibilityToggle.js
Last active September 29, 2020 23:35
vanilla JS password visibility toggle
const getPasswordToggleStyle = offsetEl => {
const top = offsetEl.offsetTop + 6;
const left = offsetEl.offsetLeft + offsetEl.clientWidth - 28;
return `position: absolute; top: ${top}px; left: ${left}px; max-height: 16px; vertical-align: top; padding: 0; z-index: 7;`;
};
const addPasswordToggle = domId => {
const el = document.getElementById(domId);
if (!el) return;
@danielpowell4
danielpowell4 / Autosave.js
Last active September 3, 2020 23:14
Basically FormikPersist but saved on a server not in device-specific storage
import { useEffect, useRef } from "react";
import debounce from "lodash/debounce";
// basically a save-dedicated clone of
// a hook that would be called useDebouncedCallback
const AutoSave = ({
values, // what's in the form
saveProgress, // a network request / api call
interval = 5000, // ms
}) => {
@danielpowell4
danielpowell4 / cancancan_ability_delegator.rb
Created July 19, 2019 21:00
CanCanCan ability delegator. Like alias_action but across model classes
# frozen_string_literal: true
module Abilities
module AbilityDelegator
def self.included(klass)
klass.class_eval do
def delegate_action(action_or_actions, to:, traversal:, user:)
actions = [*action_or_actions]
can actions, model_class do |instance|
delegate = traversal.reduce(instance, &:public_send)
@danielpowell4
danielpowell4 / Router.js
Last active May 24, 2019 18:49
useServerRender React hook that fetches DOM from the server and places it (dangerously) into the view. Helpful for migrating legacy applications
// I put this in app/index.js but you do you!
import React, { Suspense, lazy } from "react";
import PropTypes from "prop-types";
import { Route, Switch } from "react-router-dom";
import { SharedProvider } from "../../../modules/something/context"; // to easily share state without going full redux
import SharedHeader from "../../widgets/employees/Header"; // some shared header
import SomeMenu from "./SomeMenu"; // some shared navigation
import { ThreeDotLoader } from "../../shared"; // simple loader
@danielpowell4
danielpowell4 / google_sheet_report_writer.rb
Last active November 15, 2023 11:37
Write reports straight to google sheets! We use this in our Rails app to run queries and share the data outside the app.
require 'google/apis/sheets_v4'
require 'google/apis/drive_v3'
require 'googleauth'
require 'fileutils'
class GoogleSheetReportWriter
def initialize(notification_email:)
@creds = build_credentials
@notification_email = notification_email
end