Skip to content

Instantly share code, notes, and snippets.

@Random-Stack-Random-Day
Last active April 18, 2018 20:03
Show Gist options
  • Save Random-Stack-Random-Day/eec46b9c775f171c3a310b6d2dbdd040 to your computer and use it in GitHub Desktop.
Save Random-Stack-Random-Day/eec46b9c775f171c3a310b6d2dbdd040 to your computer and use it in GitHub Desktop.
Testing Formik
static checkLossPerk = (perkProgress, removed) => {
let tempArray = new Array(removed);
for (let i=removed; i>0; i--){
if (perkProgress % 3 === 0) {
console.log("Can't lose any!");
}
else {
perkProgress--
console.log(perkProgress, "Lost one")
}
}
return perkProgress
}
static checkPerkStatus = (perkProgress, newModifer) => {
if (newModifer > 0) {
perkProgress += newModifer;
}
else if (newModifer < 0) {
this.checkLossPerk(perkProgress, Math.abs(newModifer));
}
return perkProgress
}
import React, {Component} from 'react';
import InputFields from '../../../UI/Input/InputFields';
import {compose} from 'redux';
import {connect} from "react-redux";
import {logACharacterPlaySession} from "../../../../redux/actions";
import {FormControl, FormHelperText} from 'material-ui/Form';
import {withFormik} from 'formik';
import { withStyles } from 'material-ui/styles';
import Yup from 'yup';
import uuid from 'uuid/v4';
import CharacterBuilder from '../CharacterBuilder'
import { InputLabel } from 'material-ui';
const mapDispatchToProps = dispatch => {
return {
logACharacterPlaySession: character => dispatch(logACharacterPlaySession(character))
};
};
const styles = theme => ({
container: {
display: 'flex',
alignContent: 'flex-start'
},
formControl: {
margin: theme.spacing.unit,
},
});
const container = compose(
connect(null, mapDispatchToProps),
withStyles(styles),
withFormik({
mapPropsToValues: props => ({
name: props.character.name,
experience: props.character.experience,
charClass: props.character.charClass,
level: props.character.level,
gold: props.character.gold,
perks: props.character.perks,
checkmarks: props.character.checkmarks, // ALSO tried assigning 0 here
characterId: props.charId
}),
validationSchema: Yup
.object()
.shape({
name: Yup
.string()
.required(`Don't you want a name bro?`),
experience: Yup
.number()
.required(`Even a 0 is a number`)
.min(0, `Can only go up from here`)
.max(500, `Bro, enough already. RETIRE ALREADY!`),
gold: Yup
.number()
.required(`You're broke, sure, but 0 is still a number`)
.min(0, `You're broke, sure, but 0 is still a number`)
}),
handleSubmit: (values, {props, setSubmitting, setErrors}) => {
values.level = CharacterBuilder.getLevelFromExp(values.experience);
console.log(props.character.checkmarks, values.checkmarks);
values.checkmarks = CharacterBuilder.checkPerkStatus(props.character.checkmarks, values.checkmarks)
props.onFlipHandler();
console.log(values);
// props.logACharacterPlaySession(values);
// console.log(values)
// props.onFlipHandler;
// props
// .addCharacter({
// values
// });
}
}));
class LogSessionForm extends Component {
// componentDidMount() {
// console.log(this.props.character)
// }
render() {
const { classes } = this.props;
const {
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
} = this.props;
return (
<div className={classes.container}>
<form onSubmit={handleSubmit}>
<h2>Editing: {values.name} the {values.charClass}</h2>
<br />
<InputFields
fieldtype="number"
label="Experience"
name="experience"
setid="charExperience"
value={values.experience}
onChange={handleChange}
onBlur={handleBlur}
error={touched.experience && errors.experience}/>
<InputFields
label="Gold"
fieldtype="number"
name="gold"
value={values.gold}
onChange={handleChange}
onBlur={handleBlur}/> {errors.gold && touched.gold && <div className="input-feedback">{errors.gold}</div>}
<InputFields
label="Perk Progress"
fieldtype="number"
name="checkmarks"
value={values.checkmarks}
onChange={handleChange}
onBlur={handleBlur}/> {errors.checkmarks && touched.checkmarks && <div className="input-feedback">{errors.checkmarks}</div>}
<br />
<button type="button" onClick={() => this.props.onFlipHandler()}>Cancel</button>
<button type="submit">Submit</button>
</form>
</div>
);
}
};
const EnhancedLogSessionForm = container(LogSessionForm)
export default EnhancedLogSessionForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment