Skip to content

Instantly share code, notes, and snippets.

View opauloh's full-sized avatar
🔬
Research, Study, Learn, Apply -> Restart the process

Paulo Silva opauloh

🔬
Research, Study, Learn, Apply -> Restart the process
View GitHub Profile
@opauloh
opauloh / enforce_server_async_import_rule.ts
Last active November 14, 2023 17:45
ES Lint Rule to Enforce Server/Index files to import async Plugins
// Note: this is a very basic version, it only checks for files in the server/index.ts path and for imports that ends with Plugin such as TestPlugin
import type { Rule } from 'eslint';
export const EnforceServerPluginAsyncImportRule: Rule.RuleModule = {
meta: {
fixable: 'code',
docs: {
url: 'https://github.com/elastic/kibana/blob/main/packages/kbn-eslint-plugin-imports/README.mdx',
},
@opauloh
opauloh / README.md
Last active January 1, 2025 16:28 — forked from sorindragan/index.js
Simple node.js http server

Make sure you have a modern-ish version of Node.js installed.

On your CLI type:

npx https://gist.github.com/opauloh/4c615cc5bfec6f8891a94a9ea6c0d090

Connect to it from a client, e.g. netcat or similar: nc localhost 3000

@opauloh
opauloh / README.md
Last active September 18, 2023 18:42 — forked from kfox/README.md
TCP echo server for Node.js

TCP echo server for Node.js

Usage

  1. Make sure you have a modern-ish version of Node.js installed.
  2. Type npx https://gist.github.com/opauloh/a01eba2c747ff2594c28bc852c9ea803
  3. Connect to it from a client, e.g. netcat or similar: nc localhost 9000
@opauloh
opauloh / react-query-optimistic-add-todo-error-state.ts
Created December 2, 2021 14:09
Example of add todo with react query, using Optmistic UI plus controlling error state
// Add a todo
const { mutate: createMutate } = useMutation(postAddTodo, {
// When mutate is called:
onMutate: async (todo) => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries('todos');
// Build a new todo object, only the necessary fields to show in the UI
const newTodo: Todo = {
_id: todo.id,
@opauloh
opauloh / react-query-enhanced-optimistic-add-todo.ts
Last active August 21, 2023 15:06
Example of Add Todo Mutation with React Query with Optimistic UI, Optimistically updating only the affected item in the list instead of refetching
// Add a todo
const { mutate: createMutate } = useMutation(postAddTodo, {
// When mutate is called:
onMutate: async (todo) => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries('todos');
// Build a new todo object, only the necessary fields to show in the UI
const newTodo: Todo = {
_id: todo.id,
@opauloh
opauloh / react-query-optimistic-add-todo.ts
Created December 2, 2021 13:07
Example of Add Todo Mutation with React Query with Optimistic UI
const { mutate: createMutate } = useMutation(postAddTodo, {
// When mutate is called:
onMutate: async (todo) => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries('todos');
// Snapshot the previous value
const previousTodos = queryClient.getQueryData('todos');
// Build a new todo object, only the necessary fields to show in the UI
@opauloh
opauloh / react-query-simple-add-todo.ts
Created December 2, 2021 13:04
Example of a Simple Add Todo Mutation with React Query
// Add a todo
const { mutate: createMutate } = useMutation(postAddTodo, {
onError: (error: any, variables) => {
notifications.toasts.addDanger(
`Error: ${error.message} when attempting to insert ${variables.description}`
);
},
onSuccess: (res: any) => {
// refetch the todo list:
queryClient.invalidateQueries('todos')
@opauloh
opauloh / pascals-triangle.js
Created June 4, 2021 14:14
Pascal's Triangle
const generateTriangleTemplate = (rowsQty) => {
return [...Array(rowsQty)]
.reduce((prev, _, idx) => {
prev = prev.concat([[...Array(idx + 1)]]);
return prev;
}, [])
.map((row) => {
let lastColumn = row.length - 1;
row[0] = 1;
@opauloh
opauloh / PropGetterExample.jsx
Last active June 2, 2021 17:37
Prop Getter Example
/*
Reference: https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters
*/
const PropGetterExample = ({ initialValue, handleOnChange, handleOnBlur }) => {
const getProps = (slug) => ({
value: initialValue[slug],
onChange: (val) => handleOnChange(val, slug),
onBlur: handleOnBlur,
name: slug,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">