Upload 6.19

part6/redux-anecdotes/db.json

@@ -3,12 +3,12 @@
     {
       "content": "If it hurts, do it more often",
       "id": "47145",
-      "votes": 0
+      "votes": 1
     },
     {
       "content": "Adding manpower to a late software project makes it later!",
       "id": "21149",
-      "votes": 0
+      "votes": 2
     },
     {
       "content": "The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.",
@@ -29,6 +29,11 @@
       "content": "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.",
       "id": "98312",
       "votes": 0
+    },
+    {
+      "content": "New",
+      "votes": 0,
+      "id": "mPUXy_Q"
     }
   ]
 }

part6/redux-anecdotes/src/App.js

@@ -1,10 +1,17 @@
 import React from "react";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import List from "./components/List";
 import Form from "./components/Form";
 import Filter from "./components/Filter";
 import Notification from "./components/Notification";
+import { initializeAnecdotes } from "./reducers/anecdoteReducer";
 
 const App = () => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(initializeAnecdotes());
+  }, [dispatch]);
   return (
     <div>
       <h1>Anecdotes</h1>

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

@@ -1,8 +1,7 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { add } from "../reducers/anecdoteReducer";
 import { setNotification } from "../reducers/notificationReducer";
-import anecdoteService from "../services/anecdotes";
+import { addAnecdote } from "../reducers/anecdoteReducer";
 
 const Form = () => {
   const dispatch = useDispatch();
@@ -11,9 +10,8 @@ const Form = () => {
     event.preventDefault();
     const content = event.target.anecdote.value;
     event.target.anecdote.value = "";
-    const newAnecdote = await anecdoteService.createNew(content);
+    dispatch(addAnecdote(content));
-    dispatch(add(newAnecdote));
+    dispatch(setNotification(`You added "${content}"`, 5));
-    dispatch(setNotification(`You added "${content}"`));
   };
 
   return (

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { vote } from "../reducers/anecdoteReducer";
+import { voteAnecdote } from "../reducers/anecdoteReducer";
 import { setNotification } from "../reducers/notificationReducer";
 
 const List = () => {
@@ -12,12 +12,13 @@ const List = () => {
   });
 
   const handleVote = (id) => {
-    dispatch(vote(id));
+    dispatch(voteAnecdote(id));
     dispatch(
       setNotification(
         `You voted for "${
           anecdotes.find((anecdote) => anecdote.id === id).content
-        }"`
+        }"`,
+        5
       )
     );
   };

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

@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
+import anecdoteService from "../services/anecdotes";
 
 const anecdoteSlice = createSlice({
   name: "anecdotes",
@@ -13,8 +14,33 @@ const anecdoteSlice = createSlice({
       const anecdote = action.payload;
       state.push(anecdote);
     },
+    set(state, action) {
+      return action.payload;
+    },
   },
 });
 
-export const { vote, add } = anecdoteSlice.actions;
+export const { vote, add, set } = anecdoteSlice.actions;
+
+export const initializeAnecdotes = () => {
+  return async (dispatch) => {
+    const anecdotes = await anecdoteService.getAll();
+    dispatch(set(anecdotes));
+  };
+};
+
+export const addAnecdote = (content) => {
+  return async (dispatch) => {
+    const anecdote = await anecdoteService.createNew(content);
+    dispatch(add(anecdote));
+  };
+};
+
+export const voteAnecdote = (id) => {
+  return async (dispatch) => {
+    await anecdoteService.addVote(id);
+    dispatch(vote(id));
+  };
+};
+
 export default anecdoteSlice.reducer;

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

@@ -15,12 +15,12 @@ const notificationSlice = createSlice({
 
 export const { showNotification, hideNotification } = notificationSlice.actions;
 
-export const setNotification = (text) => {
+export const setNotification = (text, time) => {
   return (dispatch) => {
     dispatch(showNotification(text));
     setTimeout(() => {
       dispatch(hideNotification());
-    }, 5000);
+    }, time * 1000);
   };
 };
 export default notificationSlice.reducer;

part6/redux-anecdotes/src/services/anecdotes.js

@@ -15,5 +15,14 @@ const createNew = async (content) => {
   return response.data;
 };
 
+const addVote = async (id) => {
+  const anecdotes = await getAll();
+  const anecdote = anecdotes.find((a) => a.id === id);
+  console.log(anecdote);
+  const voted = { ...anecdote, votes: anecdote.votes + 1 };
+  const response = await axios.put(`${baseUrl}/${id}`, voted);
+  return response.data;
+};
+
 // eslint-disable-next-line import/no-anonymous-default-export
-export default { getAll, createNew };
+export default { getAll, createNew, addVote };