From c1b76bd36df5221efbee4e5b5b215424a0e9c67e Mon Sep 17 00:00:00 2001 From: Adem ilter Date: Wed, 9 Nov 2022 21:51:22 +0300 Subject: [PATCH] example fix url (#42695) Co-authored-by: Steven Tey Co-authored-by: JJ Kasper --- .../components/comment/form.tsx | 7 +++++-- .../blog-with-comment/hooks/useComment.ts | 19 ++++--------------- examples/blog-with-comment/lib/clearUrl.ts | 6 ++++++ .../blog-with-comment/lib/createComment.ts | 6 ++++-- .../blog-with-comment/lib/deleteComment.ts | 6 ++++-- .../blog-with-comment/lib/fetchComment.ts | 7 ++----- examples/blog-with-comment/package.json | 2 +- .../blog-with-comment/pages/_document.tsx | 6 +++++- 8 files changed, 31 insertions(+), 28 deletions(-) create mode 100644 examples/blog-with-comment/lib/clearUrl.ts diff --git a/examples/blog-with-comment/components/comment/form.tsx b/examples/blog-with-comment/components/comment/form.tsx index 564462dcf7c18..304c59fe83ea7 100644 --- a/examples/blog-with-comment/components/comment/form.tsx +++ b/examples/blog-with-comment/components/comment/form.tsx @@ -34,8 +34,11 @@ export default function CommentForm({ - ) : ( diff --git a/examples/blog-with-comment/hooks/useComment.ts b/examples/blog-with-comment/hooks/useComment.ts index cf92b96674864..dca379bdf4777 100644 --- a/examples/blog-with-comment/hooks/useComment.ts +++ b/examples/blog-with-comment/hooks/useComment.ts @@ -1,19 +1,13 @@ 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(null) const { data: comments, mutate } = useSWR( '/api/comment', @@ -21,11 +15,6 @@ export default function useComments() { { fallbackData: [] } ) - useEffect(() => { - const url = window.location.origin + window.location.pathname - setUrl(url) - }, []) - const onSubmit = async (e: React.FormEvent) => { e.preventDefault() const token = await getAccessTokenSilently() @@ -33,7 +22,7 @@ export default function useComments() { 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', diff --git a/examples/blog-with-comment/lib/clearUrl.ts b/examples/blog-with-comment/lib/clearUrl.ts new file mode 100644 index 0000000000000..ab7f8ce9f735f --- /dev/null +++ b/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 diff --git a/examples/blog-with-comment/lib/createComment.ts b/examples/blog-with-comment/lib/createComment.ts index 13566d3fcf661..9f5ae783b7d29 100644 --- a/examples/blog-with-comment/lib/createComment.ts +++ b/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.' }) } diff --git a/examples/blog-with-comment/lib/deleteComment.ts b/examples/blog-with-comment/lib/deleteComment.ts index 75f033c2cad09..9711ea5aecd33 100644 --- a/examples/blog-with-comment/lib/deleteComment.ts +++ b/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.' }) } diff --git a/examples/blog-with-comment/lib/fetchComment.ts b/examples/blog-with-comment/lib/fetchComment.ts index dca791d03c7e1..7649954af7654 100644 --- a/examples/blog-with-comment/lib/fetchComment.ts +++ b/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.' }) diff --git a/examples/blog-with-comment/package.json b/examples/blog-with-comment/package.json index dccbca89cd26a..229ab495b76a2 100644 --- a/examples/blog-with-comment/package.json +++ b/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", diff --git a/examples/blog-with-comment/pages/_document.tsx b/examples/blog-with-comment/pages/_document.tsx index 3a934c3767f54..e4bec5126fc61 100644 --- a/examples/blog-with-comment/pages/_document.tsx +++ b/examples/blog-with-comment/pages/_document.tsx @@ -3,7 +3,11 @@ import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( - + + + + +