diff --git a/part6/query-anecdotes/src/App.js b/part6/query-anecdotes/src/App.js index 8a3acd6..d4f4514 100644 --- a/part6/query-anecdotes/src/App.js +++ b/part6/query-anecdotes/src/App.js @@ -2,9 +2,11 @@ import AnecdoteForm from "./components/AnecdoteForm"; import Notification from "./components/Notification"; import { useQuery, useQueryClient, useMutation } from "react-query"; import { getAnecdotes, updateAnecdote } from "./components/requests"; +import { useNotificationDispatch } from "./reducers/notificationReducer"; const App = () => { const queryClient = useQueryClient(); + const dispatch = useNotificationDispatch(); const mutation = useMutation(updateAnecdote, { onSuccess: (newAnecdote) => { @@ -18,11 +20,18 @@ const App = () => { }, }); - const handleVote = (anecdote) => { + const handleVote = async (anecdote) => { mutation.mutate({ ...anecdote, votes: anecdote.votes + 1, }); + await dispatch({ + type: "SET_NOTIFICATION", + data: `You voted '${anecdote.content}'`, + }); + setTimeout(() => { + dispatch({ type: "CLEAR_NOTIFICATION" }); + }, 5000); }; const { data: anecdotes, status } = useQuery("anecdotes", getAnecdotes, { diff --git a/part6/query-anecdotes/src/components/AnecdoteForm.js b/part6/query-anecdotes/src/components/AnecdoteForm.js index a054e28..f054769 100644 --- a/part6/query-anecdotes/src/components/AnecdoteForm.js +++ b/part6/query-anecdotes/src/components/AnecdoteForm.js @@ -1,19 +1,30 @@ import { useQueryClient, useMutation } from "react-query"; import { createAnecdote } from "./requests"; +import { useNotificationDispatch } from "../reducers/notificationReducer"; const AnecdoteForm = () => { const queryClient = useQueryClient(); + const dispatch = useNotificationDispatch(); const mutation = useMutation(createAnecdote, { onSuccess: (newAnecdote) => { const anecdotes = queryClient.getQueryData("anecdotes"); queryClient.setQueryData("anecdotes", [...anecdotes, newAnecdote]); }, + onError: (err) => { + dispatch({ + type: "SET_NOTIFICATION", + data: `An error occurred: ${err.response.data.error}`, + }); + setTimeout(() => { + dispatch({ type: "CLEAR_NOTIFICATION" }); + }, 5000); + }, }); const getId = () => (100000 * Math.random()).toFixed(0); - const onCreate = (event) => { + const onCreate = async (event) => { event.preventDefault(); const content = event.target.anecdote.value; event.target.anecdote.value = ""; @@ -22,6 +33,13 @@ const AnecdoteForm = () => { id: getId(), votes: 0, }); + await dispatch({ + type: "SET_NOTIFICATION", + data: `You created '${content}'`, + }); + setTimeout(() => { + dispatch({ type: "CLEAR_NOTIFICATION" }); + }, 5000); }; return ( diff --git a/part6/query-anecdotes/src/components/Notification.js b/part6/query-anecdotes/src/components/Notification.js index 443fed8..8bbb200 100644 --- a/part6/query-anecdotes/src/components/Notification.js +++ b/part6/query-anecdotes/src/components/Notification.js @@ -1,18 +1,20 @@ +import { useNotificationValue } from "../reducers/notificationReducer"; + const Notification = () => { const style = { - border: 'solid', + border: "solid", padding: 10, borderWidth: 1, - marginBottom: 5 + marginBottom: 5, + }; + + const notification = useNotificationValue(); + + if (!notification) { + return null; } - - if (true) return null - return ( -