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

@@ -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 (
-        <div style={style}>
-            Filter <input onChange={handleChange} />
-        </div>
-    );
-}
+  return (
+    <div style={style}>
+      Filter <input onChange={handleChange} />
+    </div>
+  );
+};
 
-export default Filter;
+export default Filter;

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 (
+    <div>
+      <h2>Add new anecdote</h2>
+      <form onSubmit={handleNew}>
         <div>
-            <h2>Add new anecdote</h2>
-            <form onSubmit={handleNew}>
-                <div>
-                    <input name="anecdote" />
-                </div>
-                <button type="submit">Submit</button>
-            </form>
+          <input name="anecdote" />
         </div>
-    );
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
 };
 
 export default Form;

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 (
-        <div>
-            <h2>List of anecdotes</h2>
-            {anecdotes.map((anecdote) => (
-                <div key={anecdote.id}>
-                    <div>
-                        <p>"{anecdote.content}"&nbsp;has&nbsp;{anecdote.votes}&nbsp;votes<br />
-                        <button onClick={() => handleVote(anecdote.id)}>Vote</button>
-                        </p>
-                    </div>
-                </div>
-            ))}
-        </div>
+  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 (
+    <div>
+      <h2>List of anecdotes</h2>
+      {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 />
+                <button onClick={() => handleVote(anecdote.id)}>Vote</button>
+              </p>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
 };
 
 export default List;

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

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

@@ -14,4 +14,4 @@ const filterSlice = createSlice({
 });
 
 export const { setFilter } = filterSlice.actions;
-export default filterSlice.reducer;
+export default filterSlice.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;