javascript.snippets

snippet st "console.log"
console.log(${0});
endsnippet

snippet fl "Firebase Function Log"
/*LOG*/ functions.logger.log(${0});
endsnippet

snippet f "Arrow Function"
(${1:arg}) => {
	${0}
}
endsnippet

snippet fn "Empty Function"
function ${1:functionName}() {
	${0}
}
endsnippet

snippet cf "Constant Function"
const ${1:funcName} = () => {
	${0}
}
endsnippet

snippet ef "Export Function"
export function ${1:functionName}() {
	${0}
}
endsnippet

snippet eaf "Export Async Function"
export async function ${1:functionName}() {
	${0}
}
endsnippet

snippet eafa "Export Async Function With Args"
const ${1}DefaultArgs = {
	${2}
};
export async function ${1:functionName}(options = ${1}DefaultArgs) {
	options = { ...${1}DefaultArgs, ...options };
	${0:// todo}
}
endsnippet

snippet ssr "NextJS ServerSide Rendering"
export async function getServerSideProps() {
	return {
		props: {
			//
		},
	};
}
endsnippet

snippet ssg "NextJS ServerSide Generation"
export async function getStaticProps() {
	return {
		props: {
			//
		},
	};
}
endsnippet

snippet rs "res.status"
res.status(${1:200}).send("${2:text}")${0}
endsnippet

snippet af "Async Arrow Function"
async (${1}) => {
	${0}
}
endsnippet

snippet afn "Async Function"
async function ${1:FunctionName}() {
	${0}
}
endsnippet

snippet try "Try Catch"
try {
	//
} catch (e) {
	console.error(e);
}
endsnippet

snippet eh "Error Handler"
return await errorHandler(async () => {
	${0:// Todo}
});
endsnippet

snippet c "Comment Block"
/*
 * ${0}
*/
endsnippet

snippet pm "@param"
@param ${1:parameter}: ${0:description}
endsnippet

# React & JSX

snippet t "Tag"
<${1:div}>
	${2}
</${1}>
${0}
endsnippet

snippet ta "Tag with Attributes"
<${1:div} ${2:className=""}>
	${3}
</${1}>
${0}
endsnippet

snippet ti "Tag Inline"
<${1} />
${0}
endsnippet

snippet br "<br />"
<br />
endsnippet


snippet rrcc "React Redux Class Component" b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styles from './${2:$1}.css';

class ${1:`!v expand('%:t:r')`} extends Component {
	static propTypes = {
		children: PropTypes.node,
		className: PropTypes.string,
		dispatch: PropTypes.func.isRequired,
	};

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div className={styles.base}>
				$3
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {};
}

export default connect(mapStateToProps)($1);
endsnippet

snippet rcc "React Class Component" b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './${2:$1}.css';

class ${1:`!v expand('%:t:r')`} extends Component {
	static propTypes = {
		${2:children: PropTypes.node,
		className: PropTypes.string,}
	};

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<${3:div} className={styles.base}>
				$0
			</$3>
		);
	}
}

export default $1;
endsnippet

snippet rfc "React Functional Component" b
import React from 'react';
import PropTypes from 'prop-types';
import styles from './${2:$1}.css';

function ${1:`!v expand('%:t:r')`}({ $3 }) {
	return (
		<${5:div} className={styles.base}>
			$0
		</$5>
	);
}

$1.defaultProps = {$4};

$1.propTypes = {`!p
props = t[3]
if props:
  snip >> 1
  for prop in props.split(', '):
    snip += prop + ': PropTypes.any,'
`
};

export default $1;
endsnippet

snippet rsc "React Styled Component" b
import styled from 'styled-components';

const ${1:`!v expand('%:t:r')`} = styled.${2:div}\`
	$3
\`;

export default $1;
endsnippet

snippet rsci "React Styled Component Interpolation" b
import styled, { css } from 'styled-components';

const ${1:`!v expand('%:t:r')`} = styled.${2:div}\`${props => css\`
	${3:${props.$4 && \`
		$5
	\`}}
\`}\`;

export default $1;
endsnippet

snippet pp "Get Props"
${props => props.${1}};
endsnippet

snippet cn "className"
className="$1"
endsnippet

snippet dp "Default Props" b
${1:`!v expand('%:t:r')`.}defaultProps = {
	$2
};
endsnippet

snippet set "Set State"
this.setState({
	${1}: ${2}
});
endsnippet

snippet props "Get Property" i
this.props.${1}
endsnippet

snippet state "Get State" i
this.state.${1}
endsnippet

snippet ref "Ref" i
ref={${1:ref} => { this.${2:name} = $1; }}
endsnippet


# Component Lifecycle
snippet cwm "Component Will Mount" b
componentWillMount() {
	$1
}
endsnippet

snippet cdm "Component Did Mount" b
componentDidMount() {
	$1
}
endsnippet

snippet cwrp "Component Will Receive Props" b
componentWillReceiveProps(nextProps) {
	$1
}
endsnippet

snippet scup "Should Component Update" b
shouldComponentUpdate(nextProps, nextState) {
	$1
}
endsnippet

snippet cwup "Component Will Update" b
componentWillUpdate(nextProps, nextState) {
	$1
}
endsnippet

snippet cdup "Component Did Update" b
componentDidUpdate(prevProps, prevState) {
	$1
}
endsnippet

snippet cwu "Component Will Unmount" b
componentWillUnmount() {
	$1
}
endsnippet

snippet ren "Render"
render() {
	return ${1:(
		${2:<div>${3}</div>}
	);}
}
endsnippet


# PropTypes
snippet pt "PropTypes Definition" b
${1:`!v expand('%:t:r')`.}propTypes = {
	${2:className}: ${3:PropTypes.string},
};
endsnippet

snippet  pt.a "PropTypes Array" w
PropTypes.array${1:,}
endsnippet

snippet   pt.b "PropTypes Boolean" w
PropTypes.bool${1:,}
endsnippet

snippet pt.f "PropTypes Function" w
PropTypes.func${1:,}
endsnippet

snippet pt.n "PropTypes Number" w
PropTypes.number${1:,}
endsnippet

snippet pt.o "PropTypes Object" w
PropTypes.object${1:,}
endsnippet

snippet pt.s "PropType String" w
PropTypes.string${1:,}
endsnippet

snippet pt.no "PropTypes Node" w
PropTypes.node${1:,}
endsnippet

snippet pt.e "PropTypes Element" w
PropTypes.element${1:,}
endsnippet

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

snippet pt.one "PropTypes oneOf" w
PropTypes.oneOf(['$2'$3])${1:,}
endsnippet

snippet pt.onet "PropTypes oneOfType" w
PropTypes.oneOfType([
	$2
])${1:,}
endsnippet

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

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

snippet pt.sh "PropTyes Shape" w
PropTypes.shape({
	$2
})${1:,}
endsnippet

snippet ir "isRequired" w
isRequired,
endsnippet

snippet rs "React useState"
const [$1, set${1}] = useState(${0:''})
endsnippet

snippet test "Test"
test("${1:test}", ${2:async}() => {
	${3:// ...}
});
endsnippet

snippet ex "Expect"
expect(${1:1+1}).toBe(${2:2});
endsnippet


snippet route "New Route"
import express from "express";

const ${1:some}Routes = express.Router();

${0:// TODO}

export default ${1:some}Routes;
endsnippet

snippet l "log"
log(${0});
endsnippet

snippet ehs "errorHandlers.silent"
await errorHandlers.silent(async () => {
	${0:// todo}
});
endsnippet

snippet eha "errorHandlers.safe"
await errorHandlers.safe({
	action: async () => {
		${0:// todo}
	},
	teardown: async () => {
		// todo
	},
});
endsnippet