miteruzo/btrc-hub
1
0
フォーク 0
コード 課題 71 Pull リクエスト 1 リリース Wiki アクティビティ

#49

ソースを参照
このコミットが含まれているのは:
みてるぞ
2025-07-13 02:46:13 +09:00
親 fdf242c060
コミット 0c46cf28db
29個のファイルの変更，509行の追加，456行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/pages/posts/PostDetailPage.tsx
+70 -67
ファイルの表示
@@ -1,8 +1,8 @@
import axios from 'axios'
import toCamel from 'camelcase-keys'
import React, { useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link, useLocation, useParams } from 'react-router-dom'
import { useParams } from 'react-router-dom'
import TagDetailSidebar from '@/components/TagDetailSidebar'
import NicoViewer from '@/components/NicoViewer'
@@ -14,7 +14,7 @@ import { toast } from '@/components/ui/use-toast'
import { API_BASE_URL, SITE_TITLE } from '@/config'
import { cn } from '@/lib/utils'
import type { Post, Tag, User } from '@/types'
import type { Post, User } from '@/types'
type Props = { user: User | null }
@@ -22,40 +22,44 @@ type Props = { user: User | null }
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 (() => setPost (post => ({ ...post, viewed: false })))
.catch (() => toast ({ title: '失敗……',
description: '通信に失敗しました……' })))
}
else
{
void (axios.post (
`${ API_BASE_URL }/posts/${ id }/viewed`,
{ },
{ headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (() => setPost (post => ({ ...post, viewed: true })))
.catch (() => toast ({ title: '失敗……',
description: '通信に失敗しました……' })))
}
const changeViewedFlg = async () => {
const url = `${ API_BASE_URL }/posts/${ id }/viewed`
const opt = { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }
try
{
if (post!.viewed)
await axios.delete (url, opt)
else
await axios.post (url, { }, opt)
// 通信に成功したら “閲覧済” をトグル
setPost (post => ({ ...post!, viewed: !(post!.viewed) }))
}
catch
{
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 (toCamel (res.data, { deep: true })))
.catch (err => console.error ('うんち!', err)))
void (async () => {
try
{
const res = await axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } })
setPost (toCamel (res.data as any, { deep: true }) as Post)
}
catch (err)
{
console.error ('うんち!', err)
}
}) ()
}, [id])
useEffect (() => {
@@ -69,47 +73,46 @@ export default ({ user }: Props) => {
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 match = nicoFlg ? url.pathname.match (/(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/) : null
const videoId = match?.[0] ?? ''
const viewedClass = (post?.viewed
? 'bg-blue-600 hover:bg-blue-700'
: 'bg-gray-500 hover:bg-gray-600')
? 'bg-blue-600 hover:bg-blue-700'
: 'bg-gray-500 hover:bg-gray-600')
return (
<>
<Helmet>
{(post?.thumbnail || post?.thumbnailBase) &&
<meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />}
{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>
<Helmet>
{(post?.thumbnail || post?.thumbnailBase) &&
<meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />}
{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>
</>)
}
frontend/src/pages/posts/PostListPage.tsx
+13 -10
ファイルの表示
@@ -1,6 +1,6 @@
import axios from 'axios'
import toCamel from 'camelcase-keys'
import React, { useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link, useLocation } from 'react-router-dom'
@@ -10,7 +10,7 @@ import TabGroup, { Tab } from '@/components/common/TabGroup'
import MainArea from '@/components/layout/MainArea'
import { API_BASE_URL, SITE_TITLE } from '@/config'
import type { Post, Tag, WikiPage } from '@/types'
import type { Post, WikiPage } from '@/types'
export default () => {
@@ -21,13 +21,14 @@ export default () => {
const loaderRef = useRef<HTMLDivElement | null> (null)
const loadMore = async withCursor => {
const loadMore = async (withCursor: boolean) => {
setLoading (true)
const res = await axios.get (`${ API_BASE_URL }/posts`, {
params: { tags: tags.join (' '),
match: (anyFlg ? 'any' : 'all'),
...(withCursor ? { cursor } : { }) } })
const data = toCamel (res.data, { deep: true })
const data = toCamel (res.data as any, { deep: true }) as { posts: Post[]
nextCursor: string }
setPosts (posts => [...(withCursor ? posts : []), ...data.posts])
setCursor (data.nextCursor)
setLoading (false)
@@ -48,7 +49,9 @@ export default () => {
const target = loaderRef.current
target && observer.observe (target)
return () => target && observer.unobserve (target)
return () => {
target && observer.unobserve (target)
}
}, [loaderRef, loading])
useEffect (() => {
@@ -62,8 +65,8 @@ export default () => {
try
{
const tagName = tags[0]
const { data } = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
setWikiPage (toCamel (data, { deep: true }))
const res = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
setWikiPage (toCamel (res.data as any, { deep: true }) as WikiPage)
}
catch
{
@@ -84,7 +87,7 @@ export default () => {
</Helmet>
<TagSidebar posts={posts.slice (0, 20)} />
<MainArea>
<TabGroup key={wikiPage}>
<TabGroup>
<Tab name="広場">
{posts.length
? (
@@ -93,9 +96,9 @@ export default () => {
<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.thumbnailBase || null}
<img src={post.thumbnail || post.thumbnailBase || undefined}
alt={post.title || post.url}
title={post.title || post.url || null}
title={post.title || post.url || undefined}
className="object-none w-full h-full" />
</Link>))}
</div>)
frontend/src/pages/posts/PostNewPage.tsx
+8 -14
ファイルの表示
@@ -1,9 +1,8 @@
import axios from 'axios'
import React, { useEffect, useState, useRef } from 'react'
import { useEffect, useState, useRef } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import NicoViewer from '@/components/NicoViewer'
import Form from '@/components/common/Form'
import Label from '@/components/common/Label'
import PageTitle from '@/components/common/PageTitle'
@@ -12,16 +11,8 @@ import MainArea from '@/components/layout/MainArea'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { API_BASE_URL, SITE_TITLE } from '@/config'
import { cn } from '@/lib/utils'
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 ('')
@@ -41,7 +32,8 @@ export default () => {
formData.append ('title', title)
formData.append ('url', url)
formData.append ('tags', tags)
formData.append ('thumbnail', thumbnailFile)
if (thumbnailFile)
formData.append ('thumbnail', thumbnailFile)
void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
'Content-Type': 'multipart/form-data',
@@ -78,9 +70,10 @@ export default () => {
const fetchTitle = async () => {
setTitle ('')
setTitleLoading (true)
const { data } = await axios.get (`${ API_BASE_URL }/preview/title`, {
const res = await axios.get (`${ API_BASE_URL }/preview/title`, {
params: { url },
headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
const data = res.data as { title: string }
setTitle (data.title || '')
setTitleLoading (false)
}
@@ -91,10 +84,11 @@ export default () => {
setThumbnailLoading (true)
if (thumbnailPreview)
URL.revokeObjectURL (thumbnailPreview)
const { data } = await axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
const res = await axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
params: { url },
headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
responseType: 'blob' })
const data = res.data as Blob
const imageURL = URL.createObjectURL (data)
setThumbnailPreview (imageURL)
setThumbnailFile (new File ([data],
frontend/src/pages/tags/NicoTagListPage.tsx
+2 -3
ファイルの表示
@@ -2,7 +2,6 @@ import axios from 'axios'
import toCamel from 'camelcase-keys'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link } from 'react-router-dom'
import SectionTitle from '@/components/common/SectionTitle'
import TextArea from '@/components/common/TextArea'
@@ -20,7 +19,7 @@ export default () => {
useEffect (() => {
void (async () => {
const res = await axios.get (`${ API_BASE_URL }/tags/nico`)
const data = toCamel (res.data, { deep: true })
const data = toCamel (res.data as any, { deep: true }) as { tags: NicoTag[] }
setNicoTags (data.tags)
@@ -67,7 +66,7 @@ export default () => {
: rawTags[tag.id]}
</td>
<td>
<a href="#" onClick={ev => {
<a href="#" onClick={() => {
setEditing (editing => ({ ...editing, [tag.id]: !(editing[tag.id]) }))
}}>
{editing[tag.id] ? <span className="text-red-400">更新</span> : '編輯'}
frontend/src/pages/users/SettingPage.tsx
+4 -5
ファイルの表示
@@ -1,5 +1,4 @@
import axios from 'axios'
import toCamel from 'camelcase-keys'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
@@ -16,7 +15,7 @@ import { API_BASE_URL, SITE_TITLE } from '@/config'
import type { User } from '@/types'
type Props = { user: User | null
setUser: (user: User) => void }
setUser: React.Dispatch<React.SetStateAction<User | null>> }
export default ({ user, setUser }: Props) => {
@@ -33,9 +32,10 @@ export default ({ user, setUser }: Props) => {
try
{
const { data } = await axios.put (`${ API_BASE_URL }/users/${ user.id }`, formData, {
const res = await axios.put (`${ API_BASE_URL }/users/${ user.id }`, formData, {
headers: { 'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
const data = res.data as User
setUser (user => ({ ...user, ...data }))
toast ({ title: '設定を更新しました．' })
}
@@ -49,7 +49,7 @@ export default ({ user, setUser }: Props) => {
if (!user)
return
setName (user.name)
setName (user.name ?? '')
}, [user])
return (
@@ -108,7 +108,6 @@ export default ({ user, setUser }: Props) => {
<InheritDialogue visible={inheritVsbl}
onVisibleChange={setInheritVsbl}
user={user}
setUser={setUser} />
</MainArea>)
}
frontend/src/pages/wiki/WikiDetailPage.tsx
+43 -31
ファイルの表示
@@ -14,7 +14,8 @@ import type { WikiPage } from '@/types'
export default () => {
const { title } = useParams ()
const params = useParams ()
const title = params.title ?? ''
const location = useLocation ()
const navigate = useNavigate ()
@@ -27,45 +28,56 @@ export default () => {
useEffect (() => {
if (/^\d+$/.test (title))
{
void (axios.get (`${ API_BASE_URL }/wiki/${ title }`)
.then (res => navigate (`/wiki/${ res.data.title }`, { replace: true })))
return
void (async () => {
const res = await axios.get (`${ API_BASE_URL }/wiki/${ title }`)
const data = res.data as WikiPage
navigate (`/wiki/${ data.title }`, { replace: true })
}) ()
return
}
void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`, version && { params: { version } })
.then (res => {
setWikiPage (toCamel (res.data, { deep: true }))
WikiIdBus.set (res.data.id)
})
.catch (() => setWikiPage (null)))
void (async () => {
try
{
const res = await axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`,
{ params: { ...(version ? { version } : { }) } })
const data = toCamel (res.data as any, { deep: true }) as WikiPage
setWikiPage (data)
WikiIdBus.set (data.id)
}
catch
{
setWikiPage (null)
}
}) ()
return () => WikiIdBus.set (null)
}, [title, location.search])
return (
<MainArea>
<Helmet>
<title>{`${ title } Wiki | ${ SITE_TITLE }`}</title>
</Helmet>
{(wikiPage && version) && (
<div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
{wikiPage.pred ? (
<Link to={`/wiki/${ title }?version=${ wikiPage.pred }`}>
&lt; 古
</Link>) : <>(最古)</>}
<Helmet>
<title>{`${ title } Wiki | ${ SITE_TITLE }`}</title>
</Helmet>
{(wikiPage && version) && (
<div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
{wikiPage.pred ? (
<Link to={`/wiki/${ title }?version=${ wikiPage.pred }`}>
&lt; 古
</Link>) : <>(最古)</>}
<span>{wikiPage.updatedAt}</span>
<span>{wikiPage.updatedAt}</span>
{wikiPage.succ ? (
<Link to={`/wiki/${ title }?version=${ wikiPage.succ }`}>
新 &gt;
</Link>) : <>(最新)</>}
</div>)}
<PageTitle>{title}</PageTitle>
<div className="prose mx-auto p-4">
{wikiPage === undefined
? 'Loading...'
: <WikiBody body={wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ title })。`} />}
</div>
{wikiPage.succ ? (
<Link to={`/wiki/${ title }?version=${ wikiPage.succ }`}>
新 &gt;
</Link>) : <>(最新)</>}
</div>)}
<PageTitle>{title}</PageTitle>
<div className="prose mx-auto p-4">
{wikiPage === undefined
? 'Loading...'
: <WikiBody body={wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ title })。`} />}
</div>
</MainArea>)
}
frontend/src/pages/wiki/WikiDiffPage.tsx
+5 -3
ファイルの表示
@@ -2,7 +2,7 @@ import axios from 'axios'
import toCamel from 'camelcase-keys'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link, useLocation, useParams } from 'react-router-dom'
import { useLocation, useParams } from 'react-router-dom'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
@@ -23,8 +23,10 @@ export default () => {
const to = query.get ('to')
useEffect (() => {
void (axios.get (`${ API_BASE_URL }/wiki/${ id }/diff`, { params: { from, to } })
.then (res => setDiff (toCamel (res.data, { deep: true }))))
void (async () => {
const res = await axios.get (`${ API_BASE_URL }/wiki/${ id }/diff`, { params: { from, to } })
setDiff (toCamel (res.data as any, { deep: true }) as WikiPageDiff)
}) ()
}, [])
return (
frontend/src/pages/wiki/WikiEditPage.tsx
+50 -50
ファイルの表示
@@ -1,20 +1,17 @@
import axios from 'axios'
import MarkdownIt from 'markdown-it'
import React, { useEffect, useState, useRef } from 'react'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import MdEditor from 'react-markdown-editor-lite'
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
import { useParams, useNavigate } from 'react-router-dom'
import NicoViewer from '@/components/NicoViewer'
import MainArea from '@/components/layout/MainArea'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { API_BASE_URL, SITE_TITLE } from '@/config'
import { cn } from '@/lib/utils'
import 'react-markdown-editor-lite/lib/index.css'
import type { Tag } from '@/types'
import type { WikiPage } from '@/types'
const mdParser = new MarkdownIt
@@ -22,68 +19,71 @@ const mdParser = new MarkdownIt
export default () => {
const { id } = useParams ()
const location = useLocation ()
const navigate = useNavigate ()
const [title, setTitle] = useState ('')
const [body, setBody] = useState ('')
const handleSubmit = () => {
const handleSubmit = async () => {
const formData = new FormData ()
formData.append ('title', title)
formData.append ('body', body)
void (axios.put (`${ API_BASE_URL }/wiki/${ id }`, formData, { headers: {
'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (res => {
toast ({ title: '投稿成功!' })
navigate (`/wiki/${ title }`)
})
.catch (e => toast ({ title: '投稿失敗',
description: '入力を確認してください。' })))
try
{
await axios.put (`${ API_BASE_URL }/wiki/${ id }`, formData, { headers: {
'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } })
toast ({ title: '投稿成功!' })
navigate (`/wiki/${ title }`)
}
catch
{
toast ({ title: '投稿失敗', description: '入力を確認してください。' })
}
}
useEffect (() => {
void (axios.get (`${ API_BASE_URL }/wiki/${ id }`)
.then (res => {
setTitle (res.data.title)
setBody (res.data.body)
}))
void (async () => {
const res = await axios.get (`${ API_BASE_URL }/wiki/${ id }`)
const data = res.data as WikiPage
setTitle (data.title)
setBody (data.body)
}) ()
}, [id])
return (
<MainArea>
<Helmet>
<title>{`Wiki ページを編輯 | ${ SITE_TITLE }`}</title>
</Helmet>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">Wiki ページを編輯</h1>
<Helmet>
<title>{`Wiki ページを編輯 | ${ SITE_TITLE }`}</title>
</Helmet>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">Wiki ページを編輯</h1>
{/* タイトル */}
{/* TODO: タグ補完 */}
<div>
<label className="block font-semibold mb-1">タイトル</label>
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded" />
</div>
{/* タイトル */}
{/* TODO: タグ補完 */}
<div>
<label className="block font-semibold mb-1">タイトル</label>
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded" />
</div>
{/* 本文 */}
<div>
<label className="block font-semibold mb-1">本文</label>
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)} />
</div>
{/* 本文 */}
<div>
<label className="block font-semibold mb-1">本文</label>
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)} />
</div>
{/* 送信 */}
<button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
追加
</button>
</div>
{/* 送信 */}
<button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
追加
</button>
</div>
</MainArea>)
}
frontend/src/pages/wiki/WikiHistoryPage.tsx
+6 -3
ファイルの表示
@@ -2,7 +2,7 @@ import axios from 'axios'
import toCamel from 'camelcase-keys'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link, useLocation, useParams } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
import MainArea from '@/components/layout/MainArea'
import { API_BASE_URL, SITE_TITLE } from '@/config'
@@ -18,8 +18,11 @@ export default () => {
const id = query.get ('id')
useEffect (() => {
void (axios.get (`${ API_BASE_URL }/wiki/changes`, id && { params: { id } })
.then (res => setChanges (toCamel (res.data, { deep: true }))))
void (async () => {
const res = await axios.get (`${ API_BASE_URL }/wiki/changes`,
{ params: { ...(id ? { id } : { }) } })
setChanges (toCamel (res.data as any, { deep: true }) as WikiPageChange[])
}) ()
}, [location.search])
return (
frontend/src/pages/wiki/WikiNewPage.tsx
+46 -45
ファイルの表示
@@ -1,20 +1,17 @@
import axios from 'axios'
import MarkdownIt from 'markdown-it'
import React, { useEffect, useState, useRef } from 'react'
import { useState } from 'react'
import { Helmet } from 'react-helmet-async'
import MdEditor from 'react-markdown-editor-lite'
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
import { useLocation, useNavigate } from 'react-router-dom'
import NicoViewer from '@/components/NicoViewer'
import MainArea from '@/components/layout/MainArea'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { API_BASE_URL, SITE_TITLE } from '@/config'
import { cn } from '@/lib/utils'
import 'react-markdown-editor-lite/lib/index.css'
import type { Tag } from '@/types'
import type { WikiPage } from '@/types'
const mdParser = new MarkdownIt
@@ -29,54 +26,58 @@ export default () => {
const [title, setTitle] = useState (titleQuery)
const [body, setBody] = useState ('')
const handleSubmit = () => {
const formData = new FormData ()
const handleSubmit = async () => {
const formData = new FormData
formData.append ('title', title)
formData.append ('body', body)
void (axios.post (`${ API_BASE_URL }/wiki`, formData, { headers: {
'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (res => {
toast ({ title: '投稿成功!' })
navigate (`/wiki/${ res.data.title }`)
})
.catch (e => toast ({ title: '投稿失敗',
description: '入力を確認してください。' })))
try
{
const res = await axios.post (`${ API_BASE_URL }/wiki`, formData, { headers: {
'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
const data = res.data as WikiPage
toast ({ title: '投稿成功!' })
navigate (`/wiki/${ data.title }`)
}
catch
{
toast ({ title: '投稿失敗', description: '入力を確認してください。' })
}
}
return (
<MainArea>
<Helmet>
<title>{`新規 Wiki ページ | ${ SITE_TITLE }`}</title>
</Helmet>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
<Helmet>
<title>{`新規 Wiki ページ | ${ SITE_TITLE }`}</title>
</Helmet>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
{/* タイトル */}
{/* TODO: タグ補完 */}
<div>
<label className="block font-semibold mb-1">タイトル</label>
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded" />
</div>
{/* タイトル */}
{/* TODO: タグ補完 */}
<div>
<label className="block font-semibold mb-1">タイトル</label>
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded" />
</div>
{/* 本文 */}
<div>
<label className="block font-semibold mb-1">本文</label>
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)} />
</div>
{/* 本文 */}
<div>
<label className="block font-semibold mb-1">本文</label>
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)} />
</div>
{/* 送信 */}
<button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
追加
</button>
</div>
{/* 送信 */}
<button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
追加
</button>
</div>
</MainArea>)
}
frontend/src/pages/wiki/WikiSearchPage.tsx
+6 -7
ファイルの表示
@@ -8,22 +8,21 @@ import SectionTitle from '@/components/common/SectionTitle'
import MainArea from '@/components/layout/MainArea'
import { API_BASE_URL, SITE_TITLE } from '@/config'
import type { Category, WikiPage } from '@/types'
import type { WikiPage } from '@/types'
export default () => {
const [title, setTitle] = useState ('')
const [text, setText] = useState ('')
const [category, setCategory] = useState<Category | null> (null)
const [results, setResults] = useState<WikiPage[]> ([])
const search = () => {
void (axios.get (`${ API_BASE_URL }/wiki/search`, { params: { title } })
.then (res => setResults (toCamel (res.data, { deep: true }))))
const search = async () => {
const res = await axios.get (`${ API_BASE_URL }/wiki/search`, { params: { title } })
setResults (toCamel (res.data as any, { deep: true }) as WikiPage[])
}
const handleSearch = (e: React.FormEvent) => {
e.preventDefault ()
const handleSearch = (ev: React.FormEvent) => {
ev.preventDefault ()
search ()
}