Skip to content

Instantly share code, notes, and snippets.

@danielpowell4
danielpowell4 / DisplayLocalStorage.js
Last active Aug 6, 2021
react component to read and display localStorage in a _more_ human readable manner
View DisplayLocalStorage.js
import * as React from "react";
const DisplayLocalStorage = () => {
let localStorageState = {};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
let value;
try {
value = JSON.parse(localStorage.getItem(key));
@danielpowell4
danielpowell4 / ClientSideFiltering.js
Last active Jun 9, 2021
abstracted, client side filtering with location.search navigation via hooks
View ClientSideFiltering.js
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 Oct 9, 2020
helpers for debugging webpacker + rails system test for minitest including printing to the console and disabling uglify
View application_system_test_case.rb
# 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 Sep 29, 2020
vanilla JS password visibility toggle
View passwordVisibilityToggle.js
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 Sep 3, 2020
Basically FormikPersist but saved on a server not in device-specific storage
View Autosave.js
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 Jul 19, 2019
CanCanCan ability delegator. Like alias_action but across model classes
View cancancan_ability_delegator.rb
# 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
useServerRender React hook that fetches DOM from the server and places it (dangerously) into the view. Helpful for migrating legacy applications
View Router.js
// 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 Oct 26, 2018
Write reports straight to google sheets! We use this in our Rails app to run queries and share the data outside the app.
View google_sheet_report_writer.rb
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
@danielpowell4
danielpowell4 / AnimatedComponent.jsx
Last active Aug 9, 2018
Example reusable scss mixin of a slide in animation for a React component using CSSTransitionGroup
View AnimatedComponent.jsx
import React from "react";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import SomeOtherComponentOrChild from "./SomeOtherComponentOrChild" // more likely defined inline
// Great for list items or quick, inline forms!
const AnimatedComponent = props =>
<ReactCSSTransitionGroup
transitionName="transition-name" // creates class that is passed to scss mixin
transitionEnterTimeout={400}
@danielpowell4
danielpowell4 / starterAuth.js
Last active Jul 6, 2018
react-router and several other demos offer up a "fakeAuth". This is a starterAuth that sends an email and password to an external API and then stores the returned auth_token JWT in localStorage. Main benefit of doing so is to persist login between page refreshes.
View starterAuth.js
import fetch from "cross-fetch";
const apiUrl = "//localhost:5000"; // or where ever your api lives!
const checkStatus = response => {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(`${response.statusText}`);
error.status = response.statusText;
error.response = response;