Add saved articles page

Now that we have a way to like all of our favorite articles, let’s create a page that will allow us to display them all. Luckily, we’ve done most of the hard work already. We can use the same ArticleList component that we’ve already made except now we are displaying articles directly from our saveArticle model data rather than fetching an RSS feed.

pages/saved-articles.tsx

import { useQuery } from '@apollo/client'
import { ArticleList } from '../components/articleList'
import { Layout } from '../components/layout'
import { NotifyError } from '../components/notifyError'
import { NotifyLoading } from '../components/notifyLoading'
import { SAVED_ARTICLES_QUERY } from '../utils/api/graphql/queries'

const SavedArticles = () => {
  const { loading, error, data } = useQuery(SAVED_ARTICLES_QUERY)

  if (loading) {
    return (
      <Layout>
        <NotifyLoading />
      </Layout>
    )
  }

  const { savedArticles } = data || {}

  if (error || !savedArticles) {
    return (
      <Layout>
        <NotifyError />
      </Layout>
    )
  }

  const articleList = savedArticles.map(({ contents, feed }) => ({
    ...contents,
    ...feed,
  }))

  console.log(data)

  return (
    <Layout>
      <ArticleList articleList={articleList} />
    </Layout>
  )
}

export default SavedArticles