javascript.snippets

extends ecmascript

# ==========================================
# React Snippets
#

snippet R:cc "React Class-Component template" b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import memoize from 'memoize-one';

class ${1:CComponent} extends Component {
	state = {
		mappedData: [],
		isLoading: true,
		isError: false,
	};
	isStale = true;

	memoizedToggle = raw => {
		this.isStale = true;
		return true;
	}

	componentDidMount() {
		const { ${2:data} } = this.props;

		memoizedToggle($2);
		this.prepareData();
	}

	componendDidUpdate(prevProps, prevState, snapshot) {
		const { ${2:data} } = this.props;

		memoizedToggle($2);

		if (this.isStale) {
			this.prepareData();
			this.isStale = false;
		}
	}

	render() {
		const { mappedData, isLoading, IsError } = this.state;
		const { data } = this.props;

		return (<${5}>
			{mappedData.map(dataset => {
				return (<>
					$0
				</>);
			})}
		</$5>);
	}

	prepareData = () => {
		const { $2 } = this.props;

		try {
			const mappedData = this.transformData($2);

			this.setState({ mappedData });
		}
		catch (e) {
			this.setState({ isError: e });
		}
		finally {
			this.setState({ isLoading: false })
		}
	}

	transformData = jsonData => {
		if (!jsonData || !jsonData.length) {
			throw new Error("Empty Data Object!");
		}

		return jsonData.map((el, i, arr) => {
			const transformee = {

			};

			return transformee;
		});
	}
}

$1.propTypes = {
	$2: PropTypes.shape({

	}).isRequired,
}

$1.defaultProps = {
	$2: {

	}
}

export default $1;
endsnippet

snippet R:ccf "React Class-Component template with data fetch" b
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import memoize from 'memoize-one';

class ${1:CComponent} extends Component {
	state = {
		mappedData: [],
		isError: false,
		isLoading: false,
	};
	isStale = false;

	memoizedToggle = memoize(${2:fetchConfig} => {
		this.isStale = true;
		return true;
	})

	componentDidMount() {
		const { $2 } = this.props;

		memoizedToggle($2);

		this.fetchData($2);
	}

	componendDidUpdate(prevProps, prevState, snapshot) {
		const { $2 } = this.props;

		memoizedToggle($2);

		if (this.isStale) {
			await this.fetchData($2);
			this.isStale = false;
		}
	}

	render() {
		const { mappedData } = this.state;

		return (<${3}>
			{mappedData.map(dataset => {
				return (<>
					$0
				</>);
			})}
		</$3>);
	}

	fetchData = async ({
		url,
		verb = 'GET',
		respDataType = 'application/json',
		body = null,
	}) => {
		const headers = new Headers();
		headers.append('Content-Type', respDataType);

		const request = new Request(
			url,
			{
				method: verb,
				headers,
				mode: 'cors',
				cache: 'default',
			}
		);

		let mappedData = [];

		try {
			const response = await fetch(request);

			if (!response.ok) {
				throw {
					fetch: `${response.status}: ${response.statusText}`,
					httpStatus: response.status,
			}

			const jsonData = await response.json();
			mappedData = this.transformData(jsonData);

			this.setState({ mappedData });
		}
		catch (e) {
			if (e.stack) {
				console.warn(e.stack);
			} else {
				this.setState({ isError: e });
			}
		}
		finally {
			this.setState({ isLoading: false });
		}
	}

	transformData = jsonData => {
		return jsonData.map((el, i, arr) => {
			const transformee = {

			};

			return transformee;
		});
	}
}

$1.propTypes = {
	$2: PropTypes.shape({
		url: PropTypes.string.isRequired,
		verb: PropTypes.oneOf(['GET', 'POST']),
		respDataType: PropTypes.string,
		body: PropTypes.object,
	}).isRequired,
}

$1.defaultProps = {
}

export default $1;
endsnippet

snippet R:fc "function component " b
import React, { useState } from 'react'

const transformData = jsonData => {
	if (!jsonData || !jsonData.length) {
		throw new Error("Empty Data Object!");
	}

	return jsonData.map(dataset => {
		const transformee = {

		};

		return transformee;
	});
}

const ${1:fComponent} = props => {
	const [ mappedData, setMappedData ] = useState([]);
	const [ isLoading, setIsLoading ] = useState(true);
	const [ isError, setIsError ] = useState(false);
	const { data } = props;

	useEffect(() => {
		try {
			const mappedData = transformData(data);

			setMappedData(mappedData);
		}
		catch (e) {
			setMappedData([]);
			setIsError(true);
		}
		finally {
			setIsLoading(false);
		}
	}, []);

	if (isError !== false) {
		isError.stack && console.warn(isError.stack);

		return (<p>
			Data transformation failed:
			{isError.message}
		</p>);
	}

	if (isLoading) {
		return (<>
			$2
		</>);
	}

	return (<$3>
		{({ mappedData }) => mappedData.map(dataset => (<>
			$0
		</$3>))}
	</>);
}

export default $1;
endsnippet

snippet R:fcf "function component with fetch" b
import React, { useState, useEffect } from 'react'

const fetchData = async ({
	url,
	verb = 'GET',
	respDataType = 'application/json',
	body = null,
}, setData, setLoading, setError) => {
	setLoading(true);
	setError({ fetch: null });

	const headers = new Headers();
	headers.append('Content-Type', respDataType);

	const req = new Request(
		url,
		{
			method: verb,
			headers,
			mode: 'cors',
			cache: 'default',
		}
	);

	try {
		const response = await fetch(req);

		if (!response.ok) {
			throw {
				fetch: `${response.status}: ${response.statusText}`;
				httpStatus: response.status,
			};
		}

		const mappedData = transformData(await response.json());

		setData(mappedData);
  }
	catch (e) {
		if (e.stack) {
			console.warn(e.stack);
		} else {
			setError(e);
		}
	}
	finally {
		setLoading(false);
	}
}

const transformData = jsonData => {
	return jsonData.map(dataset => {
		const transformee = {

		};

		return transformee;
	});
}

const ${1:fComponent} = props => {
	const [ mappedData, setMappedData ] = useState([]);
	const [ isLoading, setIsLoading ] = useState(true);
	const [ isError, setIsError ] = useState({
		fetch: null,
		httpStatus: null,
	});
	const { fetch } = props;

	useEffect(fetchData.bind(
		null,
		fetch,
		setMappedData,
		setIsLoading,
		setIsError
	), [fetch.url]);

	if (!isError.httpStatus) {
		let errorOrigin = '';

		switch (isError.httpStatus.toString()[0]) {
			case "4":
				errorOrigin = 'Client';
				break;
			case "5":
				errorOrigin = 'Server';
				break;
			default:
				errorOrigin = 'Moved';
		}

		return (<p>
			{errorOrigin} Error: {isError.httpStatus}
		</p>);
	}

	if (isLoading) {
		return (<>
			$2
		</>);
	}

	return (<$3>
		{({ mappedData }) => mappedData.map(dataset => (<>
			$0
		</$3>))}
	</>);
}

export default $1;
endsnippet

snippet sfce "simple function component export (no props)" b
import React from 'react'

const ${1:`!v expand('%:t:r')`} = () => {
	return null$0
}

export default $1
endsnippet

snippet ffce "forwarded function component export" b
import React, { forwardRef } from 'react'

const $1 = forwardRef(function ${1:`!v expand('%:t:r')`}(props, ref) {
	return (
		<div ref={ref}>$0
		</div>
	)
})

export default $1
endsnippet

snippet rcf "react class function" b
$1 = (${2:e}) => {
	$3
}
endsnippet

# ==========================================
# Component Specs and Lifecycle Section
#
snippet sdp "static default props" b
static defaultProps = {
	$1
}
endsnippet

snippet cdp "component default props" b
${1:`!v expand('%:t:r')`}.defaultProps = {
	$2
}
endsnippet

snippet spt "static prop types" b
static propTypes = {
	${1:className}: ${2:PropTypes.string},$0
}
endsnippet

snippet cpt "component prop types" b
${1:`!v expand('%:t:r')`}.propTypes = {
	${2:className}: ${3:PropTypes.string},$0
}
endsnippet

snippet gds "get derived state from props" b
static getDerivedStateFromProps(nextProps, prevState) {
	return ${1:null}$0
}
endsnippet

snippet gde "get derived state from error" b
static getDerivedStateFromError(error) {
	return ${1:null}$0
}
endsnippet

snippet cdm "component did mount" b
componentDidMount() {
	$1
}
endsnippet

snippet scu "should component update" b
shouldComponentUpdate(nextProps, nextState) {
	return ${1:true}$0
}
endsnippet

snippet gsbu "get snapshot before update" b
getSnapshotBeforeUpdate(prevProps, prevState) {
	return ${1:null}$0
}
endsnippet

snippet cdu "component did update" b
componentDidUpdate(prevProps, prevState${1:, snapshot}) {
	$0
}
endsnippet

snippet cdc "component did catch" b
componentDidCatch(error, info) {
	$0
}
endsnippet

snippet cwum "component will unmount" b
componentWillUnmount() {
	$1
}
endsnippet

# ==========================================
# Deprecated Lifecycle Section
#
snippet cwm "component will mount" b
componentWillMount() {
	$1
}
endsnippet

snippet cwrp "component will receive props" b
componentWillReceiveProps(nextProps) {
	$1
}
endsnippet

snippet cwu "component will update" b
componentWillUpdate(nextProps, nextState) {
	$3
}
endsnippet


# ==========================================
# Hooks and effects
#

snippet useS "useState()" b
const [$1, set$3`!p snip.rv=upperfirst(t[1])`] = useState($2)
endsnippet

snippet useE "useEffect()" b
useEffect(() => {
	$0
}, [$1])
endsnippet

snippet useEA "useEffect() async" b
useEffect(() => {
	let cancelled = false

	;(async function ${4:doWork}() {
		${1:// async work here}
		if (cancelled) {
			return
		}

		$2
	})()

	return () => {
		cancelled = true
	}
}, [$3])
endsnippet

snippet useC "useContext()" b
const ${1:context} = useContext($2)
endsnippet

snippet useRed "useReducer(reducer, initialValue)" b
const [${3:state}, ${4:dispatch}] = useReducer(${1:reducer}, ${2:null})
endsnippet

snippet useCB "useCallback(fn, inputs)" b
const ${1:callback} = useCallback(($2) => ${3:{
	$4
}}, [$5])
endsnippet

snippet useM "useMemo(fn, inputs)" b
const ${1:memoized} = useMemo(() => ${2:{
	$3
}}, [$4])
endsnippet

snippet useR "useRef(defaultValue)" b
const ${1:ref} = useRef(${2:null})
endsnippet

snippet useI "useImperitiveHandle(ref, createHandle, [inputs])" b
useImperitiveHandle(${1:ref}, ${4:() => ({
	$2
})}, ${5:[$3]})
endsnippet

snippet useL "useLayoutEffect()" b
useLayoutEffect(() => {
	$0
}, [$1])
endsnippet

snippet useDV "useDebugValue(value)" b
useDebugValue(${1:null})
endsnippet

# ==========================================
# "Inline" versions of hooks
#

priority -1
snippet useC "useContext()" w
useContext$2($1)
endsnippet

snippet useCB "useCallback(fn, inputs)" w
useCallback(($1) => ${2:{
	$3
}}, [$4])
endsnippet

snippet useM "useMemo(fn, inputs)" w
useMemo(() => ${1:{
	$2
}}, [$3])
endsnippet

snippet useR "useRef(defaultValue)" w
useRef$2(${1:null})$0
endsnippet

priority 0

# ==========================================
# Other useful react/redux snippets
#

snippet mc "mirrored const"
const $1 = '$1'
endsnippet

snippet useD "useDispatch" b
const dispatch = useDispatch()
endsnippet

snippet useSL "useSelector(selector)" b
const ${1:value} = useSelector(${2:state => $3})
endsnippet

snippet reft "export type Name = Ref<E | null>" b
export type $1 = Ref<${3:HTML{$2}Element} | null>$0
endsnippet

snippet mro "export type Name = MutableRefObject<E | null>" b
export type $1 = MutableRefObject<${3:HTML{$2}Element} | null>$0
endsnippet

snippet refcb "export type Name = RefCallback<E | null>" b
export type $1 = RefCallback<${3:HTML{$2}Element} | null>$0
endsnippet

priority -1
snippet useD "useDispatch" b
useDispatch()
endsnippet

snippet useSL "useSelector(state)" w
useSelector((${1:state => $2}))
endsnippet

snippet useAS "useSelector(state)" w
useAppSelector(${1:state => $2})
endsnippet

snippet reft "Ref<E | null>" w
Ref<${2:HTML{$1}Element} | null>$0
endsnippet

snippet mro "MutableRefObject<E | null>" w
MutableRefObject<${2:HTML{$1}Element} | null>$0
endsnippet

snippet refcb "Ref<E | null>" w
RefCallback<${2:HTML{$1}Element} | null>$0
endsnippet

priority 0

# ==========================================
# redux toolkit snippets
#

snippet cs "createSlice()" b
const { actions, reducer } = createSlice({
	name: "${1:`!v expand('%:t:r')`}",
	initialState: $2,
	reducers: {
		$0
	}
})
endsnippet

snippet ecs "export createSlice()" b
import { createSlice } from "@reduxjs/toolkit"

const { actions, reducer } = createSlice({
	name: "${1:`!v expand('%:t:r')`}",
	initialState: $2,
	reducers: {
		$3: (state) => state,
	}
})

export const { $3 } = actions

export default reducer
endsnippet

snippet cpr "create prepare reducer" b
$1: {
	reducer(state, action) {
		$0
	},
	prepare($2) {
		return { payload: { $3 } }
	}
}
endsnippet

snippet cat "create async thunk" b
export const $1 = createAsyncThunk("$2$1", async ($3) => {
	$0
})
endsnippet

priority -1

snippet cat "create async thunk (inline)" w
createAsyncThunk("$1", async ($2) => {
	$0
})
endsnippet

priority 0

# ==========================================
# General Built-Ins
#

snippet /** "jsdoc comment" b
/**
 * $0
 */
endsnippet

# ==========================================
# Prop Types Section
#

# Inline prop types
snippet pt.a "PropTypes.array" w
PropTypes.array
endsnippet

snippet pt.ar "PropTypes.array.isRequired" w
PropTypes.array.isRequired
endsnippet

snippet pt.b "PropTypes.bool" w
PropTypes.bool
endsnippet

snippet pt.br "PropTypes.bool.isRequired" w
PropTypes.bool.isRequired
endsnippet

snippet pt.f "PropTypes.func" w
PropTypes.func
endsnippet

snippet pt.fr "PropTypes.func.isRequired" w
PropTypes.func.isRequired
endsnippet

snippet pt.nu "PropTypes.number" w
PropTypes.number
endsnippet

snippet pt.nur "PropTypes.number.isRequired" w
PropTypes.number.isRequired
endsnippet

snippet pt.o "PropTypes.object" w
PropTypes.object
endsnippet

snippet pt.or "PropTypes.object.isRequired" w
PropTypes.object.isRequired
endsnippet

snippet pt.s "PropTyes.string" w
PropTypes.string
endsnippet

snippet pt.sr "PropTyes.string.isRequired" w
PropTypes.string.isRequired
endsnippet

snippet pt.no "PropTypes.node" w
PropTypes.node
endsnippet

snippet pt.nor "PropTypes.node.isRequired" w
PropTypes.node.isRequired
endsnippet

snippet pt.e "PropTypes.element" w
PropTypes.element
endsnippet

snippet pt.er "PropTypes.element.isRequired" w
PropTypes.element.isRequired
endsnippet

snippet pt.ao "PropTypes.arrayOf()" w
PropTypes.arrayOf(${1:PropTypes.string})
endsnippet

snippet pt.aor "PropTypes.arrayOf().isRequired" w
PropTypes.arrayOf(${1:PropTypes.string}).isRequired
endsnippet

snippet pt.io "PropTypes.instanceOf()" w
PropTypes.instanceOf(${1:PropTypes.string})
endsnippet

snippet pt.ior "PropTypes.instanceOf().isRequired" w
PropTypes.instanceOf(${1:PropTypes.string}).isRequired
endsnippet

snippet pt.oo "PropTypes.objectOf()" w
PropTypes.objectOf(${1:PropTypes.string})
endsnippet

snippet pt.oor "PropTypes.objectOf().isRequired" w
PropTypes.objectOf(${1:PropTypes.string}).isRequired
endsnippet

snippet pt.one "PropTypes.oneOf([])" w
PropTypes.oneOf(['$1'$2])
endsnippet

snippet pt.oner "PropTypes.oneOf([]).isRequired" w
PropTypes.oneOf(['$1'$2]).isRequired
endsnippet

snippet pt.onet "PropTYpes.oneOfType([])" w
PropTypes.oneOfType([
	$1
])
endsnippet

snippet pt.onetr "PropTYpes.oneOfType([]).isRequired" w
PropTypes.oneOfType([
	$1
]).isRequired
endsnippet

snippet pt.sh "PropTypes.shape" w
PropTypes.shape({
	$1
})
endsnippet

snippet pt.shr "PropTypes.shape.isRequired" w
PropTypes.shape({
	$1
}).isRequired
endsnippet