Upload 6.14 & 6.15

part6/redux-anecdotes/db.json

@@ -0,0 +1,34 @@
+{
+  "anecdotes": [
+    {
+      "content": "If it hurts, do it more often",
+      "id": "47145",
+      "votes": 0
+    },
+    {
+      "content": "Adding manpower to a late software project makes it later!",
+      "id": "21149",
+      "votes": 0
+    },
+    {
+      "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.",
+      "id": "69581",
+      "votes": 0
+    },
+    {
+      "content": "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
+      "id": "36975",
+      "votes": 0
+    },
+    {
+      "content": "Premature optimization is the root of all evil.",
+      "id": "25170",
+      "votes": 0
+    },
+    {
+      "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
+    }
+  ]
+}

part6/redux-anecdotes/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
@@ -18,7 +19,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "server": "json-server -p3001 --watch db.json"
   },
   "eslintConfig": {
     "extends": [
@@ -37,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "json-server": "^0.17.3"
   }
 }

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

@@ -2,15 +2,17 @@ import React from "react";
 import { useDispatch } from "react-redux";
 import { add } from "../reducers/anecdoteReducer";
 import { setNotification } from "../reducers/notificationReducer";
+import anecdoteService from "../services/anecdotes";
 
 const Form = () => {
   const dispatch = useDispatch();
 
-  const handleNew = (event) => {
+  const handleNew = async (event) => {
     event.preventDefault();
     const content = event.target.anecdote.value;
     event.target.anecdote.value = "";
-    dispatch(add(content));
+    const newAnecdote = await anecdoteService.createNew(content);
+    dispatch(add(newAnecdote));
     dispatch(setNotification(`You added "${content}"`));
   };
 

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

@@ -1,29 +1,8 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-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);
-
 const anecdoteSlice = createSlice({
   name: "anecdotes",
-  initialState,
+  initialState: [],
   reducers: {
     vote(state, action) {
       const id = action.payload;
@@ -32,11 +11,7 @@ const anecdoteSlice = createSlice({
     },
     add(state, action) {
       const anecdote = action.payload;
-      state.push({
-        content: anecdote,
-        id: getId(),
-        votes: 0,
-      });
+      state.push(anecdote);
     },
   },
 });

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

@@ -1,7 +1,8 @@
 import { configureStore } from "@reduxjs/toolkit";
-import anecdoteReducer from "./anecdoteReducer";
+import anecdoteReducer, { add } from "./anecdoteReducer";
 import filterReducer from "./filterReducer";
 import notificationReducer from "./notificationReducer";
+import anecdoteService from "../services/anecdotes";
 
 const store = configureStore({
   reducer: {
@@ -11,4 +12,10 @@ const store = configureStore({
   },
 });
 
+anecdoteService.getAll().then((anecdotes) => {
+  anecdotes.forEach((anecdote) => {
+    store.dispatch(add(anecdote));
+  });
+});
+
 export default store;

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

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+const baseUrl = "http://localhost:3001/anecdotes";
+
+const getAll = async () => {
+  const response = await axios.get(baseUrl);
+  return response.data;
+};
+
+const getId = () => (100000 * Math.random()).toFixed(0);
+
+const createNew = async (content) => {
+  const object = { content, id: getId, votes: 0 };
+  const response = await axios.post(baseUrl, object);
+  return response.data;
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default { getAll, createNew };