Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/Savy011/fullstackopen-exercises. My Exercise Submissions for FullStack Open fullstackopen.com/en
Something went wrong. Try again.
1.9 kB · 61 lines
JavaScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162import AnecdoteForm from './components/AnecdoteForm'import Notification from './components/Notification'import { useContext } from 'react'import { NotifContext } from './NotifReducer'import { useQuery, useMutation, useQueryClient } from 'react-query'import { getAnecdotes, updateAnecdote } from './requests'
const App = () => { const queryClient = useQueryClient() const result = useQuery('anecdotes', getAnecdotes, { retry: 1}) const updateVoteMutation = useMutation(updateAnecdote, { onSuccess: () => { const anecdotes = queryClient.getQueryData('anecdotes') queryClient.invalidateQueries('anecdotes')
} })
const [notif, notifDispatch] = useContext(NotifContext) if ( result.status === 'loading' ) { return <div>Loading data</div> }
if (result.status === 'error') { return <div>Anecdote Service is unavailable due to problems in server </div> }
const handleVote = (anecdote) => { updateVoteMutation.mutate(anecdote) notifDispatch({ type: 'SET', payload: `Voted Anecdote '${anecdote.content}'`}) setTimeout(() => { notifDispatch({ type: 'CLEAR'}) }, 5000); }
const anecdotes = result.data
return ( <div> <h3>Anecdote App</h3> <Notification /> <AnecdoteForm /> {anecdotes.map(anecdote => <div key={anecdote.id}> <div> {anecdote.content} </div> <div> Has {anecdote.votes} Votes <button onClick={() => handleVote(anecdote)}>vote</button> </div> </div> )} </div> )}
export default App