Skip to content

Instantly share code, notes, and snippets.

Avatar

Ilya Suzdalnitski suzdalnitski

View GitHub Profile
@suzdalnitski
suzdalnitski / 0_reuse_code.js
Created Jul 15, 2014
Here are some things you can do with Gists in GistBox.
View 0_reuse_code.js
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@suzdalnitski
suzdalnitski / simple_class_component.jsx
Last active Aug 12, 2018
Simple React Class Component
View simple_class_component.jsx
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Hi, {this.props.name}</h1>
</div>
);
}
}
@suzdalnitski
suzdalnitski / simple_functional_component.jsx
Created Aug 12, 2018
Simple Stateless Functional Component
View simple_functional_component.jsx
const MyComponent = ({name}) => (
<div>
<h1>Hi, {name}</h1>
</div>
);
@suzdalnitski
suzdalnitski / complex_form.js
Last active Aug 12, 2018
Complex React Form Component
View complex_form.js
import React from "react";
import { TextField, Button, Grid } from "@material-ui/core";
import axios from 'axios';
class SignupForm extends React.Component {
state = {
email: "",
emailError: "",
password: "",
passwordError: "",
View simple_hoc.jsx
const withLocalStorage = (WrappedComponent) => {
const loadFromStorage = (key) => localStorage.getItem(key);
const saveToStorage = (key, value) => localStorage.setItem(key, value);
const removeFromStorage = (key) => localStorage.removeItem(key);
return (props) => (
<WrappedComponent
loadFromStorage={loadFromStorage}
saveToStorage={saveToStorage}
removeFromStorage={removeFromStorage}
View withTextFieldState.js
import { withStateHandlers, compose } from "recompose";
const initialState = {
email: { value: "" },
password: { value: "" },
confirmPassword: { value: "" }
};
const onChangeEmail = props => event => ({
email: {
View withEmailError.js
import { withProps } from "recompose";
const getEmailError = email => {
if (!email.isDirty) {
return "";
}
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const isValidEmail = emailRegex.test(email.value);
View withPasswordError.js
import { withProps } from "recompose";
const getPasswordError = password => {
if (!password.isDirty) {
return "";
}
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
const isValidPassword = passwordRegex.test(password.value);
View withConfirmPasswordError.js
import { withProps } from "recompose";
const getConfirmPasswordError = (password, confirmPassword) => {
if (!confirmPassword.isDirty) {
return "";
}
const passwordsMatch = password.value === confirmPassword.value;
return !passwordsMatch ? "Passwords don't match." : "";
View withSubmitForm.js
import { withHandlers } from "recompose";
import axios from "axios";
const handleSubmit = ({
email,
password,
emailError,
passwordError,
confirmPasswordError
}) => {