Upload 6.9

part6/redux-anecdotes/src/App.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import List from './components/List'
 import Form from './components/Form'
+import Filter from './components/Filter'
 
 const App = () => {
 
   return (
     <div>
       <h1>Anecdotes</h1>
+      <Filter />
       <List />
       <Form />
     </div>

part6/redux-anecdotes/src/components/Filter.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { setFilter } from "../reducers/filterReducer";
+
+const Filter = () => {
+    const dispatch = useDispatch();
+
+    const handleChange = (event) => {
+        dispatch(setFilter(event.target.value));
+    };
+
+    const style = {
+        marginBottom: 10,
+    };
+
+    return (
+        <div style={style}>
+            Filter <input onChange={handleChange} />
+        </div>
+    );
+}
+
+export default Filter;

part6/redux-anecdotes/src/components/List.js

@@ -4,7 +4,9 @@ import { addVote } from '../reducers/anecdoteReducer'
 
 const List = () => {
     const dispatch = useDispatch();
-    const anecdotes = useSelector((state) => state);
+    const anecdotes = useSelector(({ anecdotes, filter }) => {
+        return anecdotes.filter((anecdote) => anecdote.content.toLowerCase().includes(filter.toLowerCase()));
+    });
 
     const handleVote = (id) => {
         dispatch(addVote(id));

part6/redux-anecdotes/src/index.js

@@ -1,9 +1,15 @@
 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 anecdoteReducer from './reducers/anecdoteReducer'
+import filterReducer from './reducers/filterReducer'
+
+const reducer = combineReducers({
+  anecdotes: anecdoteReducer,
+  filter: filterReducer,
+})
 
 const store = createStore(reducer)
 

part6/redux-anecdotes/src/reducers/anecdoteReducer.js

@@ -37,7 +37,7 @@ export const addAnecdote = (newAnecdote) => {
   };
 };
 
-const reducer = (state = initialState, action) => {
+const anecdoteReducer = (state = initialState, action) => {
   switch (action.type) {
     case "VOTE": {
       const { id } = action.data;
@@ -59,4 +59,4 @@ const reducer = (state = initialState, action) => {
   }
 };
 
-export default reducer
+export default anecdoteReducer

part6/redux-anecdotes/src/reducers/filterReducer.js

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = "";
+
+const filterSlice = createSlice({
+  name: "filter",
+  initialState,
+  reducers: {
+    setFilter(state, action) {
+      state = action.payload;
+      return state;
+    },
+  },
+});
+
+export const { setFilter } = filterSlice.actions;
+export default filterSlice.reducer;