jimkeller’s gists

jimkeller / layout.js

Created July 18, 2024 15:16

Next.js Google Analytics module multiple streams bug

	import React from "react";
	import { GoogleAnalytics } from '@next/third-parties/google';

	export default async function RootLayout({
	children,
	params,
	}) {

	return (
	<html lang='en'>

jimkeller / update_module_core_version_to_10.php

Last active May 29, 2023 19:35

	<?php


	$module_search_dir = realpath(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'web/modules/custom');

	if ( !empty($argv[1]) ) {
	$module_search_dir = realpath($argv[1]);
	}

	$module_dir = new RecursiveDirectoryIterator($module_search_dir);

jimkeller / update_core_module_version_to_9.php

Created January 15, 2023 00:12

	<?php


	$module_search_dir = realpath(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'web/modules/custom');

	if ( !empty($argv[1]) ) {
	$module_search_dir = realpath($argv[1]);
	}

	$module_dir = new RecursiveDirectoryIterator($module_search_dir);

jimkeller / reactQueryWaitExample-3.js

Last active October 14, 2022 01:48

React.js example for watching returned react-query data

	useEffect(
	() => {
	//
	// Here is where you perform some action based on the returned data
	//
	}, [data, isRefetching]
	);

jimkeller / reactQueryWaitExample-2.js

Created October 14, 2022 01:44

Example of using refetch() in react-query

	/* Call refetch when inputValue changes */
	useEffect(
	() => {
	refetch();
	}, [inputValue]
	);

jimkeller / reactQueryWaitExample-1.js

Created October 14, 2022 01:39

react-query example for temporarily disabled query

	/*
	* call the useQuery hook, but leave the
	* 'enabled' flag to false. Doing so prevents the query
	* from running immediately on component mount.
	*/
	const { data, refetch, isError, isRefetching } = useQuery(
	['search_results', inputValue],
	async () => {
	return await axios.get(`/path/to/results/api/${inputValue}`).catch((err) => { //handle error here })
	},

jimkeller / debug-example.js

Last active September 29, 2022 02:18

NPM debug module in browser

	import DebugModule from "debug";

	//create a debug logger for my-component inside my-app
	const debug = DebugModule("my-app:my-component");

	//enable the my-app namespace for debugging
	DebugModule.enable("my-app:*");

	debug("This message will print now since my-app:* namespace is enabled for debugging");

jimkeller / EmployeeDataClient.js

Created September 29, 2022 02:01

Basic client service for use with React

	import axios from "axios";
	import regeneratorRuntime from "regenerator-runtime"; // eslint-disable-line no-unused-vars

	const EmployeeDataClient = {

	getResults: async(employee_id, endpoint_base_url) => {

	endpoint_base_url = "http://localhost:3035/employees"

	const response = await axios.get(`${endpoint_base_url}/${employee_id}`)

jimkeller / EmployeeSearchForm.js

Created September 29, 2022 01:55

EmployeeSearchForm using depdendency-injected service

	function EmployeeSearchForm() {

	const employee_data_client = useEmployeeDataClient();
	const loadResults = async(employee_id) => {
	return await employee_data_client.getResults(employee_id);
	}

	/* Below here, the rest of the component; e.g. rendering a form that calls
	loadResults */
	}

jimkeller / ContextWrappedComponent.js

Created September 29, 2022 01:49

Wrapping a React component in a custom context provider

	/**
	* This file will hold the Menu that lives at the top of the Page, this is all rendered using a React Component...
	*
	*/
	import React, { useState } from 'react';
	import EmployeeSearchForm from './EmployeeSearchForm';
	import EmployeeDataProvider from "../services/EmployeeDataProvider";

	function Header() {