Upload 6.8

part6/redux-anecdotes/src/App.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import List from './components/List'
+import Form from './components/Form'
+
+const App = () => {
+
+  return (
+    <div>
+      <h1>Anecdotes</h1>
+      <List />
+      <Form />
+    </div>
+  )
+}
+
+export default App

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { addAnecdote } from '../reducers/anecdoteReducer'
+
+const Form = () => {
+    const dispatch = useDispatch();
+
+    const handleNew = (event) => {
+        event.preventDefault();
+        const content = event.target.anecdote.value;
+        event.target.anecdote.value = '';
+        dispatch(addAnecdote(content));
+    };
+
+    return (
+        <div>
+            <h2>Add new anecdote</h2>
+            <form onSubmit={handleNew}>
+                <div>
+                    <input name="anecdote" />
+                </div>
+                <button type="submit">Submit</button>
+            </form>
+        </div>
+    );
+};
+
+export default Form;

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { addVote } from '../reducers/anecdoteReducer'
+
+const List = () => {
+    const dispatch = useDispatch();
+    const anecdotes = useSelector((state) => state);
+
+    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>
+    );
+};
+
+export default List;

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

@@ -0,0 +1,14 @@
+const Notification = () => {
+  const style = {
+    border: 'solid',
+    padding: 10,
+    borderWidth: 1
+  }
+  return (
+    <div style={style}>
+      render here notification...
+    </div>
+  )
+}
+
+export default Notification

part6/redux-anecdotes/src/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createStore } from 'redux'
+import { Provider } from 'react-redux'
+import App from './App'
+import reducer from './reducers/anecdoteReducer'
+
+const store = createStore(reducer)
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+)

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

@@ -0,0 +1,62 @@
+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)
+
+export const addVote = (id) => {
+  return {
+    type: "VOTE",
+    data: { id },
+  };
+};
+
+export const addAnecdote = (newAnecdote) => {
+  return {
+    type: "NEW",
+    data: {
+      content: newAnecdote,
+      id: getId(),
+      votes: 0,
+    },
+  };
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    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 reducer