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.
2.8 kB · 89 lines
JavaScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import { Routes, Route, Link, Navigate } from 'react-router-dom'import Authors from './components/Authors'import Books from './components/Books'import NewBook from './components/NewBook'import { useState } from 'react'import LoginForm from './components/LoginForm'import { useApolloClient, useSubscription } from '@apollo/client'import Recommend from './components/Recommended'import { ALL_BOOKS, BOOK_ADDED } from './queries'
const updateCache = (cache, query, addedBook) => { const uniqById = a => { let seen = new Set() return a.filter(item => { let k = item.title return seen.has(k) ? false : seen.add(k) }) }
cache.updateQuery(query, ({ allBooks }) => { return { allBooks: uniqById(allBooks.concat(addedBook)) } })}
const App = () => { const [token, setToken ] = useState(null) const [errorMessage, setErrorMessage] = useState(null) const client = useApolloClient()
const padding = { paddingRight: 5 } useSubscription(BOOK_ADDED, { onData: ({ data }) => { const addedBook = data.data.bookAdded window.alert(`Book Added: ${addedBook.title} by ${addedBook.author.name}`) updateCache(client.cache, { query: ALL_BOOKS }, addedBook) } })
const logout = () => { setToken(null) localStorage.clear() client.resetStore() }
const notify = (message) => { setErrorMessage(message) setTimeout(() => { setErrorMessage(null) }, 10000) }
const Login = () => { if (token) { return ( <> <button style={padding} onClick={logout}>Log out</button> </> ) } else return <Link style={padding} to='/login'>Login</Link> }
return ( <div> <div> <Link style={padding} to='/'>Authors</Link> <Link style={padding} to='/books'>Books</Link> {token ? <Link style={padding} to='/add-book'>Add Book</Link> : null} {token ? <Link style={padding} to='/recommend'>Recommend</Link> : null} <Login /> </div>
<Routes> <Route path='/login' element={<LoginForm setToken={setToken} notify={notify} errorMessage={errorMessage} />} /> <Route path='/' element={<Authors token={token}/>}/> <Route path='/authors' element={ <Navigate replace to='/' />} /> <Route path='/books' element={<Books />}/> <Route path='/add-book' element={token ? <NewBook /> : <Navigate replace to='/login'/> }/> <Route path='/recommend' element={token ? <Recommend /> : <Navigate replace to='/login'/> }/> </Routes> </div> )}
export default App