<LikeButton slug={post.Slug} />

type Props = {
  id: string
}
const LikeButton = (props: Props) => {
  const [active, setActive] = useState(false)

  const handleClick = () => {
    if (!active) {
      axios.put(`/api/like?slug=${props.slug}`, {})
      setActive(true)
    }
  }

  return (
    <button onClick={handleClick}>Like</button>
  )
}

const ApiBlogSlug = async function (req: NextApiRequest, res: NextApiResponse) {
	if (req.method !== 'PUT') {
	    res.statusCode = 400
	    res.end()
	    return
	  }
	// PUTだったら処理するよってこと
	
	  const { slug } = req.query
	//さっきのパラメータにあったslugを取り出す
	
	  try {
	    const post = await getPostBySlug(slug as string)
	// slugを頼りに記事情報を取得する
	

export async function getPostBySlug(slug: string) {
	// キャッシュの記述は省略

  const data = await client.databases.query({
    database_id: DATABASE_ID,
    filter: _buildFilter([
      {
        property: 'Slug',
        rich_text: {
          equals: slug,
        },
      },
    ]),
    sorts: [
      {
        property: 'Date',
        timestamp: 'created_time',
        direction: 'ascending',
      },
    ],
  })
// null処理の記述省略

  return _buildPost(data.results[0])
}

const ApiBlogSlug = async function (req: NextApiRequest, res: NextApiResponse) {

	try{
	// slugを頼りに記事情報を取得する以降
	
	    await incrementLikes(post)
// 記事情報=post としてincrementLikesコンポネントに入れる

			res.statusCode = 200
	    res.end()
	  }

export interface Post {
    PageId: string
    Title: string
    Slug: string
    Date: string
    Tags: string[]
    Excerpt: string
    OGImage: string
    Rank: number
    Like: number  👉 追加
  }

function _buildPost(data) {
	const prop = data.properties
	const post: Post = {
		    PageId: data.id,
		    Title: prop.Page.title[0].plain_text,
		    Slug: prop.Slug.rich_text[0].plain_text,
		    Date: prop.Date.date.start,
		    Tags: prop.Tags.multi_select.map(opt => opt.name),
		    Excerpt:
		      prop.Excerpt.rich_text.length > 0
		        ? prop.Excerpt.rich_text[0].plain_text
		        : '',
		    OGImage:
		      prop.OGImage.files.length > 0 ? prop.OGImage.files[0].file.url : null,
		    Rank: prop.Rank.number,
		    Like: prop.Like.number,  👉 追加
		  }
		
	  return post

export async function incrementLikes(post: Post) {
  const result = await client.pages.update({
    page_id: post.PageId,
    properties: {
      Like: (post.Like || 0) + 1,
    },
  })

//null処理の記述省略

  return _buildPost(result)
}

export async function incrementLikes(post: Post) { 👉 slugによって得た記事情報で行を指定
  const result = await client.pages.update({
    page_id: post.PageId,   
    properties: {
      Like: (post.Like || 0) + 1,  👉 Like列のみを更新する
    },
  })

//null処理の記述省略

  return _buildPost(result)
}

function _buildPost(data) {
	const prop = data.properties
	const post: Post = {
		    PageId: data.id,
		    Title: prop.Page.title[0].plain_text,
		    Slug: prop.Slug.rich_text[0].plain_text,
		    Date: prop.Date.date.start,
		    Tags: prop.Tags.multi_select.map(opt => opt.name),
		    Excerpt:
		      prop.Excerpt.rich_text.length > 0
		        ? prop.Excerpt.rich_text[0].plain_text
		        : '',
		    OGImage:
		      prop.OGImage.files.length > 0 ? prop.OGImage.files[0].file.url : null,
		    Rank: prop.Rank.number,
		    Like: prop.Like.number,  👉 追加したよね(*´∀｀*)
		  }
		
	  return post

const Bookmark = ({ block }) => {
  let sURL: string | null
  if (block.Bookmark) {
    sURL = block.Bookmark.Url
  } else if (block.LinkPreview) {
    sURL = block.LinkPreview.Url
  } else if (block.Embed) {
    sURL = block.Embed.Url
  }
// bookmarkブロックにURLを登録したら変数sURLに収納する


  const [metadata, setMetadata] = useState<Metadata | null>()

  useEffect(() => {
    try {
      const url = new URL(sURL)
      axios.get(`/api/url-metadata?url=${url.toString()}`).then((res) => {
        setMetadata(res.data as Metadata)
      })
			// apiディレクトリ内のurl-metadataファイルの処理をするよ👉 二段階右折②のこと
    } catch (e) {
      console.log(e)
    }
  }, [sURL])
// sURLの変更があったらuseEffectを実行する

//以降は二段階右折④で触れます

import { NextApiRequest, NextApiResponse } from 'next'
import got from 'got'
import createMetascraper from 'metascraper'
import metascraperDescription from 'metascraper-description'
import metascraperImage from 'metascraper-image'
import metascraperTitle from 'metascraper-title'

const metascraper = createMetascraper([metascraperDescription(), metascraperImage(), metascraperTitle()])

const ApiUrlMetadata = async function(req: NextApiRequest, res: NextApiResponse) {
  res.setHeader('Content-Type', 'application/json')

  if (req.method !== 'GET') {
    res.statusCode = 400
    res.end()
    return
  }
// 取得(GET)の通信

  const { url: urls } = req.query

// 400処理省略

  try {
    new URL(urls.toString())
  } 
// catch(e)の400処理省略

  try {
    const { body: html, url } = await got(urls.toString())
    const metadata = await metascraper({ html, url })

		// metadataでない処理省略

    res.json(metadata)
    res.statusCode = 200
    res.end()
  } 
// catch(e)の500処理省略
}

export default ApiUrlMetadata

interface Metadata {
  title: string | null
  description: string | null
  image: string | null
}

const Bookmark = ({ block }) => {
	// ブロック処理省略 二段階右折①参照

  const [metadata, setMetadata] = useState<Metadata | null>()

// useEffectのapiディレクトリへの処理省略 _二段階右折①参照 

  let url: URL
  try {
    url = new URL(sURL)
  }
		// catch(e)処理省略 
// metadataでない または urlでもない処理省略

  const { title, description, image } = metadata

  return (
    <div className={styles.bookmark}>
      <a href={url.toString()} target="_blank" rel="noopener noreferrer">
        <div>
          <div>{title ? title : ''}</div>
          <div>{description ? description : ''}</div>
          <div>
            <div>
              <img
                src={`https://www.google.com/s2/favicons?domain=${url.hostname}`}
                alt="title"
                loading="lazy"
                decoding="async"
              />
            </div>
            <div>{url.origin}</div>
          </div>
        </div>
        <div>
          {image ? (
            <img src={image} alt="title" loading="lazy" decoding="async" />
          ) : null}
        </div>
      </a>
    </div>
  )
}

export default Bookmark