Categories routes and components not yet filterable

client/Routes.js

@@ -4,8 +4,8 @@ import { Router } from 'react-router'
 import { Route, Switch } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import history from './history'
-import {Main, Login, Signup, UserHome, AllCharacters, SingleCharacter} from './components'
-import {me, fetchCharacters} from './store';
+import {Main, Login, Signup, UserHome, AllCharacters, SingleCharacter, AllCategories, SingleCategory, FilteredCharacters} from './components'
+import {me, fetchCharacters, fetchCategories} from './store';
 
 /**
  * COMPONENT
@@ -30,7 +30,9 @@ class Routes extends Component {
             <Route path="/login" component={Login} />
             <Route path="/signup" component={Signup} />
             <Route exact path="/" component={AllCharacters} />
-            <Route path="/characters/:characterId" component={SingleCharacter} />
+            <Route exact path="/categories" component={AllCategories} />
+            <Route path="/filteredCharacters" component={FilteredCharacters} />
+            <Route path="/characters/:characterId" component={SingleCharacter} /> 
 
             {
               isLoggedIn ?
@@ -65,6 +67,7 @@ const mapDispatch = (dispatch) => {
     loadInitialData () {
       dispatch(me());
       dispatch(fetchCharacters());
+      dispatch(fetchCategories());
 
     }
   }

client/components/AllCategories.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { Card, FlexParent, CharacterImg, CardText, Title } from './component-styles'
+
+// export const AllCharacters = (props) => {
+//     console.log("PRINT", props);
+//     return (<h1> hi </h1>)
+// }
+
+class AllCategories extends Component {
+  constructor(props) {
+    super(props);
+
+     this.state = {
+      tag: ''
+    };
+  }
+  render() {
+    const allCategories = this.props.allCategories;
+    console.log("Categories", this.props);
+    return (
+      <FlexParent>
+        <Title secondary>CATEGORIES</Title>
+        <FlexParent>
+        <ul>
+          {
+            allCategories.map(category => {
+              return (
+                <li key={category.id}>{category.tag}</li>
+              )
+            })
+          }
+        </ul>
+        </FlexParent>
+      </FlexParent>
+
+    );
+  }
+}
+/* -----------------    CONTAINER     ------------------ */
+const mapStateToProps = ({ allCategories}) => ({ allCategories });
+
+export default withRouter(connect(mapStateToProps)(AllCategories));
+
+// export default AllCharacters;

client/components/AllCharacters.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { Card, FlexParent, CharacterImg, CardText, Title } from './component-styles'
-
+import AllCategories from './AllCategories';
 // export const AllCharacters = (props) => {
 //     console.log("PRINT", props);
 //     return (<h1> hi </h1>)
@@ -24,6 +24,7 @@ class AllCharacters extends Component {
     return (
       <FlexParent>
         <Title secondary>BROWSE CHARACTERS</Title>
+        <AllCategories />
         <FlexParent>
           {
             allCharacters.map(character => {

client/components/FilteredCharacters.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { Card, FlexParent, CharacterImg, CardText, Title } from './component-styles'
+import AllCategories from './AllCategories';
+import {addSearchTerm, fetchCharacters, fetchCategoryForFilter} from '../store';
+
+
+
+class FilteredCharacters extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filtered: [],
+
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+componentDidMount() {
+  }
+
+  handleClick(evt){
+
+    console.log(evt.target.value, "event.target.value - categoryId");
+     this.props.AddSearchTerms(evt.target.value)
+  }
+  render() {
+
+    const allCharacters = this.props.allCharacters;
+    const allCategories = this.props.allCategories;
+    const CategorySet = [...new Set(allCategories)];
+    const filtered = allCharacters.filter(function(character){
+        const tags = character.tags;
+        const bool = true;
+
+        console.log(check, "check");
+        return bool;
+    })
+
+    console.log("CHARACTERS", this.props);
+    return (
+      <FlexParent>
+        <Title secondary>BROWSE CHARACTERS</Title>
+        {
+            allCategories.map(category => {
+                return (<button key={category.id} value={category.id} onClick={this.handleClick}>{category.tag}</button>)
+            })
+        }
+        <AllCategories />
+        <FlexParent>
+          {
+            allCharacters.map(character => {
+              return (
+                <Card key={character.id}>
+                  <Link to={`/characters/${character.id}`}>
+                    <CharacterImg src={character.imageUrl} />
+                  </Link>
+                  <CardText>
+                    <span>{character.name}</span>
+
+                    <span>{character.price}</span>
+
+                  </CardText>
+                </Card>
+              );
+            })
+          }
+        </FlexParent>
+        <FlexParent>
+          <Title secondary>FILTERED CHARACTERS</Title>
+
+          {
+            allCharacters.map(character => {
+              return (
+                <Card key={character.id}>
+                  <Link to={`/characters/${character.id}`}>
+                    <CharacterImg src={character.imageUrl} />
+                  </Link>
+                  <CardText>
+                    <span>{character.name}</span>
+
+                    <span>{character.price}</span>
+
+                  </CardText>
+                </Card>
+              );
+            })
+          }
+        </FlexParent>
+      </FlexParent>
+
+    );
+  }
+}
+
+/* -----------------    CONTAINER     ------------------ */
+
+
+
+const mapStateToProps = ({allCharacters, allCategories}) => ({allCharacters, allCategories});
+const mapDispatchToProps = (dispatch) => {
+  return {
+    AddSearchTerms (categoryId) {
+      dispatch(fetchCategoryForFilter(categoryId)); 
+    },
+
+    loadCharacters(){
+        dispatch(fetchCharacters);
+
+    }
+    }
+
+  }
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(FilteredCharacters));
+

client/components/Main.js

@@ -6,6 +6,7 @@ import { withRouter, Link } from 'react-router-dom'
 import { logout } from '../store'
 import AllCharacters from './AllCharacters'
 import SingleCharacter from './SingleCharacter';
+import AllCategories from './AllCategories';
 
 import { Wrapper, Header, Title, StyledLink, Menu } from './component-styles'
 

client/components/index.js

@@ -8,3 +8,5 @@ export {default as UserHome} from './user-home'
 export {Login, Signup} from './auth-form';
 export {default as AllCharacters} from './AllCharacters';
 export {default as SingleCharacter} from './SingleCharacter';
+export {default as AllCategories} from './AllCategories';
+export {default as FilteredCharacters } from './FilteredCharacters';

client/store/allCategories.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+/* -----------------    ACTION TYPES ------------------ */
+
+const ALL_CATEGORIES = 'ALL_CATEGORIES';
+
+/* ------------   ACTION CREATORS     ------------------ */
+
+export function getCategories(categories) {
+  const action = { type: ALL_CATEGORIES, categories };
+  return action;
+}
+
+/* ------------       REDUCER     ------------------ */
+
+export default function reducer (categories = [], action) {
+  switch (action.type) {
+
+    case ALL_CATEGORIES:
+      return action.categories;
+     default:
+      return categories;
+  }
+}
+
+
+/* ------------   THUNK CREATORS     ------------------ */
+
+export const fetchCategories = () => dispatch => {
+  axios.get('/api/categories')
+       .then(res => {
+           dispatch(getCategories(res.data));
+       });
+
+};

client/store/index.js

@@ -7,9 +7,10 @@ import singleCharacter from './singleCharacter';
 import cart from './cart';
 import allCategories from './allCategories';
 import singleCategory from './singleCategory';
+import filteredCharacters from './filteredCharacters.js';
+import searchTerms from './searchTerms.js';
 
-
-const reducer = combineReducers({user, allCharacters, singleCharacter, cart});
+const reducer = combineReducers({user, allCharacters, singleCharacter, cart, allCategories, singleCategory, searchTerms});
 const middleware = applyMiddleware(thunkMiddleware, createLogger({collapsed: true}));
 const store = createStore(reducer, middleware);
 
@@ -20,3 +21,4 @@ export * from './singleCharacter';
 export * from './cart';
 export * from './allCategories';
 export * from './singleCategory';
+export * from './searchTerms';

client/store/searchTerms.js

@@ -0,0 +1,44 @@
+import axios from 'axios';
+
+/* -----------------    ACTION TYPES ------------------ */
+
+export const ADD_SEARCH_TERM = 'ADD_SEARCH_TERM';
+export const REMOVE_SEARCH_TERM = 'REMOVE_SEARCH_TERM';
+
+
+/* ------------   ACTION CREATORS     ------------------ */
+
+export function addSearchTerm(category) {
+  const action = { type: ADD_SEARCH_TERM, category };
+  return action;
+}
+
+export function removeSearchTerm(category) {
+    const action = { type: REMOVE_SEARCH_TERM, category};
+    return action;
+}
+/* ------------       REDUCER     ------------------ */
+
+export default function reducer (searchTerms = [], action) {
+  switch (action.type) {
+
+    case ADD_SEARCH_TERM:
+      return [action.category, ...searchTerms];
+    case REMOVE_SEARCH_TERM:
+        return searchTerms.filter(searchTerm => searchTerm.id !== action.category.id);
+     default:
+      return searchTerms;
+  }
+}
+
+
+/* ------------   THUNK CREATORS     ------------------ */
+
+
+export const fetchCategoryForFilter = (categoryId) => dispatch => {
+  axios.get(`/api/categories/${categoryId}`)
+       .then(res => {
+           dispatch(addSearchTerm(res.data));
+       });
+
+};

client/store/singleCategory.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+/* -----------------    ACTION TYPES ------------------ */
+
+const SINGLE_CATEGORY = 'SINGLE_CATEGORY';
+
+/* ------------   ACTION CREATORS     ------------------ */
+
+export function getSingleCategory(category) {
+  const action = { type: SINGLE_CATEGORY, category };
+  return action;
+}
+
+/* ------------       REDUCER     ------------------ */
+
+export default function reducer (category = {}, action) {
+  switch (action.type) {
+
+    case SINGLE_CATEGORY:
+      return action.category;
+     default:
+      return category;
+  }
+}
+
+
+/* ------------   THUNK CREATORS     ------------------ */
+
+export const fetchCategory = (categoryId) => dispatch => {
+  axios.get(`/api/categories/${categoryId}`)
+       .then(res => {
+           dispatch(getSingleCategory(res.data));
+       });
+
+};

server/api/categories.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const express = require('express');
+const router = express.Router();
+const models = require('../db/models');
+const Category = models.Category;
+const ProductCategory = models.ProductCategory;
+const Character = models.Character;
+
+
+module.exports = router;
+
+// EI: don't forget about query strings!
+router.get('/', function (req, res, next) {
+    Category.findAll()
+    .then(category => res.json(category))
+    .catch(next);
+
+});
+
+
+router.get('/:categoryId', function (req, res, next) {
+    Category.findOne({ where: {id: req.params.categoryId}, include: {model: Character, as: "products"}})
+    .then(category => res.json(category))
+    .catch(next);
+});
+