Skip to content

Instantly share code, notes, and snippets.

Avatar
👁️
What you look for is what you find.

Alfon alfonmga

👁️
What you look for is what you find.
View GitHub Profile
View small-logger.js
const { format } = require("date-fns");
/**
* logger is a small tool to centralize the logging of the application
* [@params](/params) {String} src - this will be prefixed before each message. It can be any string
* that would be significant when you read them in the logs (often in this code base it's the name
* of the file from where the log is sent)
*/
const logger = (src) => {
return {
@alfonmga
alfonmga / Checkbox.tsx
Created Nov 5, 2020
React Final Form + Chakra UI
View Checkbox.tsx
import {
Checkbox,
FormControl,
FormControlProps,
FormErrorMessage,
// FormLabel,
InputProps,
} from "@chakra-ui/core"
import React, { PropsWithoutRef } from "react"
import { useField } from "react-final-form"
@alfonmga
alfonmga / LazyLoadCSS.tsx
Created Oct 18, 2020
Next.js lazy load / preload CSS
View LazyLoadCSS.tsx
import NextHead from 'next/head'
import { useEffect, useRef, useState } from 'react'
export type LazyLoadCSSProps = {
href: string
}
let hydrated = false
const LazyLoadCSS: React.FC<LazyLoadCSSProps> = ({ href }) => {
@alfonmga
alfonmga / Image.tsx
Created Oct 17, 2020
DatoCMS Image component
View Image.tsx
import React, { useCallback, useState } from "react";
import "intersection-observer";
import { useInView } from "react-intersection-observer";
const isSsr = typeof window === "undefined";
const universalBtoa = isSsr ? (str: string) => Buffer.from(str.toString(), 'binary').toString('base64') : window.btoa;
const isIntersectionObserverAvailable = isSsr
? false
: !!(window as any).IntersectionObserver;
View poc.js
await window.Snipcart.api.cart.items.add({
id: product.id,
name: product.name,
price: 10,
url: '/',
description: product.description,
image: product.imageUrl,
customFields: [
{
name: 'Frame color',
@alfonmga
alfonmga / eventemitter.service.ts
Last active Aug 2, 2020
EventEmitter3 wrapper
View eventemitter.service.ts
import EventEmitter from "eventemitter3"
const eventEmitter = new EventEmitter()
const Emitter = {
on: (event: any, fn: any) => eventEmitter.on(event, fn),
once: (event: any, fn: any) => eventEmitter.once(event, fn),
off: (event: any, fn: any) => eventEmitter.off(event, fn),
emit: (event: any, payload: any) => eventEmitter.emit(event, payload),
}
View RegisterWithCredentialsForm.tsx
const RegisterWithCredentialsForm: FC<{
disableGoogleRegistration: () => void
enableGoogleRegistration: () => void
}> = ({ disableGoogleRegistration, enableGoogleRegistration }) => {
const [errMsg, setErrMsg] = React.useState("")
const [isRecaptchaRendered, setIsRecaptchaRendered] = React.useState(false)
const { i18n, t } = useTranslation()
const [registerUser] = useRegisterWithCredentialsMutation()
const recaptchaRef = React.useRef<Reaptcha>(null)
const { closeSnackbar } = useSnackbar()
View async-lodash.ts
const _async = require('async');
const _ = require('lodash');
public doSomething = async(num) : Promise<any> => {
return num*num + 1;
}
public async getResults() {
let results = new Array<any>();
let tasks = [];
View gist:567205c671cfbe8071523ce362874dac
Name: Flash
Serial: eNrzzU/OLi0odswsqnHLSSzOqDGoca7JKCkpsNLXLy8v1ytJTczVLUotKNFLzs8FAJHYETc=
if anyone wants to thank ETH: 0x527c2aB55b744D6167dc981576318af96ed26676
Thank you!
View rxjs-with-react.js
// src/Component/Protected/Protected.js
import React, { Component } from 'react';
import { Subject, from } from 'rxjs';
import { filter, flatMap, debounceTime } from 'rxjs/operators';
import Auth0 from '../../Auth/Auth';
class Protected extends Component {
input$ = new Subject();
state = { message: '', user: null };