Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Chris Brannen cbrannen9a

🏠
Working from home
Block or report user

Report or block cbrannen9a

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@cbrannen9a
cbrannen9a / Example.js
Last active Nov 12, 2018
Example React Hook
View Example.js
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You have written {count} hooks</p>
<button onClick={() => setCount(count + 1)}>
@cbrannen9a
cbrannen9a / .eslintrc
Created Nov 12, 2018
Example eslint file for react-hooks
View .eslintrc
{
"extends": "react-app",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
}
}
@cbrannen9a
cbrannen9a / partial_fieldValidator2.js
Created Nov 8, 2018
Partial demo of credit card check using Regex and luhnCheck methods
View partial_fieldValidator2.js
const validateCardNumber = (number) => {
var regex = new RegExp("^[0-9]{16}$");
if (!regex.test(number)) { return false; }
return luhnCheck(number);
}
const luhnCheck = (val) => {
var sum = 0;
for (var i = 0; i < val.length; i++) {
View partial_checkout6.js
handleValid = () => {
const { activeStep, validation } = this.state;
if (activeStep === 0 && !validation.hasErrorAddressForm) {
return false;
} else if (activeStep === 2) {
return false;
}
return true;
}
//...
@cbrannen9a
cbrannen9a / partial_formValidator.js
Created Nov 8, 2018
Partial formValidation for addressForm
View partial_formValidator.js
export const formValidator = (validation, area) => {
if (area === 'addressForm') {
return !validation.firstName
|| !validation.lastName
|| !validation.address1
|| !validation.city
|| !validation.zip
|| !validation.country
}
return true;
@cbrannen9a
cbrannen9a / partial_checkout5.js
Created Nov 8, 2018
Partial checkout adding form validation
View partial_checkout5.js
handleFormValidation = () => {
const { validation } = this.state;
this.setState({
validation: {
...validation,
hasErrorAddressForm: formValidator(validation, 'addressForm'),
}
});
}
@cbrannen9a
cbrannen9a / partial_addressForm.js
Created Nov 8, 2018
Partial Address Form with error and helperText
View partial_addressForm.js
function AddressForm(props) {
const { state, handleChange } = props;
return (
<Fragment>
<Typography variant="h6" gutterBottom>
Shipping address
</Typography>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
View partial_fieldValidator.js
export const fieldValidator = (name, value) => {
let valid = false;
let message = '';
switch (name) {
case 'firstName':
valid = value.trim().length > 0;
message = validatorMessage(
valid,
@cbrannen9a
cbrannen9a / partial_checkout4.js
Last active Nov 8, 2018
The handle Change function with second argument in setState call and handleValidation
View partial_checkout4.js
handleChange = (name, area) => event => {
const value = event.target.value;
this.setState({
[area]: {
...this.state[area],
[name]: value
}
}, () => { this.handleValidation(name, value); });
}
@cbrannen9a
cbrannen9a / partial_addressForm.js
Created Nov 8, 2018
Partial Address Form adding value and change handling
View partial_addressForm.js
function AddressForm(props) {
const { state, handleChange } = props;
return (
<Fragment>
<Typography variant="h6" gutterBottom>
Shipping address
</Typography>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
You can’t perform that action at this time.