diff --git a/PERSONAL_NOTES.md b/PERSONAL_NOTES.md index dccc08c..9c5714c 100644 --- a/PERSONAL_NOTES.md +++ b/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 \ No newline at end of file diff --git a/part6/notes-redux/src/App.js b/part6/notes-redux/src/App.js index 826a734..d636640 100644 --- a/part6/notes-redux/src/App.js +++ b/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 (
-
- all filterSelected('ALL')} /> - important filterSelected('IMPORTANT')} /> - nonimportant filterSelected('NONIMPORTANT')} /> -
+
); diff --git a/part6/notes-redux/src/components/Notes.js b/part6/notes-redux/src/components/Notes.js index c55a3db..4c07e24 100644 --- a/part6/notes-redux/src/components/Notes.js +++ b/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 (