example fix url (#42695)

Co-authored-by: Steven Tey <stevensteel97@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>

examples/blog-with-comment/components/comment/form.tsx

@@ -34,8 +34,11 @@ export default function CommentForm({
             <button className="py-2 px-4 rounded bg-blue-600 text-white disabled:opacity-40 hover:bg-blue-700">
               Send
             </button>
-            <button className="text-gray-500" onClick={() => logout()}>
-              Log out
+            <button
+              className="text-gray-500"
+              onClick={() => logout({ returnTo: window.location.origin })}
+            >
+              Log Out
             </button>
           </div>
         ) : (

examples/blog-with-comment/hooks/useComment.ts

@@ -1,39 +1,28 @@
 import type { Comment } from '../interfaces'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import useSWR from 'swr'
 import { useAuth0 } from '@auth0/auth0-react'
 
-async function fetcher(url: string) {
-  const query = new URLSearchParams({ url })
-  const queryUrl = `${url}?${query.toString()}`
-
-  return fetch(queryUrl).then((res) => res.json())
-}
+const fetcher = (url) => fetch(url).then((res) => res.json())
 
 export default function useComments() {
   const { getAccessTokenSilently } = useAuth0()
   const [text, setText] = useState('')
-  const [url, setUrl] = useState<string | null>(null)
 
   const { data: comments, mutate } = useSWR<Comment[]>(
     '/api/comment',
     fetcher,
     { fallbackData: [] }
   )
 
-  useEffect(() => {
-    const url = window.location.origin + window.location.pathname
-    setUrl(url)
-  }, [])
-
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     const token = await getAccessTokenSilently()
 
     try {
       await fetch('/api/comment', {
         method: 'POST',
-        body: JSON.stringify({ url, text }),
+        body: JSON.stringify({ text }),
         headers: {
           Authorization: token,
           'Content-Type': 'application/json',
@@ -52,7 +41,7 @@ export default function useComments() {
     try {
       await fetch('/api/comment', {
         method: 'DELETE',
-        body: JSON.stringify({ url, comment }),
+        body: JSON.stringify({ comment }),
         headers: {
           Authorization: token,
           'Content-Type': 'application/json',

examples/blog-with-comment/lib/clearUrl.ts

@@ -0,0 +1,6 @@
+const clearUrl = (url: string) => {
+  const { origin, pathname } = new URL(url)
+  return `${origin}${pathname}`
+}
+
+export default clearUrl

examples/blog-with-comment/lib/createComment.ts

@@ -3,15 +3,17 @@ import type { Comment } from '../interfaces'
 import redis from './redis'
 import { nanoid } from 'nanoid'
 import getUser from './getUser'
+import clearUrl from './clearUrl'
 
 export default async function createComments(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const { url, text } = req.body
+  const url = clearUrl(req.headers.referer)
+  const { text } = req.body
   const { authorization } = req.headers
 
-  if (!url || !text || !authorization) {
+  if (!text || !authorization) {
     return res.status(400).json({ message: 'Missing parameter.' })
   }
 

examples/blog-with-comment/lib/deleteComment.ts

@@ -2,15 +2,17 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import type { User, Comment } from '../interfaces'
 import redis from './redis'
 import getUser from './getUser'
+import clearUrl from './clearUrl'
 
 export default async function deleteComments(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const { url, comment }: { url: string; comment: Comment } = req.body
+  const url = clearUrl(req.headers.referer)
+  const { comment }: { url: string; comment: Comment } = req.body
   const { authorization } = req.headers
 
-  if (!url || !comment || !authorization) {
+  if (!comment || !authorization) {
     return res.status(400).json({ message: 'Missing parameter.' })
   }
 

examples/blog-with-comment/lib/fetchComment.ts

@@ -1,16 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { Comment } from '../interfaces'
 import redis from './redis'
+import clearUrl from './clearUrl'
 
 export default async function fetchComment(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const { url }: { url?: string } = req.query
-
-  if (!url) {
-    return res.status(400).json({ message: 'Missing parameter.' })
-  }
+  const url = clearUrl(req.headers.referer)
 
   if (!redis) {
     return res.status(500).json({ message: 'Failed to connect to redis.' })

examples/blog-with-comment/package.json

@@ -10,7 +10,7 @@
     "@tailwindcss/typography": "^0.5.7",
     "date-fns": "^2.29.3",
     "gray-matter": "4.0.3",
-    "ioredis": "^5.2.3",
+    "ioredis": "^5.2.4",
     "nanoid": "^4.0.0",
     "next": "latest",
     "react": "^18.2.0",

examples/blog-with-comment/pages/_document.tsx

@@ -3,7 +3,11 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <meta charSet="utf-8" />
+        <meta name="robots" content="follow, index" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+      </Head>
       <body className="bg-white text-gray-700 antialiased">
         <Main />
         <NextScript />