csen ⟐ csenio

## ui_patterns.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                csenio
                / ui_patterns.md
            
            
              Created
              July 30, 2019 14:37
            
              
                Ui patterns that make stuff seem snappier and not slower
              
          
    qwe

  
## seo.js
export default function Seo({title, description, image, type, structuredData}) {
  const {asPath} = useRouter()

  const titleTemplate = `${title} | Staiy`

  return (
    <Head>
      {/* <!-- Primary Meta Tags --> */}
      <title>titleTemplate</title>
      <meta name="title" content={titleTemplate} />

## useFetch.js
import {useState, useReducer, useEffect} from 'react'
import axios from 'axios'
import {toastAlert, getError} from '@helpers'

const dataFetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return {
        ...state,
        isLoading: true,

## useStatus.js
import {useReducer, useCallback} from 'react'
import useIsMounted from './useIsMounted'

function useStatus() {
  const isMounted = useIsMounted()
  const [{status, error}, setState] = useReducer((s, a) => ({...s, ...a}), {
    status: 'rest',
    error: null,
  })

## useLockBodyScroll.js
import {useEffect} from 'react'

// lock body scroll when modals are open 🔥
// if isLocked isn't specified it will lock the page when mounted
function useLockBodyScroll(isLocked = true) {
  useEffect(() => {
    const originalStyle = window.getComputedStyle(document.body).overflow
    if (isLocked) {
      document.body.style.overflow = 'hidden'
    }

## useLocalStorage.js
import {useState} from 'react'

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      return initialValue
    }

## useImmerReducer
import {useReducer, useCallback} from 'react'
import produce from 'immer'

const useImmerReducer = (reducer, initialState) => {
  const cachedReducer = useCallback(produce(reducer), [reducer])
  return useReducer(cachedReducer, initialState)
}

export default useImmerReducer

## useUid.js
import {useState, useEffect} from 'react'

let _id = 0
const genId = () => ++_id

export default function useId() {
  const [id, setId] = useState(null)
  useEffect(() => setId(genId()), [])
  return id
}

## useDebounce.js
import {useState, useEffect} from 'react'

export default function useDebounce(value) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, 500)
    return () => {

## fakeNextRouter.js
import Router, * as router from 'next/router'
const mockedRouter = {
  push: path => {
    action('navigated to')(path)
    return new Promise((reject, resolve) => resolve())
  },
  replace: path => {
    action('replaced url to')(path)
    return new Promise((reject, resolve) => resolve())
  },
	export default function Seo({title, description, image, type, structuredData}) {
	const {asPath} = useRouter()

	const titleTemplate = `${title} \| Staiy`

	return (
	<Head>
	{/* <!-- Primary Meta Tags --> */}
	<title>titleTemplate</title>
	<meta name="title" content={titleTemplate} />
	import {useState, useReducer, useEffect} from 'react'
	import axios from 'axios'
	import {toastAlert, getError} from '@helpers'

	const dataFetchReducer = (state, action) => {
	switch (action.type) {
	case 'FETCH_INIT':
	return {
	...state,
	isLoading: true,
	import {useReducer, useCallback} from 'react'
	import useIsMounted from './useIsMounted'

	function useStatus() {
	const isMounted = useIsMounted()
	const [{status, error}, setState] = useReducer((s, a) => ({...s, ...a}), {
	status: 'rest',
	error: null,
	})
	import {useEffect} from 'react'

	// lock body scroll when modals are open 🔥
	// if isLocked isn't specified it will lock the page when mounted
	function useLockBodyScroll(isLocked = true) {
	useEffect(() => {
	const originalStyle = window.getComputedStyle(document.body).overflow
	if (isLocked) {
	document.body.style.overflow = 'hidden'
	}
	import {useState} from 'react'

	function useLocalStorage(key, initialValue) {
	const [storedValue, setStoredValue] = useState(() => {
	try {
	const item = window.localStorage.getItem(key)
	return item ? JSON.parse(item) : initialValue
	} catch (error) {
	return initialValue
	}
	import {useReducer, useCallback} from 'react'
	import produce from 'immer'

	const useImmerReducer = (reducer, initialState) => {
	const cachedReducer = useCallback(produce(reducer), [reducer])
	return useReducer(cachedReducer, initialState)
	}

	export default useImmerReducer
	import {useState, useEffect} from 'react'

	let _id = 0
	const genId = () => ++_id

	export default function useId() {
	const [id, setId] = useState(null)
	useEffect(() => setId(genId()), [])
	return id
	}
	import {useState, useEffect} from 'react'

	export default function useDebounce(value) {
	const [debouncedValue, setDebouncedValue] = useState(value)

	useEffect(() => {
	const handler = setTimeout(() => {
	setDebouncedValue(value)
	}, 500)
	return () => {
	import Router, * as router from 'next/router'
	const mockedRouter = {
	push: path => {
	action('navigated to')(path)
	return new Promise((reject, resolve) => resolve())
	},
	replace: path => {
	action('replaced url to')(path)
	return new Promise((reject, resolve) => resolve())
	},