renamed

Pt6bAnecdotes/src/App.js

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { initializeAnecdotes } from "./reducers/anecdoteReducer";
+import AnecdoteForm from "./components/AnecdoteForm";
+import AnecdoteList from "./components/AnecdoteList";
+import Notification from "./components/Notification";
+import Filter from "./components/Filter";
+
+const App = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(initializeAnecdotes());
+  }, [dispatch]);
+
+  return (
+    <div>
+      <Notification />
+      <Filter />
+      <AnecdoteList />
+      <AnecdoteForm />
+    </div>
+  );
+};
+
+export default App;

Pt6bAnecdotes/src/components/AnecdoteForm.js

@@ -0,0 +1,33 @@
+import { useDispatch } from "react-redux";
+import { createAnecdote, newAnecdote } from "../reducers/anecdoteReducer";
+
+const AnecdoteForm = () => {
+  const dispatch = useDispatch();
+  return (
+    <div>
+      <h2>create new</h2>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          dispatch(
+            createAnecdote({
+              content: e.target.anecdote.value,
+              votes: 0,
+            })
+          );
+          e.target.anecdote.value = "";
+        }}
+      >
+        <div>
+          <input
+            name="anecdote"
+            type="text"
+            placeholder="Writing my new acectode..."
+          />
+        </div>
+        <button type="sumbit">create</button>
+      </form>
+    </div>
+  );
+};
+export default AnecdoteForm;

Pt6bAnecdotes/src/components/AnecdoteList.js

@@ -0,0 +1,39 @@
+import { useSelector, useDispatch } from "react-redux";
+import { vote } from "../reducers/anecdoteReducer";
+import {
+  setNotification,
+} from "../reducers/notificationReducer";
+
+const AnecdoteList = () => {
+  const dispatch = useDispatch();
+  const anecdotes = useSelector((state) => state.anecdotes);
+  const filter = useSelector((state) => state.filter);
+
+  return (
+    <>
+      <h2>Anecdotes</h2>
+      {[...anecdotes]
+        .sort((a, b) => b.votes - a.votes)
+        .filter((el) => el.content.toLowerCase().includes(filter.toLowerCase()))
+        .map((anecdote) => (
+          <div key={anecdote.id}>
+            <div>{anecdote.content}</div>
+            <div>
+              has {anecdote.votes}
+              <button
+                onClick={() => {
+                  dispatch(vote(anecdote));
+                  dispatch(
+                    setNotification("you have clicked the vote button", 5)
+                  );
+                }}
+              >
+                vote
+              </button>
+            </div>
+          </div>
+        ))}
+    </>
+  );
+};
+export default AnecdoteList;

Pt6bAnecdotes/src/components/Filter.js

@@ -0,0 +1,16 @@
+import { useDispatch } from "react-redux";
+import { setFilter } from "../reducers/filterReducer";
+
+const Filter = () => {
+  const dispatch = useDispatch();
+  const handleChange = (e) => {
+    e.preventDefault();
+    dispatch(setFilter(e.target.value));
+  };
+  return (
+    <>
+      filter <input onChange={handleChange} />
+    </>
+  );
+};
+export default Filter;

Pt6bAnecdotes/src/components/Notification.js

@@ -0,0 +1,16 @@
+import { useSelector } from "react-redux";
+
+const Notification = () => {
+  const notification = useSelector((state) => state.notification);
+
+  const style = {
+    border: "solid",
+    padding: 10,
+    borderWidth: 1,
+    display: notification.length ? "" : "none",
+  };
+  return <div style={style} >{notification}</div>;
+};
+
+export default Notification;
+

Pt6bAnecdotes/src/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+import App from "./App";
+import anecdoteReducer from "./reducers/anecdoteReducer";
+import filterReducer from "./reducers/filterReducer";
+import notificationReducer from "./reducers/notificationReducer";
+
+const store = configureStore({
+  reducer: {
+    anecdotes: anecdoteReducer,
+    filter: filterReducer,
+    notification: notificationReducer,
+  },
+});
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);

Pt6bAnecdotes/src/reducers/anecdoteReducer.js

@@ -0,0 +1,42 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { getAll, create, increaseVote } from "../service/anecdotes";
+
+const anecdoteSlice = createSlice({
+  name: "anecdote",
+  initialState: [],
+  reducers: {
+    increment(state, action) {
+      let anecdote = state.find((el) => el.id === action.payload);
+      anecdote.votes += 1;
+      state.map((el) => (el.id !== action.payload ? el : anecdote));
+    },
+    newAnecdote(state, action) {
+      state.push(action.payload);
+    },
+    setAnecdotes(state, action) {
+      return action.payload;
+    },
+  },
+});
+export const { increment, newAnecdote, setAnecdotes } = anecdoteSlice.actions;
+
+export const initializeAnecdotes = () => {
+  return async (dispatch) => {
+    const anecdotes = await getAll();
+    dispatch(setAnecdotes(anecdotes));
+  };
+};
+export const createAnecdote = (an) => {
+  return async (dispatch) => {
+    const anecdote = await create(an);
+    dispatch(newAnecdote(anecdote));
+  };
+};
+export const vote = (anecdote) => {
+  return async (dispatch) => {
+   const an= await increaseVote(anecdote);
+    dispatch(increment(an.id));
+  };
+};
+
+export default anecdoteSlice.reducer;

Pt6bAnecdotes/src/reducers/filterReducer.js

@@ -0,0 +1,14 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const filterSlice = createSlice({
+  name: "filter",
+  initialState: "",
+  reducers: {
+    setFilter(state, action) {
+      return action.payload;
+    },
+  },
+});
+
+export const { setFilter } = filterSlice.actions;
+export default filterSlice.reducer;

Pt6bAnecdotes/src/reducers/notificationReducer.js

@@ -0,0 +1,23 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const notificationSlice = createSlice({
+  name: "notification",
+  initialState: [],
+  reducers: {
+    make(state, action, time) {
+      state.push(action.payload);
+    },
+    remove(state, action) {
+      state.pop();
+    },
+  },
+});
+const { make, remove} = notificationSlice.actions;
+export const setNotification = (message,time) => {
+  return (dispatch) => {
+    dispatch(make(message));
+    setTimeout(() => dispatch(remove()), time * 1000);
+  };
+};
+
+export default notificationSlice.reducer;

Pt6bAnecdotes/src/service/anecdotes.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const baseUrl = "http://localhost:3001/anecdotes";
+
+const getAll = async () => {
+  const resp = await axios.get(baseUrl);
+  return resp.data;
+};
+const create = async (data) => {
+  const resp = await axios.post(baseUrl, data);
+  return resp.data;
+};
+const increaseVote = async (element) => {
+  const id = element.id;
+  const newElement = { ...element, votes: element.votes + 1 };
+  const resp = await axios.put(baseUrl + "/" + id, newElement);
+  return resp.data
+};
+
+export { getAll, create, increaseVote };