Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
complete up to creating and showing a draft
- Loading branch information
Showing
7 changed files
with
296 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| // Use IntelliSense to learn about possible attributes. | ||
| // Hover to view descriptions of existing attributes. | ||
| // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 | ||
| "version": "0.2.0", | ||
| "configurations": [ | ||
|
|
||
| { | ||
| "type": "node", | ||
| "request": "launch", | ||
| "name": "Launch Program", | ||
| "skipFiles": [ | ||
| "<node_internals>/**" | ||
| ], | ||
| "program": "${workspaceFolder}/pages/api/post/index.ts", | ||
| "outFiles": [ | ||
| "${workspaceFolder}/**/*.js" | ||
| ] | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { NextApiHandler } from "next"; | ||
| import NextAuth from "next-auth"; | ||
| import { PrismaAdapter } from "@next-auth/prisma-adapter"; | ||
| import GitHubProvider from "next-auth/providers/github"; | ||
| import prisma from "../../../lib/prisma"; | ||
|
|
||
| export const options = { // <--- exported the nextauth options | ||
| providers: [ | ||
| GitHubProvider({ | ||
| clientId: process.env.GITHUB_ID, | ||
| clientSecret: process.env.GITHUB_SECRET, | ||
| }), | ||
| ], | ||
| adapter: PrismaAdapter(prisma), | ||
| secret: process.env.SECRET, | ||
| }; | ||
|
|
||
| const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options); | ||
| export default authHandler; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { getServerSession } from "next-auth/next" // <--- imported getServerSession from "next-auth/next" | ||
| import { options as authOptions } from "../auth/[...nextauth]" // <--- imported authOptions | ||
| import prisma from "../../../lib/prisma"; | ||
|
|
||
| // POST /api/post | ||
| // Required fields in body: title | ||
| // Optional fields in body: content | ||
| export default async function handle(req, res) { | ||
| const { title, content } = req.body; | ||
|
|
||
| // const session = await getSession({ req }); // <--- removed getSession call | ||
| const session = await getServerSession(req, res, authOptions); // <--- used the getServerSession instead | ||
| const result = await prisma.post.create({ | ||
| data: { | ||
| title: title, | ||
| content: content, | ||
| author: { connect: { email: session?.user?.email } }, | ||
| }, | ||
| }); | ||
| res.json(result); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { useState } from 'react'; | ||
| import Layout from '../components/Layout'; | ||
| import Router from 'next/router'; | ||
|
|
||
| const Draft: React.FC = () => { | ||
| const [title, setTitle] = useState(''); | ||
| const [content, setContent] = useState(''); | ||
|
|
||
| const submitData = async (e: React.SyntheticEvent) => { | ||
| e.preventDefault(); | ||
| try { | ||
| const body = { title, content }; | ||
| await fetch('/api/post', { | ||
| method: 'POST', | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| body: JSON.stringify(body), | ||
| }); | ||
| await Router.push('/drafts'); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <div> | ||
| <form onSubmit={submitData}> | ||
| <h1>New Draft</h1> | ||
| <input | ||
| autoFocus | ||
| onChange={(e) => setTitle(e.target.value)} | ||
| placeholder="Title" | ||
| type="text" | ||
| value={title} | ||
| /> | ||
| <textarea | ||
| cols={50} | ||
| onChange={(e) => setContent(e.target.value)} | ||
| placeholder="Content" | ||
| rows={8} | ||
| value={content} | ||
| /> | ||
| <input disabled={!content || !title} type="submit" value="Create" /> | ||
| <a className="back" href="#" onClick={() => Router.push('/')}> | ||
| or Cancel | ||
| </a> | ||
| </form> | ||
| </div> | ||
| <style jsx>{` | ||
| .page { | ||
| background: var(--geist-background); | ||
| padding: 3rem; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| input[type='text'], | ||
| textarea { | ||
| width: 100%; | ||
| padding: 0.5rem; | ||
| margin: 0.5rem 0; | ||
| border-radius: 0.25rem; | ||
| border: 0.125rem solid rgba(0, 0, 0, 0.2); | ||
| } | ||
| input[type='submit'] { | ||
| background: #ececec; | ||
| border: 0; | ||
| padding: 1rem 2rem; | ||
| } | ||
| .back { | ||
| margin-left: 1rem; | ||
| } | ||
| `}</style> | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default Draft; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from 'react'; | ||
| import { GetServerSideProps } from 'next'; | ||
| import { useSession, getSession } from 'next-auth/react'; | ||
| import Layout from '../components/Layout'; | ||
| import Post, { PostProps } from '../components/Post'; | ||
| import prisma from '../lib/prisma'; | ||
|
|
||
| export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { | ||
| const session = await getSession({ req }); | ||
| if (!session) { | ||
| res.statusCode = 403; | ||
| return { props: { drafts: [] } }; | ||
| } | ||
|
|
||
| const drafts = await prisma.post.findMany({ | ||
| where: { | ||
| author: { email: session.user.email }, | ||
| published: false, | ||
| }, | ||
| include: { | ||
| author: { | ||
| select: { name: true }, | ||
| }, | ||
| }, | ||
| }); | ||
| return { | ||
| props: { drafts }, | ||
| }; | ||
| }; | ||
|
|
||
| type Props = { | ||
| drafts: PostProps[]; | ||
| }; | ||
|
|
||
| const Drafts: React.FC<Props> = (props) => { | ||
| const { data: session } = useSession(); | ||
|
|
||
| if (!session) { | ||
| return ( | ||
| <Layout> | ||
| <h1>My Drafts</h1> | ||
| <div>You need to be authenticated to view this page.</div> | ||
| </Layout> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <div className="page"> | ||
| <h1>My Drafts</h1> | ||
| <main> | ||
| {props.drafts.map((post) => ( | ||
| <div key={post.id} className="post"> | ||
| <Post post={post} /> | ||
| </div> | ||
| ))} | ||
| </main> | ||
| </div> | ||
| <style jsx>{` | ||
| .post { | ||
| background: var(--geist-background); | ||
| transition: box-shadow 0.1s ease-in; | ||
| } | ||
| .post:hover { | ||
| box-shadow: 1px 1px 3px #aaa; | ||
| } | ||
| .post + .post { | ||
| margin-top: 2rem; | ||
| } | ||
| `}</style> | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default Drafts; |
Oops, something went wrong.