Skip to content
This repository has been archived by the owner on Jul 17, 2020. It is now read-only.

Commit

Permalink
Seperated default and custom cats, setup default cats to auto update …
Browse files Browse the repository at this point in the history 
…if cats.js changes

Closes #34
  • Loading branch information
@jonathan-grah
jonathan-grah committed Oct 27, 2016
1 parent 40ee99a commit 5abd90f
Show file tree
Hide file tree
Showing 10 changed files with 1,394 additions and 1,559 deletions.
1 change: 1 addition & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"jsx-a11y/href-no-hash": "off",
"func_names": "off",
"space-before-function-paren": ["error", "never"],
"linebreak-style": ["error", "windows"],
"max-len": ["error", 120, 4],
"no-unused-vars": ["error", {"varsIgnorePattern": "render"}],
"indent": ["error", 2],
Expand Down
50 changes: 33 additions & 17 deletions app/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,53 @@ import Footer from './components/Footer';
class App extends React.Component {
constructor() {
super();
// retrieve cats from local storage
const local = Lockr.get('cats');
let allCats;

if (local) {
allCats = local;
const localCustomCats = Lockr.get('customCats');
const localDefaultCats = Lockr.get('defaultCats');

if (localDefaultCats === cats.defaultCats) {
this.defaultCats = localDefaultCats;
} else {
// if not cats in local storage, put them there
cats.cats.forEach(ourCat => {
Lockr.sadd('cats', ourCat);
allCats = Lockr.get('cats');
Lockr.flush();
cats.defaultCats.forEach(ourCat => {
Lockr.sadd('defaultCats', ourCat);
});
this.defaultCats = Lockr.get('defaultCats');
}

if (localCustomCats) {
localCustomCats.forEach(customCat => {
Lockr.sadd('customCats', customCat);
});
this.customCats = Lockr.get('customCats');
} else {
this.customCats = [];
}

this.state = {
cats: allCats,
defaultCats: this.defaultCats,
customCats: this.customCats,
search: '',
};
}

// Every time this.state.cats changes, update local storage
componentDidUpdate(prevState = this.state.cats) { // eslint-disable-line no-unused-vars
this.storeCats(this.state.cats);
// Every time this.state.customCats changes, update local storage
componentDidUpdate(prevState = this.state.customCats) { // eslint-disable-line no-unused-vars
this.storeCats(this.state.customCats);
}

storeCats(items) {
Lockr.flush();
cats.defaultCats.forEach(ourCat => {
Lockr.sadd('defaultCats', ourCat);
});
items.forEach(localCat => {
Lockr.sadd('cats', localCat);
Lockr.sadd('customCats', localCat);
});
}

addUserCat(newCat) {
this.setState({cats: newCat.concat(this.state.cats)});
this.setState({customCats: newCat.concat(this.state.customCats)});
}

updateSearch(newSearch) {
Expand All @@ -60,13 +74,15 @@ class App extends React.Component {
<Header clearSearch={this.clearSearch.bind(this)} />
<Modal
addUserCat={this.addUserCat.bind(this)}
cats={this.state.cats}
defaultCats={this.state.defaultCats}
customCats={this.state.customCats}
/>
<Results
clearSearch={this.clearSearch.bind(this)}
updateSearch={this.updateSearch.bind(this)}
search={this.state.search}
cats={this.state.cats}
defaultCats={this.state.defaultCats}
customCats={this.state.customCats}
/>
<Footer />
</div>
Expand Down
12 changes: 10 additions & 2 deletions app/components/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,16 @@ export default class Modal extends React.Component {
isTitleValid() {
const id = this.title.value.replace(/\s+/g, '');
const existingIds = [];
this.props.cats.forEach((cat) => {

this.props.defaultCats.forEach(cat => {
existingIds.push(cat.id);
});
if (this.props.customCats) {
this.props.customCats.forEach(cat => {
existingIds.push(cat.id);
});
}

if (existingIds.indexOf(id) === -1) {
this.setState({catId: id});
this.setState({validTitle: 'validate valid'});
Expand Down Expand Up @@ -131,6 +138,7 @@ export default class Modal extends React.Component {
}

Modal.propTypes = {
cats: React.PropTypes.array,
defaultCats: React.PropTypes.array,
customCats: React.PropTypes.array,
addUserCat: React.PropTypes.func,
};
47 changes: 39 additions & 8 deletions app/components/Results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,42 @@ export default class Results extends React.Component {
}

render() {
const preFilteredCats = this.props.cats.filter((cat) => {
this.preFilteredDefaultCats = this.props.defaultCats.filter(cat => {
const lowerTags = [];
const formatTags = cat.tags.forEach((tag) => { // eslint-disable-line no-unused-vars
cat.tags.forEach((tag) => {
lowerTags.push(tag.toLowerCase());
});
return (lowerTags.indexOf(this.props.search) !== -1);
});

let filteredCats;
let filteredDefaultCats;

if (preFilteredCats.length === 0) {
filteredCats = this.props.cats;
if (this.preFilteredDefaultCats.length === 0) {
filteredDefaultCats = this.props.defaultCats;
} else {
filteredCats = preFilteredCats;
filteredDefaultCats = this.preFilteredDefaultCats;
}

if (this.props.customCats) {
this.preFilteredCustomCats = this.props.customCats.filter(cat => {
const lowerTags = [];
cat.tags.forEach(tag => {
lowerTags.push(tag.toLowerCase());
});
return (lowerTags.indexOf(this.props.search) !== -1);
});
}

let filteredCustomCats;

if (!this.props.customCats) {
filteredCustomCats = [];
} else if (this.preFilteredCustomCats.length === 0) {
filteredCustomCats = this.props.customCats;
} else {
filteredCustomCats = this.preFilteredCustomCats;
}

return (
<div className="container">
<div className="row">
Expand All @@ -63,7 +84,16 @@ export default class Results extends React.Component {
</div>
<div className="results">
<div className="row">
{filteredCats.map(cat => {
{filteredDefaultCats.map(cat => {
return (
<Card
searchByTag={this.searchByTag.bind(this)}
key={cat.id}
cat={cat}
/>
);
})}
{filteredCustomCats.map(cat => {
return (
<Card
searchByTag={this.searchByTag.bind(this)}
Expand All @@ -83,5 +113,6 @@ Results.propTypes = {
updateSearch: React.PropTypes.func,
search: React.PropTypes.string,
clearSearch: React.PropTypes.func,
cats: React.PropTypes.array,
customCats: React.PropTypes.array,
defaultCats: React.PropTypes.array,
};
52 changes: 41 additions & 11 deletions app/components/Results/Action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,51 @@ export default class Action extends React.Component {
};
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
const catId = this.state.id;
const localCats = Lockr.get('cats');
let index;
// update like button likes
this.setState({likes: this.state.likes + 1});
// Find cat is local storage and increment likes
index = localCats.findIndex(x => x.id === catId); // eslint-disable-line prefer-const
localCats[index].likes = this.state.likes + 1;
// empty and update local storage
Lockr.flush();
localCats.forEach((localCat) => {
Lockr.sadd('cats', localCat);

const defaultCats = Lockr.get('defaultCats');
const customCats = Lockr.get('customCats');
let isDefault = false;

defaultCats.forEach(localCat => {
if (localCat.id === catId) {
isDefault = true;
}
});

if (isDefault) {
// Find cat is local storage and increment likes
const index = defaultCats.findIndex(x => x.id === catId);
defaultCats[index].likes = this.state.likes + 1;
Lockr.flush();
defaultCats.forEach(cat => {
Lockr.sadd('defaultCats', cat);
});

if (customCats) {
customCats.forEach(cat => {
Lockr.sadd('customCats', cat);
});
}
} else {
// Find cat is local storage and increment likes
const index = customCats.findIndex(x => x.id === catId);
customCats[index].likes = this.state.likes + 1;
Lockr.flush();
customCats.forEach(cat => {
Lockr.sadd('customCats', cat);
});
defaultCats.forEach(cat => {
Lockr.sadd('defaultCats', cat);
});
}

// update like button
this.setState({likes: this.state.likes + 1});
}

render() {
return (
<div className="card-action">
Expand Down
131 changes: 66 additions & 65 deletions app/components/cats.js
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,69 @@
const cats = {cats: [
{
id: 'CamperCat',
likes: 3,
tags: ['Coding', 'Guru', 'Ninja'],
title: 'Camper Cat',
url: 'https://media.giphy.com/media/o0vwzuFwCGAFO/giphy.gif',
},
{
id: 'Cat-in-a-hat',
likes: 7,
tags: ['Cute', 'Hat', 'Standing'],
title: 'Cat-in-a-hat',
url: 'https://s-media-cache-ak0.pinimg.com/564x/27/df/cc/27dfcc17a8cefe56c99277d63be0d815.jpg',
},
{
id: 'FluffBall',
likes: 2,
tags: ['Fluffy', 'No-legs', 'Ball', 'Flying'],
title: 'Fluff Ball',
url: 'http://www.top13.net/wp-content/uploads/2015/10/perfectly-timed-funny-cat-pictures-5.jpg',
},
{
id: 'GrumpyCat',
likes: 4,
tags: ['Grumpy', 'Funny', 'Famous'],
title: 'Grumpy Cat',
url: 'http://i.dailymail.co.uk/i/pix/2014/08/05/1407225932091_wps_6_SANTA_MONICA_CA_AUGUST_04.jpg',
},
{
id: 'HappyCat',
likes: 9,
tags: ['Happy', 'Winking', 'Smiling'],
title: 'Happy Cat',
url: 'https://pbs.twimg.com/profile_images/2167035896/123cat_400x400.jpg',
},
{
id: 'LaughingCat',
likes: 27,
tags: ['laughing', 'Funny', 'Snicker'],
title: 'Laughing Cat',
url: 'http://blog.nekoflies.com/wp-content/uploads/2014/01/funny-cat.jpg',
},
{
id: 'ScaredyCat',
likes: 18,
tags: ['Hiding', 'Cute', 'Scared'],
title: 'Scaredy Cat ',
url: 'https://i.ytimg.com/vi/MG8KADiRbOU/maxresdefault.jpg',
},
{
id: 'ShockedCat',
likes: 11,
tags: ['What is THAT!?', 'Shocked', 'Funny'],
title: 'Shocked Cat',
url: 'https://i.ytimg.com/vi/icqDxNab3Do/maxresdefault.jpg',
},
{
id: 'SleepingCat',
likes: 2,
tags: ['Sleeping', 'Cute', 'Kitten'],
title: 'Sleeping Cat',
url: 'http://www.acuteaday.com/blog/wp-content/uploads/2012/09/sleeping-kitty-cat.jpg',
},
],
const cats = {
defaultCats: [
{
id: 'CamperCat',
likes: 3,
tags: ['Coding', 'Guru', 'Ninja'],
title: 'Camper Cat',
url: 'https://media.giphy.com/media/o0vwzuFwCGAFO/giphy.gif',
},
{
id: 'Cat-in-a-hat',
likes: 7,
tags: ['Cute', 'Hat', 'Standing'],
title: 'Cat-in-a-hat',
url: 'https://s-media-cache-ak0.pinimg.com/564x/27/df/cc/27dfcc17a8cefe56c99277d63be0d815.jpg',
},
{
id: 'FluffBall',
likes: 2,
tags: ['Fluffy', 'No-legs', 'Ball', 'Flying'],
title: 'Fluff Ball',
url: 'http://www.top13.net/wp-content/uploads/2015/10/perfectly-timed-funny-cat-pictures-5.jpg',
},
{
id: 'GrumpyCat',
likes: 4,
tags: ['Grumpy', 'Funny', 'Famous'],
title: 'Grumpy Cat',
url: 'http://i.dailymail.co.uk/i/pix/2014/08/05/1407225932091_wps_6_SANTA_MONICA_CA_AUGUST_04.jpg',
},
{
id: 'HappyCat',
likes: 9,
tags: ['Happy', 'Winking', 'Smiling'],
title: 'Happy Cat',
url: 'https://pbs.twimg.com/profile_images/2167035896/123cat_400x400.jpg',
},
{
id: 'LaughingCat',
likes: 27,
tags: ['laughing', 'Funny', 'Snicker'],
title: 'Laughing Cat',
url: 'http://blog.nekoflies.com/wp-content/uploads/2014/01/funny-cat.jpg',
},
{
id: 'ScaredyCat',
likes: 18,
tags: ['Hiding', 'Cute', 'Scared'],
title: 'Scaredy Cat ',
url: 'https://i.ytimg.com/vi/MG8KADiRbOU/maxresdefault.jpg',
},
{
id: 'ShockedCat',
likes: 11,
tags: ['What is THAT!?', 'Shocked', 'Funny'],
title: 'Shocked Cat',
url: 'https://i.ytimg.com/vi/icqDxNab3Do/maxresdefault.jpg',
},
{
id: 'SleepingCat',
likes: 2,
tags: ['Sleeping', 'Cute', 'Kitten'],
title: 'Sleeping Cat',
url: 'http://www.acuteaday.com/blog/wp-content/uploads/2012/09/sleeping-kitty-cat.jpg',
},
],
};

export default cats;
Loading

0 comments on commit 5abd90f

Please sign in to comment.