Challenges

Create a Dashboard

Create the Dashboard page

Let's create the Dashboard homepage. To do that, create a file called pages/dashboard/index.js and add the following content:

import Link from 'next/link'
import Theme from '../../components/Theme'
import ms from 'ms'
import { getPostList } from '../../lib/data'
import { getSession } from 'next-auth/client'

export default function Home ({ postList }) {
  return (
    <Theme>
      <div className="dashboard">
        <div className="heading">
            <h2>Dashboard</h2>
            <Link href='/dashboard/post/create'>
                <a className="create-new">
                    + Create New
                </a>
            </Link>
        </div>
        <div className='dashboard-posts'>
          {postList.map(post => (
            <div key={post.slug} className='dashboard-post'>
              <div className='time'>{ms(Date.now() - post.createdAt, { long: true })} ago</div>
              <h3>{post.title}</h3>
              <div className="cta">
                <Link href='/dashboard/post/[slug]' as={`dashboard/post/${post.slug}`}>
                  <a className="edit">
                    Edit
                  </a>
                </Link>
                <a className="delete" href="#" onClick={e => handleDelete(e, post)}>
                  Delete
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Theme>
  )
}

export async function getServerSideProps ({ req, res }) {
  const session = await getSession({ req })  
  const postList = await getPostList({ownerId: session.user.id})

  return {
    props: {
      postList
    }
  }
}

Then if you visit http://localhost:3009/dashboard or click the "Dashboard" link in the header, you can view the dashboard. You could also see the blog post you added in the previous step.


Now, here's a simple task for you:

  • Replace the getServerSideProps function into getStaticProps
  • Run the app & make sure you are logged in to the app
  • Visit the dashboard
Q: How do you describe the outcome?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: