Upload 6.13

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 (
     <div>
       <h1>Anecdotes</h1>
+      <Notification />
       <Filter />
       <List />
       <Form />
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

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

@@ -18,6 +18,6 @@ const Filter = () => {
       Filter <input onChange={handleChange} />
     </div>
   );
-}
+};
 
 export default Filter;

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

@@ -1,6 +1,7 @@
-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();
@@ -8,8 +9,9 @@ const Form = () => {
   const handleNew = (event) => {
     event.preventDefault();
     const content = event.target.anecdote.value;
-        event.target.anecdote.value = '';
-        dispatch(addAnecdote(content));
+    event.target.anecdote.value = "";
+    dispatch(add(content));
+    dispatch(setNotification(`You added "${content}"`));
   };
 
   return (

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

@@ -1,24 +1,38 @@
-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()));
+    return anecdotes.filter((anecdote) =>
+      anecdote.content.toLowerCase().includes(filter.toLowerCase())
+    );
   });
 
   const handleVote = (id) => {
-        dispatch(addVote(id));
-    }
+    dispatch(vote(id));
+    dispatch(
+      setNotification(
+        `You voted for "${
+          anecdotes.find((anecdote) => anecdote.id === id).content
+        }"`
+      )
+    );
+  };
 
   return (
     <div>
       <h2>List of anecdotes</h2>
-            {anecdotes.map((anecdote) => (
+      {anecdotes
+        .sort((a, b) => b.votes - a.votes)
+        .map((anecdote) => (
           <div key={anecdote.id}>
             <div>
-                        <p>"{anecdote.content}"&nbsp;has&nbsp;{anecdote.votes}&nbsp;votes<br />
+              <p>
+                "{anecdote.content}"&nbsp;has&nbsp;{anecdote.votes}&nbsp;votes
+                <br />
                 <button onClick={() => handleVote(anecdote.id)}>Vote</button>
               </p>
             </div>

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

@@ -1,14 +1,15 @@
-const Notification = () => {
-  const style = {
-    border: 'solid',
-    padding: 10,
-    borderWidth: 1
-  }
-  return (
-    <div style={style}>
-      render here notification...
-    </div>
-  )
-}
+import React from "react";
+import { useSelector } from "react-redux";
 
-export default Notification
+const Notification = () => {
+  const notification = useSelector((state) => state.notification);
+  const style = {
+    padding: 10,
+    borderWidth: 1,
+    color: "green",
+  };
+
+  return <div style={style}>{notification}</div>;
+};
+
+export default Notification;

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(
   <Provider store={store}>
     <App />
   </Provider>
-)
+);

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,
+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
+export const { vote, add } = anecdoteSlice.actions;
+export default anecdoteSlice.reducer;

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;

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;