End to End React with Prisma 2

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.

31. Add saved articles page

Objective: Create a saved articles page for seeing all of your saved articles in one spot.

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

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