Skip to content

Instantly share code, notes, and snippets.

@jhwheeler
Created June 8, 2017 21:30
Show Gist options
  • Save jhwheeler/52c21a49e8a47a6f2b2453c6e662405e to your computer and use it in GitHub Desktop.
Save jhwheeler/52c21a49e8a47a6f2b2453c6e662405e to your computer and use it in GitHub Desktop.
Blueprint component draft
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Hero from '../Hero/Hero';
import { fetchAnswers } from '../../actions/answerActions';
import css from './Blueprint.scss';
import { copy } from './Blueprint.data.js';
class Blueprint extends Component {
constructor(props) {
super(props);
this.state = {
personaAge: [],
personaSex: [],
visualStyle: [],
products: [],
}
}
componentDidMount() {
let userId;
if (this.props.match && this.props.match.params) {
userId = this.props.match.params._id;
}
this.props.fetchAnswers(userId);
}
getBuyerPersonaAge = answers => {
const ages = answers.filter((el) => {
return (el === "young" || el === "middle-aged" || el === "elderly");
});
this.setState({personaAge: ages});
}
getBuyerPersonaSex = answers => {
const sex = answers.filter((el) => {
return (el === "male" || el === "female" || el === "other");
});
this.setState({personaSex: sex});
}
getVisualStyle = answers => {
const style = answers.filter((el) => {
return (el === "corporate" || el === "rustic" || el === "modern" || el === "minimalist" || el === "luxury");
});
this.setState({visualStyle: style});
}
getProducts = answers => {
const product = answers.filter((el) => {
return (el === "logo" || el === "brand" || el === "website" || el === "app" || el === "landing-page");
});
this.setState({products: product});
}
componentDidUpdate() {
const answers = Object.keys(this.props.answers);
this.getBuyerPersonaAge(answers);
this.getBuyerPersonaSex(answers);
this.getVisualStyle(answers);
this.getProducts(answers);
}
render() {
const answers = this.props.answers;
const { personaAge, personaSex, visualStyle, products } = this.state;
return (
<div className="blueprint">
<div className="blueprint-hero">
<Hero backgroundImage={'/images/hero/blueprint-hero.jpg'}>
<div className="blueprint-hero-logo">
<img src={`/images/hero/logo_hero.png`} />
</div>
<div className="blueprint-hero-title">
<h1>{copy.heroTitle}</h1>
</div>
</Hero>
</div>
<div className="blueprint-intro">
<h2>Hi {answers['info-name']},</h2>
<p>{copy.intro}</p>
</div>
<div className="blueprint-audience">
<img src={`/images/blueprint/audience.png`} />
<div className="blueprint-audience-text">
<h2>{copy.audienceTitle}</h2>
<p>{copy.audienceText1}</p>
<p>{copy.audienceText2}</p>
</div>
</div>
<div className="buyer-persona">
<h2>{copy.buyerDemographicsTitle}</h2>
<div className="buyer-persona-wrapper">
<div className="buyer-persona-section buyer-persona-age">
<div className="buyer-persona-ages">
{personaAge.map(value => {
<div>
<img src={`/images/quiz/audience-age-${value}.png`} />
</div>
})
}
</div>
<h3>Age group</h3>
</div>
<div className="buyer-persona-section buyer-persona-sex">
<img src={`/images/quiz/audience-sex-male.png`} />
<h3>Sex</h3>
</div>
<div className="buyer-persona-section buyer-persona-income">
<p>{answers['audience-income']}</p>
<h3>Income</h3>
</div>
</div>
</div>
<div className="buyer-description">
<h2>{copy.buyerDescriptionTitle}</h2>
<p>"{answers['description-audience']}"</p>
<h2>{copy.solutionTitle}</h2>
<p>"{answers['description-solution']}"</p>
</div>
<div className="blueprint-contrast-section buyer-exercise">
<img src={`/images/blueprint/exercise.png`} />
<div className="blueprint-audience-text">
<h2>{copy.buyerExerciseTitle}</h2>
<p>{copy.buyerExerciseText1}</p>
<p>{copy.buyerExerciseText2}</p>
</div>
</div>
<div className="mission-vision">
<div className="mission-vision-text">
<h2>{copy.missionVisionTitle}</h2>
<p>{copy.missionVisionText1}</p>
<p>{copy.missionVisionText2}</p>
<p>{copy.missionVisionText3}</p>
</div>
</div>
<div className="your-mission-vision">
<div className="your-mission-vision-text">
<h2>{copy.visionTitle}</h2>
<p>"{answers.vision}"</p>
<h2>{copy.missionTitle}</h2>
<p>"{answers.mission}"</p>
</div>
</div>
<div className="vision-exercise">
<div className="vision-exercise-text">
<h2>{copy.visionExerciseTitle}</h2>
<p>{copy.visionExerciseText1}</p>
<p>{copy.visionExerciseText2}</p>
<p>{copy.visionExerciseText3}</p>
<p>{copy.visionExerciseText4}</p>
</div>
</div>
<div className="visual-message">
<div className="visual-message-text">
<h2>{copy.visualStyleTitle}</h2>
<p>{copy.visualStyleText}</p>
{visualStyle.map(value => {
<div>
<img src={`/images/quiz/style-${value}.png`} />
</div>
})
}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
answers: state.answers
}
};
const mapDispatchToProps = dispatch => {
return {
fetchAnswers: answers => dispatch(fetchAnswers(answers)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Blueprint);
@jhwheeler
Copy link
Author

Stack overflow: returns error Maximum call stack size exceeded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment