diff --git a/part6/redux-anecdotes/src/App.js b/part6/redux-anecdotes/src/App.js index 5243334..eb08cbb 100644 --- a/part6/redux-anecdotes/src/App.js +++ b/part6/redux-anecdotes/src/App.js @@ -1,18 +1,19 @@ -import React from 'react' -import List from './components/List' -import Form from './components/Form' -import Filter from './components/Filter' +import React from "react"; +import List from "./components/List"; +import Form from "./components/Form"; +import Filter from "./components/Filter"; +import Notification from "./components/Notification"; const App = () => { - return (

Anecdotes

+
- ) -} + ); +}; -export default App \ No newline at end of file +export default App; diff --git a/part6/redux-anecdotes/src/components/Filter.js b/part6/redux-anecdotes/src/components/Filter.js index a5dfdba..5d4928b 100644 --- a/part6/redux-anecdotes/src/components/Filter.js +++ b/part6/redux-anecdotes/src/components/Filter.js @@ -3,21 +3,21 @@ import { useDispatch } from "react-redux"; import { setFilter } from "../reducers/filterReducer"; const Filter = () => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); - const handleChange = (event) => { - dispatch(setFilter(event.target.value)); - }; + const handleChange = (event) => { + dispatch(setFilter(event.target.value)); + }; - const style = { - marginBottom: 10, - }; + const style = { + marginBottom: 10, + }; - return ( -
- Filter -
- ); -} + return ( +
+ Filter +
+ ); +}; -export default Filter; \ No newline at end of file +export default Filter; diff --git a/part6/redux-anecdotes/src/components/Form.js b/part6/redux-anecdotes/src/components/Form.js index f54c4c0..1eae2a6 100644 --- a/part6/redux-anecdotes/src/components/Form.js +++ b/part6/redux-anecdotes/src/components/Form.js @@ -1,28 +1,30 @@ -import React from 'react' -import { useDispatch } from 'react-redux' -import { addAnecdote } from '../reducers/anecdoteReducer' +import React from "react"; +import { useDispatch } from "react-redux"; +import { add } from "../reducers/anecdoteReducer"; +import { setNotification } from "../reducers/notificationReducer"; const Form = () => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); - const handleNew = (event) => { - event.preventDefault(); - const content = event.target.anecdote.value; - event.target.anecdote.value = ''; - dispatch(addAnecdote(content)); - }; + const handleNew = (event) => { + event.preventDefault(); + const content = event.target.anecdote.value; + event.target.anecdote.value = ""; + dispatch(add(content)); + dispatch(setNotification(`You added "${content}"`)); + }; - return ( + return ( +
+

Add new anecdote

+
-

Add new anecdote

- -
- -
- - +
- ); + + +
+ ); }; export default Form; diff --git a/part6/redux-anecdotes/src/components/List.js b/part6/redux-anecdotes/src/components/List.js index af68f52..ecdf080 100644 --- a/part6/redux-anecdotes/src/components/List.js +++ b/part6/redux-anecdotes/src/components/List.js @@ -1,31 +1,45 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { addVote } from '../reducers/anecdoteReducer' +import React from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { vote } from "../reducers/anecdoteReducer"; +import { setNotification } from "../reducers/notificationReducer"; const List = () => { - const dispatch = useDispatch(); - const anecdotes = useSelector(({ anecdotes, filter }) => { - return anecdotes.filter((anecdote) => anecdote.content.toLowerCase().includes(filter.toLowerCase())); - }); - - const handleVote = (id) => { - dispatch(addVote(id)); - } - - return ( -
-

List of anecdotes

- {anecdotes.map((anecdote) => ( -
-
-

"{anecdote.content}" has {anecdote.votes} votes
- -

-
-
- ))} -
+ const dispatch = useDispatch(); + const anecdotes = useSelector(({ anecdotes, filter }) => { + return anecdotes.filter((anecdote) => + anecdote.content.toLowerCase().includes(filter.toLowerCase()) ); + }); + + const handleVote = (id) => { + dispatch(vote(id)); + dispatch( + setNotification( + `You voted for "${ + anecdotes.find((anecdote) => anecdote.id === id).content + }"` + ) + ); + }; + + return ( +
+

List of anecdotes

+ {anecdotes + .sort((a, b) => b.votes - a.votes) + .map((anecdote) => ( +
+
+

+ "{anecdote.content}" has {anecdote.votes} votes +
+ +

+
+
+ ))} +
+ ); }; export default List; diff --git a/part6/redux-anecdotes/src/components/Notification.js b/part6/redux-anecdotes/src/components/Notification.js index 75ec1e0..f9373f2 100644 --- a/part6/redux-anecdotes/src/components/Notification.js +++ b/part6/redux-anecdotes/src/components/Notification.js @@ -1,14 +1,15 @@ -const Notification = () => { - const style = { - border: 'solid', - padding: 10, - borderWidth: 1 - } - return ( -
- render here notification... -
- ) -} +import React from "react"; +import { useSelector } from "react-redux"; -export default Notification \ No newline at end of file +const Notification = () => { + const notification = useSelector((state) => state.notification); + const style = { + padding: 10, + borderWidth: 1, + color: "green", + }; + + return
{notification}
; +}; + +export default Notification; diff --git a/part6/redux-anecdotes/src/index.js b/part6/redux-anecdotes/src/index.js index 16b53e5..3edf00b 100644 --- a/part6/redux-anecdotes/src/index.js +++ b/part6/redux-anecdotes/src/index.js @@ -1,20 +1,11 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import { createStore, combineReducers } from 'redux' -import { Provider } from 'react-redux' -import App from './App' -import anecdoteReducer from './reducers/anecdoteReducer' -import filterReducer from './reducers/filterReducer' +import React from "react"; +import ReactDOM from "react-dom/client"; +import { Provider } from "react-redux"; +import store from "./reducers/store"; +import App from "./App"; -const reducer = combineReducers({ - anecdotes: anecdoteReducer, - filter: filterReducer, -}) - -const store = createStore(reducer) - -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( -) \ No newline at end of file +); diff --git a/part6/redux-anecdotes/src/reducers/anecdoteReducer.js b/part6/redux-anecdotes/src/reducers/anecdoteReducer.js index f7d4fe0..2b7c4c4 100644 --- a/part6/redux-anecdotes/src/reducers/anecdoteReducer.js +++ b/part6/redux-anecdotes/src/reducers/anecdoteReducer.js @@ -1,62 +1,45 @@ -const anecdotesAtStart = [ - 'If it hurts, do it more often', - 'Adding manpower to a late software project makes it later!', - 'The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.', - 'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.', - 'Premature optimization is the root of all evil.', - 'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.' -] +import { createSlice } from "@reduxjs/toolkit"; -const getId = () => (100000 * Math.random()).toFixed(0) +const anecdotesAtStart = [ + "If it hurts, do it more often", + "Adding manpower to a late software project makes it later!", + "The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.", + "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.", + "Premature optimization is the root of all evil.", + "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.", +]; + +const getId = () => (100000 * Math.random()).toFixed(0); const asObject = (anecdote) => { return { content: anecdote, id: getId(), - votes: 0 - } -} - -const initialState = anecdotesAtStart.map(asObject) - -export const addVote = (id) => { - return { - type: "VOTE", - data: { id }, + votes: 0, }; }; -export const addAnecdote = (newAnecdote) => { - return { - type: "NEW", - data: { - content: newAnecdote, - id: getId(), - votes: 0, +const initialState = anecdotesAtStart.map(asObject); + +const anecdoteSlice = createSlice({ + name: "anecdotes", + initialState, + reducers: { + vote(state, action) { + const id = action.payload; + const anecdote = state.find((a) => a.id === id); + anecdote.votes += 1; }, - }; -}; + add(state, action) { + const anecdote = action.payload; + state.push({ + content: anecdote, + id: getId(), + votes: 0, + }); + }, + }, +}); -const anecdoteReducer = (state = initialState, action) => { - switch (action.type) { - case "VOTE": { - const { id } = action.data; - const oldAnecdote = state.find((a) => a.id === id); - const updatedAnecdote = { - ...oldAnecdote, - votes: oldAnecdote.votes + 1, - }; - const mappedAnecdotes = state.map((anecdote) => - anecdote.id !== id ? anecdote : updatedAnecdote - ); - return mappedAnecdotes.sort((a, b) => b.votes - a.votes); - } - case "NEW": { - return [...state, action.data]; - } - default: - return state; - } -}; - -export default anecdoteReducer \ No newline at end of file +export const { vote, add } = anecdoteSlice.actions; +export default anecdoteSlice.reducer; diff --git a/part6/redux-anecdotes/src/reducers/filterReducer.js b/part6/redux-anecdotes/src/reducers/filterReducer.js index 79c4945..faf6f90 100644 --- a/part6/redux-anecdotes/src/reducers/filterReducer.js +++ b/part6/redux-anecdotes/src/reducers/filterReducer.js @@ -14,4 +14,4 @@ const filterSlice = createSlice({ }); export const { setFilter } = filterSlice.actions; -export default filterSlice.reducer; \ No newline at end of file +export default filterSlice.reducer; diff --git a/part6/redux-anecdotes/src/reducers/notificationReducer.js b/part6/redux-anecdotes/src/reducers/notificationReducer.js new file mode 100644 index 0000000..9b28be9 --- /dev/null +++ b/part6/redux-anecdotes/src/reducers/notificationReducer.js @@ -0,0 +1,26 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const notificationSlice = createSlice({ + name: "notification", + initialState: "", + reducers: { + showNotification(state, action) { + return action.payload; + }, + hideNotification(state, action) { + return ""; + }, + }, +}); + +export const { showNotification, hideNotification } = notificationSlice.actions; + +export const setNotification = (text) => { + return (dispatch) => { + dispatch(showNotification(text)); + setTimeout(() => { + dispatch(hideNotification()); + }, 5000); + }; +}; +export default notificationSlice.reducer; diff --git a/part6/redux-anecdotes/src/reducers/store.js b/part6/redux-anecdotes/src/reducers/store.js new file mode 100644 index 0000000..19b860e --- /dev/null +++ b/part6/redux-anecdotes/src/reducers/store.js @@ -0,0 +1,14 @@ +import { configureStore } from "@reduxjs/toolkit"; +import anecdoteReducer from "./anecdoteReducer"; +import filterReducer from "./filterReducer"; +import notificationReducer from "./notificationReducer"; + +const store = configureStore({ + reducer: { + anecdotes: anecdoteReducer, + filter: filterReducer, + notification: notificationReducer, + }, +}); + +export default store;