Upload 6.13

part6/redux-anecdotes/src/App.js

@@ -1,18 +1,19 @@
-import React from 'react'
+import React from "react";
-import List from './components/List'
+import List from "./components/List";
-import Form from './components/Form'
+import Form from "./components/Form";
-import Filter from './components/Filter'
+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) => {
+  const handleChange = (event) => {
-        dispatch(setFilter(event.target.value));
+    dispatch(setFilter(event.target.value));
-    };
+  };
 
-    const style = {
+  const style = {
-        marginBottom: 10,
+    marginBottom: 10,
-    };
+  };
 
-    return (
+  return (
-        <div style={style}>
+    <div style={style}>
-            Filter <input onChange={handleChange} />
+      Filter <input onChange={handleChange} />
-        </div>
+    </div>
-    );
+  );
-}
+};
 
 export default Filter;

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

@@ -1,28 +1,30 @@
-import React from 'react'
+import React from "react";
-import { useDispatch } from 'react-redux'
+import { useDispatch } from "react-redux";
-import { addAnecdote } from '../reducers/anecdoteReducer'
+import { add } from "../reducers/anecdoteReducer";
+import { setNotification } from "../reducers/notificationReducer";
 
 const Form = () => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-    const handleNew = (event) => {
+  const handleNew = (event) => {
-        event.preventDefault();
+    event.preventDefault();
-        const content = event.target.anecdote.value;
+    const content = event.target.anecdote.value;
-        event.target.anecdote.value = '';
+    event.target.anecdote.value = "";
-        dispatch(addAnecdote(content));
+    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>
+          <input name="anecdote" />
-            <form onSubmit={handleNew}>
-                <div>
-                    <input name="anecdote" />
-                </div>
-                <button type="submit">Submit</button>
-            </form>
         </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 React from "react";
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from "react-redux";
-import { addVote } from '../reducers/anecdoteReducer'
+import { vote } from "../reducers/anecdoteReducer";
+import { setNotification } from "../reducers/notificationReducer";
 
 const List = () => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
-    const anecdotes = useSelector(({ anecdotes, filter }) => {
+  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));
-    }
-
-    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 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 = () => {
+import React from "react";
-  const style = {
+import { useSelector } from "react-redux";
-    border: 'solid',
-    padding: 10,
-    borderWidth: 1
-  }
-  return (
-    <div style={style}>
-      render here notification...
-    </div>
-  )
-}
 
-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 React from "react";
-import ReactDOM from 'react-dom/client'
+import ReactDOM from "react-dom/client";
-import { createStore, combineReducers } from 'redux'
+import { Provider } from "react-redux";
-import { Provider } from 'react-redux'
+import store from "./reducers/store";
-import App from './App'
+import App from "./App";
-import anecdoteReducer from './reducers/anecdoteReducer'
-import filterReducer from './reducers/filterReducer'
 
-const reducer = combineReducers({
+ReactDOM.createRoot(document.getElementById("root")).render(
-  anecdotes: anecdoteReducer,
-  filter: filterReducer,
-})
-
-const store = createStore(reducer)
-
-ReactDOM.createRoot(document.getElementById('root')).render(
   <Provider store={store}>
     <App />
   </Provider>
-)
+);

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

@@ -1,62 +1,45 @@
-const anecdotesAtStart = [
+import { createSlice } from "@reduxjs/toolkit";
-  '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 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
+    votes: 0,
-  }
-}
-
-const initialState = anecdotesAtStart.map(asObject)
-
-export const addVote = (id) => {
-  return {
-    type: "VOTE",
-    data: { id },
   };
 };
 
-export const addAnecdote = (newAnecdote) => {
+const initialState = anecdotesAtStart.map(asObject);
-  return {
+
-    type: "NEW",
+const anecdoteSlice = createSlice({
-    data: {
+  name: "anecdotes",
-      content: newAnecdote,
+  initialState,
-      id: getId(),
+  reducers: {
-      votes: 0,
+    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) => {
+export const { vote, add } = anecdoteSlice.actions;
-  switch (action.type) {
+export default anecdoteSlice.reducer;
-    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

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;