Skip to content

Instantly share code, notes, and snippets.

View rickyalmeidadev's full-sized avatar
👨‍💻
Learning something new everyday

Ricky Almeida rickyalmeidadev

👨‍💻
Learning something new everyday
View GitHub Profile
@rickyalmeidadev
rickyalmeidadev / App.js
Last active April 23, 2022 21:58
Rendering JSON
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import Debugger from './Debugger'
function App() {
const [json, setJson] = useState(null)
useEffect(() => {
axios.get('url').then(response => {
setJson(response.data)
@rickyalmeidadev
rickyalmeidadev / .__init.md
Last active November 1, 2023 10:48
vite + react + @swc/jest
yarn create vite
@rickyalmeidadev
rickyalmeidadev / jest.config.js
Created February 15, 2022 20:10
SWC's transform configuration for Jest
module.exports = {
transform: {
'^.+\\.(t|j)sx?$': [
'@swc/jest',
{
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
@rickyalmeidadev
rickyalmeidadev / jest.config.js
Created February 15, 2022 06:08
svg transformer for jest
module.exports = {
transform: {
'\\.svg$': '<rootDir>/__mocks__/svg-transformer.js',
},
}
@rickyalmeidadev
rickyalmeidadev / server-side-auth.js
Created February 4, 2022 16:45
Server-side authentication higher order functions
import nookies from 'nookies'
class ServerSideAuth {
static #key = 'token'
static #cookies = nookies
static #isAuthenticated = token => {
const response = fetch('http://localhost:3000/api/me', {
headers: {
@rickyalmeidadev
rickyalmeidadev / routing-progress-bar.js
Created January 30, 2022 06:54
Configure routing progress bar in Next.js app
import {Router} from 'next/router'
import NProgress from 'nprogress'
NProgress.configure()
Router.events.on('routeChangeStart', () => NProgress.start())
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())
@rickyalmeidadev
rickyalmeidadev / index.js
Created January 28, 2022 00:14
Finding unintended body overflow
new Array().forEach.call(document.querySelectorAll('*'), element => {
if (element.offsetWidth > document.documentElement.offsetWidth) {
console.log(element)
}
})
@rickyalmeidadev
rickyalmeidadev / get-prefers-color-scheme.js
Last active January 14, 2022 15:27
Example of using attrs method from styled
const getPrefersColorScheme = () => {
if ('matchMedia' in window) {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
return isDark ? 'dark' : 'light';
}
return 'light';
};
export default getPrefersColorScheme;
@rickyalmeidadev
rickyalmeidadev / constructor.ts
Last active January 9, 2022 17:34
Fix timezone offset
const fn = (string: string /* yyyy-mm-dd */): Date => {
const [year, month, day] = string.split('-').map(Number);
const date = new Date(year, month - 1, day);
return date;
};
@rickyalmeidadev
rickyalmeidadev / react-redux.d.ts
Created January 9, 2022 06:56
Override useSelector type definition to recognize your application's state
import type { RootState } from '@app/store';
declare module 'react-redux' {
export function useSelector<TState = RootState, TSelected = unknown>(
selector: (state: TState) => TSelected,
equalityFn?: (left: TSelected, right: TSelected) => boolean,
): TSelected;
}