From 2ff919a3abe08427a654302d06fa3bea67cdabae Mon Sep 17 00:00:00 2001
From: Savy <savy.novachez011@gmail.com>
Date: Wed, 10 May 2023 13:41:27 +0530
Subject: [PATCH] Finished Ex 6.9

---
 Part_6/anecdotes-redux/src/App.js             |  2 ++
 .../src/components/AnecdoteList.js            |  8 ++++++-
 .../anecdotes-redux/src/components/Filter.js  | 22 +++++++++++++++++++
 Part_6/anecdotes-redux/src/index.js           | 12 ++++++++--
 .../src/reducers/anecdoteReducer.js           |  4 ++--
 .../src/reducers/filterReducer.js             | 17 ++++++++++++++
 6 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 Part_6/anecdotes-redux/src/components/Filter.js
 create mode 100644 Part_6/anecdotes-redux/src/reducers/filterReducer.js

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 (
         <div>
             <h2>Anecdotes</h2>
+            <Filter />
             <AnecdoteList />
             <AnecdoteForm />
         </div>
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 (
+        <div>
+            Filter:
+            &nbsp;
+            <input name='filter' onChange={filterHandler}/>
+        </div>
+    )
+}
+
+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
-- 
2.51.2