#49 ぼちぼち

2025-06-28 02:32:40 +09:00
parent ba1c1f1adf
commit 8020586ec6
19 changed files with 168 additions and 106 deletions
@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import NicoViewer from '@/components/NicoViewer'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { cn } from '@/lib/utils'
+import MainArea from '@/components/layout/MainArea'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
+import PostEditForm from '@/components/PostEditForm'
+import TabGroup, { Tab } from '@/components/common/TabGroup'
+
+import type { Post, Tag, User } from '@/types'
+
+type Props = { user: User }
+
+
+export default ({ user }: Props) => {
+  const { id } = useParams ()
+
+  const location = useLocation ()
+
+  const [post, setPost] = useState<Post | null> (null)
+  const [editing, setEditing] = useState (true)
+
+  const changeViewedFlg = () => {
+    if (post?.viewed)
+      {
+        void (axios.delete (
+                  `${ API_BASE_URL }/posts/${ id }/viewed`,
+                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+              .then (res => setPost (post => ({ ...post, viewed: false })))
+              .catch (err => toast ({ title:        '失敗……',
+                                      description:  '通信に失敗しました……' })))
+      }
+    else
+      {
+        void (axios.post (
+                  `${ API_BASE_URL }/posts/${ id }/viewed`,
+                  { },
+                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+              .then (res => setPost (post => ({ ...post, viewed: true })))
+              .catch (err => toast ({ title:        '失敗……',
+                                      description:  '通信に失敗しました……' })))
+      }
+  }
+
+  useEffect (() => {
+    if (!(id))
+      return
+    void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
+              'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+          .then (res => setPost (res.data))
+          .catch (err => console.error ('うんち!', err)))
+  }, [id])
+
+  useEffect (() => {
+    setEditing (false)
+  }, [post])
+
+  useEffect (() => {
+    if (!(editing))
+      setEditing (true)
+  }, [editing])
+
+  const url = post ? new URL (post.url) : null
+  const nicoFlg = url?.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp'
+  const videoId = (nicoFlg
+                   ? url.pathname.match (/(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/)[0]
+                   : '')
+  const viewedClass = (post?.viewed
+                       ? 'bg-blue-600 hover:bg-blue-700'
+                       : 'bg-gray-500 hover:bg-gray-600')
+
+  return (
+      <>
+        <Helmet>
+          {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
+        </Helmet>
+        <TagDetailSidebar post={post} />
+        <MainArea>
+          {post
+           ? (
+              <>
+                {nicoFlg
+                 ? (
+                    <NicoViewer id={videoId}
+                                width="640"
+                                height="360" />)
+                 : <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />}
+                <Button onClick={changeViewedFlg}
+                        className={cn ('text-white', viewedClass)}>
+                  {post.viewed ? '閲覧済' : '未閲覧'}
+                </Button>
+                <TabGroup>
+                  {['admin', 'member'].some (r => r === user.role) && editing &&
+                    <Tab name="編輯">
+                      <PostEditForm post={post}
+                                    onSave={newPost => {
+                                      setPost (newPost)
+                                      toast ({ description: '更新しました．' })
+                                    }} />
+                    </Tab>}
+                </TabGroup>
+              </>)
+           : 'Loading...'}
+        </MainArea>
+      </>)
+}
@@ -0,0 +1,208 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import NicoViewer from '@/components/NicoViewer'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { cn } from '@/lib/utils'
+import MainArea from '@/components/layout/MainArea'
+import Form from '@/components/common/Form'
+import PageTitle from '@/components/common/PageTitle'
+import Label from '@/components/common/Label'
+
+import type { Post, Tag } from '@/types'
+
+type Props = { posts:     Post[]
+               setPosts:  (posts: Post[]) => void }
+
+
+export default () => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
+  const [title, setTitle] = useState ('')
+  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
+  const [titleLoading, setTitleLoading] = useState (false)
+  const [url, setURL] = useState ('')
+  const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
+  const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
+  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
+  const [thumbnailLoading, setThumbnailLoading] = useState (false)
+  const [tags, setTags] = useState<Tag[]> ([])
+  const [tagIds, setTagIds] = useState<number[]> ([])
+  const previousURLRef = useRef ('')
+
+  const handleSubmit = () => {
+    const formData = new FormData ()
+    formData.append ('title', title)
+    formData.append ('url', url)
+    formData.append ('tags', JSON.stringify (tagIds))
+    formData.append ('thumbnail', thumbnailFile)
+
+    void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
+              'Content-Type':     'multipart/form-data',
+              'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+          .then (() => {
+            toast ({ title: '投稿成功!' })
+            navigate ('/posts')
+          })
+          .catch (e => toast ({ title:        '投稿失敗',
+                                description:  '入力を確認してください。' })))
+  }
+
+  useEffect (() => {
+    void (axios.get ('/api/tags')
+          .then (res => setTags (res.data))
+          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
+  }, [])
+
+  useEffect (() => {
+    if (titleAutoFlg && url)
+      fetchTitle ()
+  }, [titleAutoFlg])
+
+  useEffect (() => {
+    if (thumbnailAutoFlg && url)
+      fetchThumbnail ()
+  }, [thumbnailAutoFlg])
+
+  const handleURLBlur = () => {
+    if (!(url) || url === previousURLRef.current)
+      return
+
+    if (titleAutoFlg)
+      fetchTitle ()
+    if (thumbnailAutoFlg)
+      fetchThumbnail ()
+    previousURLRef.current = url
+  }
+
+  const fetchTitle = () => {
+    setTitle ('')
+    setTitleLoading (true)
+    void (axios.get (`${ API_BASE_URL }/preview/title`, {
+              params:   { url },
+              headers:  { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+          .then (res => {
+            setTitle (res.data.title || '')
+            setTitleLoading (false)
+          })
+          .finally (() => setTitleLoading (false)))
+  }
+
+  const fetchThumbnail = () => {
+    setThumbnailPreview ('')
+    setThumbnailFile (null)
+    setThumbnailLoading (true)
+    if (thumbnailPreview)
+      URL.revokeObjectURL (thumbnailPreview)
+    void (axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
+              params:       { url },
+              headers:      { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
+              responseType: 'blob' })
+          .then (res => {
+            const imageURL = URL.createObjectURL (res.data)
+            setThumbnailPreview (imageURL)
+            setThumbnailFile (new File ([res.data],
+                                        'thumbnail.png',
+                                        { type: res.data.type || 'image/png' }))
+            setThumbnailLoading (false)
+          })
+          .finally (() => setThumbnailLoading (false)))
+  }
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <Form>
+          <PageTitle>広場に投稿を追加する</PageTitle>
+
+          {/* URL */}
+          <div>
+            <Label>URL</Label>
+            <input type="text"
+                   placeholder="例：https://www.nicovideo.jp/watch/..."
+                   value={url}
+                   onChange={e => setURL (e.target.value)}
+                   className="w-full border p-2 rounded"
+                   onBlur={handleURLBlur} />
+          </div>
+
+          {/* タイトル */}
+          <div>
+            <Label checkBox={{
+                label:    '自動',
+                checked:  titleAutoFlg,
+                onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
+              タイトル
+            </Label>
+            <input type="text"
+                   className="w-full border rounded p-2"
+                   value={title}
+                   placeholder={titleLoading ? 'Loading...' : ''}
+                   onChange={e => setTitle (e.target.value)}
+                   disabled={titleAutoFlg} />
+          </div>
+
+          {/* サムネール */}
+          <div>
+            <Label checkBox={{
+                label:    '自動',
+                checked:  thumbnailAutoFlg,
+                onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
+              サムネール
+            </Label>
+            {thumbnailAutoFlg
+             ? (thumbnailLoading
+                ? <p className="text-gray-500 text-sm">Loading...</p>
+                : !(thumbnailPreview) && (
+                    <p className="text-gray-500 text-sm">
+                      URL から自動取得されます。
+                    </p>))
+             : (
+                <input type="file"
+                       accept="image/*"
+                       onChange={e => {
+                         const file = e.target.files?.[0]
+                         if (file)
+                           {
+                             setThumbnailFile (file)
+                             setThumbnailPreview (URL.createObjectURL (file))
+                           }
+                       }} />)}
+            {thumbnailPreview && (
+                <img src={thumbnailPreview}
+                     alt="preview"
+                     className="mt-2 max-h-48 rounded border" />)}
+          </div>
+
+          {/* タグ */}
+          <div>
+            <Label>タグ</Label>
+            <select multiple
+                    value={tagIds.map (String)}
+                    onChange={e => {
+                      const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
+                      setTagIds (values)
+                    }}
+                    className="w-full p-2 border rounded h-32">
+              {tags.map ((tag: Tag) => (
+                  <option key={tag.id} value={tag.id}>
+                    {tag.name}
+                  </option>))}
+            </select>
+          </div>
+
+          {/* 送信 */}
+          <Button onClick={handleSubmit}
+                  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
+                  disabled={titleLoading || thumbnailLoading}>
+            追加
+          </Button>
+        </Form>
+      </MainArea>)
+}
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import TagSidebar from '@/components/TagSidebar'
+import MainArea from '@/components/layout/MainArea'
+
+import type { Post, Tag } from '@/types'
+
+
+export default () => {
+  const [posts, setPosts] = useState<Post[]> ([])
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagsQuery = query.get ('tags') ?? ''
+  // const anyFlg = query.get ('match') === 'any'
+  const anyFlg = false
+  const tags = tagsQuery.split (' ').filter (e => e !== '')
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try
+      {
+        const res = await axios.get (`${ API_BASE_URL }/posts`, {
+            params: { tags:   tags.join (','),
+                      match:  (anyFlg ? 'any' : 'all') } })
+        setPosts (res.data)
+      }
+      catch (error)
+      {
+        console.error ('Failed to fetch posts:', error)
+        setPosts ([])
+      }
+    }
+    fetchPosts()
+  }, [location.search])
+
+  return (
+      <>
+        <Helmet>
+          <title>
+            {tags.length
+             ? `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
+             : `${ SITE_TITLE }　〜 ぼざクリも、ぼざろ外も、外伝もあるんだよ`}
+          </title>
+        </Helmet>
+        <TagSidebar posts={posts} />
+        <MainArea>
+          <div className="flex flex-wrap gap-4 p-4">
+            {posts.map (post => (
+              <Link to={`/posts/${ post.id }`}
+                    key={post.id}
+                    className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
+                <img src={post.thumbnail ?? post.thumbnail_base}
+                     className="object-none w-full h-full" />
+              </Link>
+            ))}
+          </div>
+        </MainArea>
+      </>)
+}