Upload 6.19

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(add(newAnecdote));
-    dispatch(setNotification(`You added "${content}"`));
+    dispatch(addAnecdote(content));
+    dispatch(setNotification(`You added "${content}"`, 5));
   };
 
   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 };