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 (
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