diff --git a/part6/redux-anecdotes/db.json b/part6/redux-anecdotes/db.json
index c4c9554..434e0c4 100644
--- a/part6/redux-anecdotes/db.json
+++ b/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"
}
]
-}
+}
\ No newline at end of file
diff --git a/part6/redux-anecdotes/src/App.js b/part6/redux-anecdotes/src/App.js
index eb08cbb..896ea69 100644
--- a/part6/redux-anecdotes/src/App.js
+++ b/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 (
Anecdotes
diff --git a/part6/redux-anecdotes/src/components/Form.js b/part6/redux-anecdotes/src/components/Form.js
index 205d688..b216359 100644
--- a/part6/redux-anecdotes/src/components/Form.js
+++ b/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 (
diff --git a/part6/redux-anecdotes/src/components/List.js b/part6/redux-anecdotes/src/components/List.js
index ecdf080..5bff05f 100644
--- a/part6/redux-anecdotes/src/components/List.js
+++ b/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
)
);
};
diff --git a/part6/redux-anecdotes/src/reducers/anecdoteReducer.js b/part6/redux-anecdotes/src/reducers/anecdoteReducer.js
index 5245761..5ec2b22 100644
--- a/part6/redux-anecdotes/src/reducers/anecdoteReducer.js
+++ b/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;
diff --git a/part6/redux-anecdotes/src/reducers/notificationReducer.js b/part6/redux-anecdotes/src/reducers/notificationReducer.js
index 9b28be9..6cc1a43 100644
--- a/part6/redux-anecdotes/src/reducers/notificationReducer.js
+++ b/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;
diff --git a/part6/redux-anecdotes/src/services/anecdotes.js b/part6/redux-anecdotes/src/services/anecdotes.js
index b8c15df..0a8ac6b 100644
--- a/part6/redux-anecdotes/src/services/anecdotes.js
+++ b/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 };