miteruzo/btrc-hub
1
0
Fork 0
Code Issues 69 Pull Requests 1 Releases Wiki Activity

#30 #31 完了

Browse Source
This commit is contained in:
みてるぞ
2025-06-13 01:36:53 +09:00
parent 3363fcd2ae
commit 32ed235807
11 changed files with 327 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+4 -15
View File
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d
import TagPage from '@/pages/TagPage'
import TopNav from '@/components/TopNav'
import TagSidebar from '@/components/TagSidebar'
import TagDetailSidebar from '@/components/TagDetailSidebar'
import PostPage from '@/pages/PostPage'
import PostNewPage from '@/pages/PostNewPage'
import PostDetailPage from '@/pages/PostDetailPage'
@@ -16,15 +17,13 @@ import { camelizeKeys } from 'humps'
import type { Post, Tag, User } from '@/types'
const App = () => {
const [posts, setPosts] = useState<Post[]> ([])
export default () => {
const [user, setUser] = useState<User | null> (null)
useEffect (() => {
const createUser = () => (
axios.post (`${ API_BASE_URL }/users`)
.then (res => {
if (res.data.code)
{
localStorage.setItem ('user_code', res.data.code)
@@ -55,29 +54,19 @@ const App = () => {
<div className="flex flex-col h-screen w-screen">
<TopNav user={user} setUser={setUser} />
<div className="flex flex-1">
<Routes>
<Route path="/posts/new" />
<Route path="/posts" element={<TagSidebar posts={posts} setPosts={setPosts} />} />
<Route path="/posts/:id" element={<TagSidebar posts={posts} setPosts={setPosts} />} />
</Routes>
<main className="flex-1 overflow-y-auto p-4">
<Routes>
<Route path="/" element={<Navigate to="/posts" replace />} />
<Route path="/posts" element={<PostPage posts={posts} setPosts={setPosts} />} />
<Route path="/posts" element={<PostPage />} />
<Route path="/posts/new" element={<PostNewPage />} />
<Route path="/posts/:id" element={<PostDetailPage posts={posts} setPosts={setPosts} />} />
<Route path="/posts/:id" element={<PostDetailPage />} />
<Route path="/tags/:tag" element={<TagPage />} />
<Route path="/wiki/:name" element={<WikiDetailPage />} />
<Route path="/wiki/new" element={<WikiNewPage />} />
{/* <Route path="/wiki/:id/edit" element={<WikiEditPage />} /> */}
</Routes>
</main>
</div>
</div>
</Router>
<Toaster />
</>)
}
export default App
frontend/src/components/TagDetailSidebar.tsx
+60
View File
@@ -0,0 +1,60 @@
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Link, useParams } from 'react-router-dom'
import { API_BASE_URL } from '@/config'
import TagSearch from './TagSearch'
import SidebarComponent from './layout/SidebarComponent'
import type { Post, Tag } from '@/types'
type TagByCategory = { [key: string]: Tag[] }
type Props = { post: Post | null }
export default ({ post }: Props) => {
const [tags, setTags] = useState<TagByCategory> ({ })
const categoryNames: { [key: string]: string } = {
general: '一般',
deerjikist: 'ニジラー',
nico: 'ニコニコタグ' }
useEffect (() => {
if (!(post))
return
const fetchTags = async () => {
const tagsTmp: TagByCategory = { }
for (const tag of post.tags)
{
if (!(tag.category in tagsTmp))
tagsTmp[tag.category] = []
tagsTmp[tag.category].push (tag)
}
for (const cat of Object.keys (tagsTmp))
tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
setTags (tagsTmp)
}
fetchTags ()
}, [post])
return (
<SidebarComponent>
<TagSearch />
{['general', 'deerjikist', 'nico'].map (cat => cat in tags && (
<>
<h2>{categoryNames[cat]}</h2>
<ul>
{tags[cat].map (tag => (
<li key={tag.id} className="mb-2">
<Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
className="text-blue-600 hover:underline">
{tag.name}
</Link>
</li>))}
</ul>
</>))}
</SidebarComponent>)
}
frontend/src/components/TagSidebar.tsx
+11 -24
View File
@@ -1,15 +1,15 @@
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Link, useParams } from 'react-router-dom'
import { API_BASE_URL } from '../config'
import { API_BASE_URL } from '@/config'
import TagSearch from './TagSearch'
import SidebarComponent from './layout/SidebarComponent'
import type { Post, Tag } from '@/types'
type TagByCategory = { [key: string]: Tag[] }
type Props = { posts: Post[]
setPosts: (posts: Post[]) => void }
type Props = { posts: Post[] }
const tagNameMap: { [key: string]: string } = {
@@ -17,24 +17,21 @@ const tagNameMap: { [key: string]: string } = {
deerjikist: 'ニジラー',
nico: 'ニコニコタグ' }
const TagSidebar: React.FC = (props: Props) => {
const { posts, setPosts } = props
export default ({ posts }: Props) => {
const [tags, setTags] = useState<TagByCategory> ({ })
const [tagsCounts, setTagsCounts] = useState<{ [key: id]: number }> ({ })
const [tagsCounts, setTagsCounts] = useState<{ [key: number]: number }> ({ })
useEffect (() => {
const fetchTags = async () => {
try
{
let tagsTmp: TagByCategory = { }
let tagsCountsTmp: { [key: id]: number } = { }
const tagsTmp: TagByCategory = { }
const tagsCountsTmp: { [key: number]: number } = { }
for (const post of posts)
{
for (const tag of post.tags)
{
if (!(tag.category in tagsTmp))
tagsTmp[tag.category] = []
if (!(tagsTmp[tag.category].map (t => t.id).includes (tag.id)))
tagsTmp[tag.category].push (tag)
if (!(tag.id in tagsCountsTmp))
tagsCountsTmp[tag.id] = 0
@@ -45,18 +42,10 @@ const TagSidebar: React.FC = (props: Props) => {
tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
setTags (tagsTmp)
setTagsCounts (tagsCountsTmp)
}
catch (error)
{
console.error ('Failed to fetch tags:', error)
}
}
fetchTags ()
}, [posts])
return (
<div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
<SidebarComponent>
<TagSearch />
{['general', 'deerjikist', 'nico'].map (cat => cat in tags && <>
<h2>{tagNameMap[cat]}</h2>
@@ -67,11 +56,9 @@ const TagSidebar: React.FC = (props: Props) => {
className="text-blue-600 hover:underline">
{tag.name}
</Link>
{posts.length > 1 && <span className="ml-1">{tagsCounts[tag.id]}</span>}
<span className="ml-1">{tagsCounts[tag.id]}</span>
</li>))}
</ul>
</>)}
</div>)
</SidebarComponent>)
}
export default TagSidebar
frontend/src/components/layout/MainArea.tsx
+9
View File
@@ -0,0 +1,9 @@
import React from 'react'
type Props = { children: React.ReactNode }
export default ({ children }: Props) => (
<main className="flex-1 overflow-y-auto p-4">
{children}
</main>)
frontend/src/components/layout/SidebarComponent.tsx
+9
View File
@@ -0,0 +1,9 @@
import React from 'react'
type Props = { children: React.ReactNode }
export default ({ children }: Props) => (
<div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
{children}
</div>)
frontend/src/pages/PostDetailPage.tsx
+31 -19
View File
@@ -1,32 +1,33 @@
import React, { useEffect, useState } from 'react'
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 { 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 type { Post, Tag } from '@/types'
type Props = { posts: Post[]
setPosts: (posts: Post[]) => void }
const PostDetailPage = ({ posts, setPosts }: Props) => {
const PostDetailPage = () => {
const { id } = useParams ()
const [post, setPost] = useState<Post | null> (null)
const location = useLocation ()
const changeViewedFlg = () => {
if (posts[0]?.viewed)
if (post?.viewed)
{
void (axios.delete (
`${ API_BASE_URL }/posts/${ id }/viewed`,
{ headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (res => setPosts (([post]) => {
.then (res => setPost (post => {
post.viewed = false
return [post]
return post
}))
.catch (err => toast ({ title: '失敗……',
description: '通信に失敗しました……' })))
@@ -37,9 +38,9 @@ const PostDetailPage = ({ posts, setPosts }: Props) => {
`${ API_BASE_URL }/posts/${ id }/viewed`,
{ },
{ headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (res => setPosts (([post]) => {
.then (res => setPost (post => {
post.viewed = true
return [post]
return post
}))
.catch (err => toast ({ title: '失敗……',
description: '通信に失敗しました……' })))
@@ -51,20 +52,28 @@ const PostDetailPage = ({ posts, setPosts }: Props) => {
return
void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (res => setPosts ([res.data]))
.then (res => setPost (res.data))
.catch (err => console.error ('うんち!', err)))
}, [id])
if (!(posts.length))
return <div>Loading...</div>
const post = posts[0]
if (!(post))
return (
<>
<TagDetailSidebar post={null} />
<MainArea>Loading...</MainArea>
</>)
if (post)
document.title = `${ post.title || post.url } | ${ SITE_TITLE }`
const url = new URL (post.url)
const url = post ? new URL (post.url) : undefined
return (
<>
<TagDetailSidebar post={post} />
<MainArea>
{post
? (
<div className="p-4">
{(() => {
if (url.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp')
@@ -81,10 +90,13 @@ const PostDetailPage = ({ posts, setPosts }: Props) => {
}) ()}
<Button onClick={changeViewedFlg}
className={cn ('text-white',
posts[0]?.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
{posts[0]?.viewed ? '閲覧済' : '未閲覧'}
post.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
{post.viewed ? '閲覧済' : '未閲覧'}
</Button>
</div>)
: 'Loading...'}
</MainArea>
</>)
}
frontend/src/pages/PostNewPage.tsx
+5 -5
View File
@@ -6,6 +6,7 @@ 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 type { Post, Tag } from '@/types'
@@ -14,7 +15,7 @@ type Props = { posts: Post[]
setPosts: (posts: Post[]) => void }
const PostNewPage = () => {
export default () => {
const location = useLocation ()
const navigate = useNavigate ()
@@ -112,6 +113,7 @@ const PostNewPage = () => {
}
return (
<MainArea>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">広場に投稿を追加する</h1>
@@ -203,8 +205,6 @@ const PostNewPage = () => {
disabled={titleLoading || thumbnailLoading}>
追加
</button>
</div>)
</div>
</MainArea>)
}
export default PostNewPage
frontend/src/pages/PostPage.tsx
+10 -9
View File
@@ -2,15 +2,14 @@ import React, { useEffect, useState } from 'react'
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'
type Props = { posts: Post[]
setPosts: (posts: Post[]) => void }
const PostPage = (props: Props) => {
const { posts, setPosts } = props
export default () => {
const [posts, setPosts] = useState<Post[]> ([])
const location = useLocation ()
const query = new URLSearchParams (location.search)
@@ -42,6 +41,9 @@ const PostPage = (props: Props) => {
}, [location.search])
return (
<>
<TagSidebar posts={posts} />
<MainArea>
<div className="flex flex-wrap gap-4 p-4">
{posts.map (post => (
<Link to={`/posts/${ post.id }`}
@@ -51,8 +53,7 @@ const PostPage = (props: Props) => {
className="object-none w-full h-full" />
</Link>
))}
</div>)
</div>
</MainArea>
</>)
}
export default PostPage
frontend/src/pages/TagPage.tsx
+5 -4
View File
@@ -2,8 +2,10 @@ import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useParams } from 'react-router-dom'
import { API_BASE_URL } from '../config'
import MainArea from '@/components/layout/MainArea'
const TagPage = () => {
export default () => {
const { id } = useParams()
const [posts, setPosts] = useState([])
const [tagName, setTagName] = useState('')
@@ -32,6 +34,7 @@ const TagPage = () => {
}, [id])
return (
<MainArea>
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">タグ: {tagName}</h1>
<div className="grid grid-cols-4 gap-4">
@@ -43,7 +46,5 @@ const TagPage = () => {
))}
</div>
</div>
)
</MainArea>)
}
export default TagPage
frontend/src/pages/WikiDetailPage.tsx
+5 -5
View File
@@ -3,9 +3,10 @@ import { Link, useParams, useNavigate } from 'react-router-dom'
import ReactMarkdown from 'react-markdown'
import axios from 'axios'
import { API_BASE_URL } from '@/config'
import MainArea from '@/components/layout/MainArea'
const WikiDetailPage = () => {
export default () => {
const { name } = useParams ()
const navigate = useNavigate ()
@@ -26,6 +27,7 @@ const WikiDetailPage = () => {
}, [name])
return (
<MainArea>
<div className="prose mx-auto p-4">
<ReactMarkdown components={{ a: (
({ href, children }) => (href?.startsWith ('/')
@@ -33,8 +35,6 @@ const WikiDetailPage = () => {
: <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
{markdown || `このページは存在しません。[新規作成してください](/wiki/new?title=${ name })。`}
</ReactMarkdown>
</div>)
</div>
</MainArea>)
}
export default WikiDetailPage
frontend/src/pages/WikiNewPage.tsx
+5 -5
View File
@@ -9,13 +9,14 @@ import { cn } from '@/lib/utils'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
import 'react-markdown-editor-lite/lib/index.css'
import MainArea from '@/components/layout/MainArea'
import type { Tag } from '@/types'
const mdParser = new MarkdownIt
const WikiNewPage = () => {
export default () => {
const location = useLocation ()
const navigate = useNavigate ()
@@ -46,6 +47,7 @@ const WikiNewPage = () => {
}, [])
return (
<MainArea>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
@@ -73,8 +75,6 @@ const WikiNewPage = () => {
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
追加
</button>
</div>)
</div>
</MainArea>)
}
export default WikiNewPage