Ricky Almeida rickyalmeidadev

👨‍💻

Learning something new everyday

Software Developer

rickyalmeidadev / GridList.js

Last active December 17, 2021 00:22

React Native GridList using FlatList

	import * as React from 'react'
	import {FlatList, useWindowDimensions, View} from 'react-native'

	const GridList = ({numColumns, renderItem, spacing, ...props}) => {
	const dimensions = useWindowDimensions()

	return (
	<FlatList
	numColumns={numColumns ?? 2}
	renderItem={(...args) => (

rickyalmeidadev / App.styles.ts

Last active December 25, 2021 01:48

Reactive styles based on user’s color scheme in React Native

	import makeStyles from '@app/helpers/make-styles'

	const useStyles = makeStyles(theme => ({
	container: {
	flex: 1,
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor: theme.bg,
	},
	text: {

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;
	}

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 / 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 / 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 / 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 / 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 / jest.config.js

Created February 15, 2022 06:08

svg transformer for jest

	module.exports = {
	transform: {
	'\\.svg$': '<rootDir>/__mocks__/svg-transformer.js',
	},
	}

rickyalmeidadev / jest.config.js

Created February 15, 2022 20:10

SWC's transform configuration for Jest