diff --git a/Part_6/anecdotes-redux/src/App.js b/Part_6/anecdotes-redux/src/App.js index b4a2e2a..96ae17e 100644 --- a/Part_6/anecdotes-redux/src/App.js +++ b/Part_6/anecdotes-redux/src/App.js @@ -1,10 +1,12 @@ import AnecdoteForm from './components/AnecdoteForm' import AnecdoteList from './components/AnecdoteList' +import Filter from './components/Filter' const App = () => { return (

Anecdotes

+
diff --git a/Part_6/anecdotes-redux/src/components/AnecdoteList.js b/Part_6/anecdotes-redux/src/components/AnecdoteList.js index bec7db8..cea6924 100644 --- a/Part_6/anecdotes-redux/src/components/AnecdoteList.js +++ b/Part_6/anecdotes-redux/src/components/AnecdoteList.js @@ -2,7 +2,13 @@ import { useSelector, useDispatch } from 'react-redux' import { increaseVoteOf } from '../reducers/anecdoteReducer' const AnecdoteList = () => { - const anecdotes = useSelector(state => state) + const anecdotes = useSelector(({ filter, anecdotes}) => { + if (filter !== '') { + return anecdotes.filter(item => item.content.toLowerCase().includes(filter.toLowerCase())) + } + return anecdotes + }) + const dispatch = useDispatch() const vote = id => { diff --git a/Part_6/anecdotes-redux/src/components/Filter.js b/Part_6/anecdotes-redux/src/components/Filter.js new file mode 100644 index 0000000..ff03ade --- /dev/null +++ b/Part_6/anecdotes-redux/src/components/Filter.js @@ -0,0 +1,22 @@ +import { useDispatch } from "react-redux" +import { filterChange } from "../reducers/filterReducer" + +const Filter = () => { + const dispatch = useDispatch() + + const filterHandler = event => { + event.preventDefault() + const filter = event.target.value + dispatch(filterChange(filter)) + } + + return ( +
+ Filter: +   + +
+ ) +} + +export default Filter \ No newline at end of file diff --git a/Part_6/anecdotes-redux/src/index.js b/Part_6/anecdotes-redux/src/index.js index f541415..bce4934 100644 --- a/Part_6/anecdotes-redux/src/index.js +++ b/Part_6/anecdotes-redux/src/index.js @@ -1,9 +1,17 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { createStore } from 'redux' + +import { createStore, combineReducers } from 'redux' import { Provider } from 'react-redux' + import App from './App' -import reducer from './reducers/anecdoteReducer' +import filterReducer from './reducers/filterReducer' +import anecdoteReducer from './reducers/anecdoteReducer' + +const reducer = combineReducers({ + anecdotes: anecdoteReducer, + filter: filterReducer +}) const store = createStore(reducer) diff --git a/Part_6/anecdotes-redux/src/reducers/anecdoteReducer.js b/Part_6/anecdotes-redux/src/reducers/anecdoteReducer.js index d7560e7..495b8eb 100644 --- a/Part_6/anecdotes-redux/src/reducers/anecdoteReducer.js +++ b/Part_6/anecdotes-redux/src/reducers/anecdoteReducer.js @@ -37,7 +37,7 @@ export const increaseVoteOf = id => { const initialState = anecdotesAtStart.map(asObject) -const reducer = (state = initialState, action) => { +const anecdoteReducer = (state = initialState, action) => { switch(action.type) { case 'NEW_ANECDOTE': return state.concat(action.payload) @@ -55,4 +55,4 @@ const reducer = (state = initialState, action) => { } } -export default reducer \ No newline at end of file +export default anecdoteReducer \ No newline at end of file diff --git a/Part_6/anecdotes-redux/src/reducers/filterReducer.js b/Part_6/anecdotes-redux/src/reducers/filterReducer.js new file mode 100644 index 0000000..67608b8 --- /dev/null +++ b/Part_6/anecdotes-redux/src/reducers/filterReducer.js @@ -0,0 +1,17 @@ +export const filterChange = filter => { + return { + type: 'FILTER_CHANGE', + payload: filter + } +} + +const filterReducer = (state = '', action) => { + switch(action.type) { + case 'FILTER_CHANGE': + return action.payload + default: + return state + } +} + +export default filterReducer \ No newline at end of file