/*Downloaded from https://www.codeseek.co/0damian/recipepad-LRdwWv */
var RecipesContainer = React.createClass({
displayName: 'RecipesContainer',
getInitialState: function getInitialState() {
var availableData = storage ? JSON.parse(storage.getItem('_0damian_data')) : seedData;
return {
data: availableData,
formVisibility: 0
};
},
handleRecipeSubmit: function handleRecipeSubmit(data) {
var newId = this.state.data.length + 1;
var newRecipe = {
id: newId,
active: 1,
title: data.title,
ingredients: data.ingredients,
instructions: data.instructions
};
var newData = this.state.data;
newData.push(newRecipe);
if (storage) storage.setItem('_0damian_data', JSON.stringify(newData));
this.setState({
data: newData,
formVisibility: 0
});
},
handleRecipeTransfer: function handleRecipeTransfer(newData) {
var unwrappedData = newData.data.data;
for (var i = 0; i < this.state.data.length; i++) {
if (this.state.data[i].id == unwrappedData.id.replace(/f/, '')) {
var editData = this.state.data;
editData[i].title = unwrappedData.title;
editData[i].ingredients = unwrappedData.ingredients;
editData[i].instructions = unwrappedData.instructions;
if (storage) storage.setItem('_0damian_data', JSON.stringify(editData));
this.setState({
data: editData
});
}
}
},
handleRecipeCancel: function handleRecipeCancel(data) {
this.setState({
formVisibility: 0
});
},
handleRecipeDelete: function handleRecipeDelete(data) {
for (var j = 0; j < this.state.data.length; j++) {
if (this.state.data[j].id == data.data.id) {
var newData = this.state.data;
newData[j].active = 0;
if (storage) storage.setItem('_0damian_data', JSON.stringify(newData));
this.setState({
data: newData
});
}
}
},
toggleForm: function toggleForm(e) {
e.preventDefault();
if (this.state.formVisibility) {
this.setState({
formVisibility: 0
});
} else {
this.setState({
formVisibility: 1
});
}
},
render: function render() {
return React.createElement(
'main',
{ className: 'container' },
React.createElement(
'h1',
null,
'RecipePad'
),
React.createElement(RecipeList, {
data: this.state.data,
onRecipeTransfer: this.handleRecipeTransfer,
onRecipeDelete: this.handleRecipeDelete
}),
React.createElement(
'button',
{
className: 'new',
onClick: this.toggleForm
},
String.fromCharCode(43) + ' New Recipe'
),
React.createElement(RecipeForm, {
title: 'Add your recipe title',
ingredients: 'Ingredients, separated, by, commas',
instructions: 'Add your preparation instructions here',
display: this.state.formVisibility ? { display: 'block' } : { display: 'none' },
onRecipeSubmit: this.handleRecipeSubmit,
onRecipeCancel: this.handleRecipeCancel
})
);
}
});
var RecipeList = React.createClass({
displayName: 'RecipeList',
handleRecipeTransfer: function handleRecipeTransfer(data) {
this.props.onRecipeTransfer({
data: data
});
},
handleRecipeCancel: function handleRecipeCancel(data) {
this.props.onRecipeCancel({
data: data
});
},
handleRecipeDelete: function handleRecipeDelete(data) {
this.props.onRecipeDelete({
data: data
});
},
render: function render() {
var recipeNodes = this.props.data.map(function (recipe) {
if (!recipe.active) return;
return React.createElement(
'div',
{ className: 'recipe' },
React.createElement(Recipe, {
title: recipe.title,
ingredients: recipe.ingredients,
instructions: recipe.instructions,
key: recipe.id,
id: recipe.id,
onRecipeTransfer: this.handleRecipeTransfer,
onRecipeCancel: this.handleRecipeCancel,
onRecipeDelete: this.handleRecipeDelete
})
);
}, this);
return React.createElement(
'div',
{ className: 'list' },
recipeNodes
);
}
});
var Recipe = React.createClass({
displayName: 'Recipe',
getInitialState: function getInitialState() {
return {
formVisibility: 0,
ingredientsVisibility: 0,
active: 1
};
},
toggleIngredients: function toggleIngredients(e) {
e.preventDefault();
if (this.state.ingredientsVisibility) {
this.setState({
ingredientsVisibility: 0
});
} else {
this.setState({
ingredientsVisibility: 1
});
}
},
toggleForm: function toggleForm(e) {
e.preventDefault();
if (this.state.formVisibility) {
this.setState({
formVisibility: 0
});
} else {
this.setState({
formVisibility: 1
});
}
},
handleRecipeTransfer: function handleRecipeTransfer(data) {
this.setState({
formVisibility: 0
}), this.props.onRecipeTransfer({
data: data
});
},
handleRecipeCancel: function handleRecipeCancel(data) {
if (data.cancel && data.source != 'f0') {
this.setState({
formVisibility: 0
});
} else {
this.props.onCancelTransfer({
data: data
});
}
},
handleRecipeDelete: function handleRecipeDelete(e) {
e.preventDefault();
this.props.onRecipeDelete({
id: this.props.id
});
},
render: function render() {
var ingredientNodes = this.props.ingredients.map(function (ingredient) {
return React.createElement(
'li',
null,
ingredient
);
});
var ingredientsList = String(this.props.ingredients).replace(/\,/g, ', ');
return React.createElement(
'div',
{ className: 'recipe' },
React.createElement(
'h2',
{
onClick: this.toggleIngredients
},
this.props.title
),
React.createElement(
'div',
{
className: 'recipe-body',
style: this.state.ingredientsVisibility ? { display: 'block' } : { display: 'none' }
},
React.createElement(
'ul',
null,
ingredientNodes
),
React.createElement(
'p',
null,
this.props.instructions
)
),
React.createElement(
'button',
{
onClick: this.toggleForm
},
'Edit'
),
React.createElement(
'button',
{
className: 'delete',
onClick: this.handleRecipeDelete
},
'Delete'
),
React.createElement(RecipeForm, {
title: this.props.title,
ingredients: ingredientsList,
instructions: this.props.instructions,
key: 'f' + this.props.id,
id: 'f' + this.props.id,
display: this.state.formVisibility ? { display: 'block' } : { display: 'none' },
onRecipeSubmit: this.handleRecipeTransfer,
onRecipeCancel: this.handleRecipeCancel
})
);
}
});
var RecipeForm = React.createClass({
displayName: 'RecipeForm',
getInitialState: function getInitialState() {
return {
title: '',
ingredients: '',
instructions: ''
};
},
handleTitleChange: function handleTitleChange(e) {
e.preventDefault();
this.setState({
title: e.target.value
});
},
handleIngredientsChange: function handleIngredientsChange(e) {
e.preventDefault();
this.setState({
ingredients: e.target.value
});
},
handleInstructionsChange: function handleInstructionsChange(e) {
e.preventDefault();
this.setState({
instructions: e.target.value
});
},
handleRecipeSubmit: function handleRecipeSubmit(e) {
e.preventDefault();
var title = this.state.title.trim();
var ingredients = this.state.ingredients.trim().split(',');
var instructions = this.state.instructions.trim().split(',');
this.setState({
title: '',
ingredients: '',
instructions: ''
});
this.refs.titleInput.value = '';
this.refs.ingredientsInput.value = '';
this.refs.instructionsInput.value = '';
this.props.onRecipeSubmit({
id: this.props.id,
title: title,
ingredients: ingredients,
instructions: instructions
});
},
handleRecipeCancel: function handleRecipeCancel(e) {
e.preventDefault();
this.setState({
title: '',
ingredients: '',
instructions: ''
});
this.refs.titleInput.value = '';
this.refs.ingredientsInput.value = '';
this.refs.instructionsInput.value = '';
this.props.onRecipeCancel({
source: this.props.id,
cancel: 1
});
},
render: function render() {
return React.createElement(
'div',
{
className: 'form-container',
style: this.props.display
},
React.createElement(
'form',
{ style: this.props.display },
React.createElement(
'label',
{ 'for': 'title' },
'Title'
),
React.createElement('input', {
type: 'text',
name: 'title',
ref: 'titleInput',
placeholder: this.props.title,
onChange: this.handleTitleChange
}),
React.createElement(
'label',
{ 'for': 'ingredients' },
'Ingredients'
),
React.createElement('input', {
type: 'text',
name: 'ingredients',
ref: 'ingredientsInput',
placeholder: this.props.ingredients,
onChange: this.handleIngredientsChange
}),
React.createElement(
'label',
{ 'for': 'instructions' },
'Instructions'
),
React.createElement('textarea', {
name: 'instructions',
rows: '3',
ref: 'instructionsInput',
placeholder: this.props.instructions,
onChange: this.handleInstructionsChange
}),
React.createElement(
'button',
{
type: 'submit',
onClick: this.handleRecipeSubmit,
disabled: !this.state.title.length || !this.state.ingredients.length || !this.state.instructions.length
},
'Save'
),
React.createElement(
'button',
{
type: 'submit',
onClick: this.handleRecipeCancel
},
'Cancel'
)
)
);
}
});
var seedData = [{ id: 1,
active: 1,
title: "Four Cheese Rigatoni",
ingredients: ['Rigatoni', 'Double Cream', 'Mozzarella', 'Cheddar', 'Parmesan', 'Roquefort', 'Pepper'],
instructions: "Boil the pasta to taste. Meanwhile, chop / grate the cheese. Drain the pasta, add the cream, then the cheese and finally some pepper."
}, { id: 2,
active: 1,
title: "Mushroom Omelette",
ingredients: ['Eggs', 'Milk', 'Mixed Herbs', 'Mushrooms', 'Cheese', 'Pepper'],
instructions: "Slice the mushrooms and fry. Meanwhile, beat the eggs in a cup then add milk and stir. Add the mix to the mushrooms and season with herbs, cook gently until fluffy." }, { id: 3,
active: 1,
title: "Pesto & Avocado Sandwich",
ingredients: ['Toast', 'Avocado', 'Pesto', 'Tomato', "Goat's Cheese", 'Pepper', 'Rocket'],
instructions: "Put the toast under the grill. Chop the vegetables and cheese. Add a thin coat of pesto to the ungrilled side of the toast, grill for one minute then put the vegetables and cheese on top." }];
if (localStorage && !localStorage.getItem('_0damian_data')) {
var storage = localStorage;
storage.setItem('_0damian_data', JSON.stringify(seedData));
} else if (localStorage && !!localStorage.getItem('_0damian_data')) {
storage = localStorage;
} else storage = 0;
ReactDOM.render(React.createElement(RecipesContainer, null), document.getElementById('app'));
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
React
v15.3.1
