6b: Many Reducers - Finishing the filter

PERSONAL_NOTES.md

@@ -402,6 +402,9 @@ Moving state management outside of React components using the currently most pop
 - combine two existing reducers with the combineReducers function
 - combined reducers work in such a way that every action gets handled in every part of the combined reducer.
 
+#### Finishing the filters
+- 
+
 ### 6c: Communicating with server in a redux application
 
 ### 6d: Connect

part6/notes-redux/src/App.js

@@ -1,21 +1,14 @@
 import React from 'react';
 import NewNote from './components/NewNote'
+import VisibilityFilter from './components/VisibilityFilter'
 import Notes from './components/Notes'
 import './App.css';
 
 function App() {
-  const filterSelected = (value) => {
-    console.log(value)
-  }
-
   return (
     <div className="App">
       <NewNote />
-      <div>
-        all <input type="radio" name="filter" onChange={() => filterSelected('ALL')} />
-        important <input type="radio" name="filter" onChange={() => filterSelected('IMPORTANT')} />
-        nonimportant <input type="radio" name="filter" onChange={() => filterSelected('NONIMPORTANT')} />
-      </div>
+      <VisibilityFilter />
       <Notes />
     </div>
   );

part6/notes-redux/src/components/Notes.js

@@ -13,8 +13,15 @@ const Note = ({ note, handleClick }) => {
 }
 
 const Notes = () => {
-  const notes = useSelector(state => state)
   const dispatch = useDispatch()
+  const notes = useSelector(({ filter, notes}) => {
+    if(filter === 'ALL') {
+      return notes
+    } 
+    return filter === 'IMPORTANT'
+      ? notes.filter(n => n.important)
+      : notes.filter(n => !n.important)
+  })
 
   return (
     <ul>

part6/notes-redux/src/components/VisibilityFilter.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { filterChange } from '../reducers/filterReducer'
+import { useDispatch } from 'react-redux'
+
+const VisibilityFilter = () => {
+  const dispatch = useDispatch()
+
+  return (
+    <div>
+      all
+      <input
+        type="radio"
+        name="filter"
+        onChange={() => dispatch(filterChange('ALL'))}
+        />
+      important
+      <input type="radio"
+        name="filter"
+        onChange={() => dispatch(filterChange('IMPORTANT'))}
+        />
+      nonimportant
+      <input type="radio"
+        name="filter"
+        onChange={() => dispatch(filterChange('NONIMPORTANT'))}
+      />
+    </div>
+  )
+}
+
+export default VisibilityFilter

part6/notes-redux/src/index.js

@@ -9,9 +9,8 @@ import filterReducer from './reducers/filterReducer'
 
 import './App.css';
 
-import { createNote } from './reducers/noteReducer'
-import { filterChange } from './reducers/filterReducer'
-
+// import { createNote } from './reducers/noteReducer'
+// import { filterChange } from './reducers/filterReducer'
 
 const reducer = combineReducers({
   notes: noteReducer,
@@ -20,15 +19,14 @@ const reducer = combineReducers({
 
 const store = createStore(reducer)
 
-
 ReactDOM.render(
-  // <Provider store={store}>
-  //   <App />
-  // </Provider>,
-  <div />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
   )
 
-  store.subscribe(() => console.log(store.getState()))
-  store.dispatch(createNote('combineReducers forms one reducer from many simple reducers'))
-  store.dispatch(filterChange('IMPORTANT'))
+  console.log(store.getState())
+  // store.subscribe(() => console.log(store.getState()))
+  // store.dispatch(createNote('combineReducers forms one reducer from many simple reducers'))
+  // store.dispatch(filterChange('IMPORTANT'))