Skip to content

Instantly share code, notes, and snippets.

View jimkeller's full-sized avatar

jimkeller

7 followers · 0 following
View GitHub Profile
@jimkeller
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
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
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
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
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
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
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
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
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
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() {