#30 #31 完了

frontend/src/App.tsx

@@ -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 = () => {
+export default () => {
-  const [posts, setPosts] = useState<Post[]> ([])
   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

@@ -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

@@ -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[]
+type Props = { posts: Post[] }
-               setPosts:  (posts: Post[]) => void }
 
 
 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 () => {
+    const tagsTmp: TagByCategory = { }
-      try
+    const tagsCountsTmp: { [key: number]: number } = { }
-      {
-        let tagsTmp: TagByCategory = { }
-        let tagsCountsTmp: { [key: id]: 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

@@ -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

@@ -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

@@ -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 { API_BASE_URL, SITE_TITLE } from '@/config'
-import NicoViewer from '../components/NicoViewer'
+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 = () => {
-const PostDetailPage = ({ posts, setPosts }: Props) => {
   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))
+  if (!(post))
-    return <div>Loading...</div>
+    return (
-
+        <>
-  const post = posts[0]
+          <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')}>
+                                       post.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
-          {posts[0]?.viewed ? '閲覧済' : '未閲覧'}
+                  {post.viewed ? '閲覧済' : '未閲覧'}
                 </Button>
               </div>)
+           : 'Loading...'}
+        </MainArea>
+      </>)
 }
 
 

frontend/src/pages/PostNewPage.tsx

@@ -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

@@ -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 }
 
-
+export default () => {
-const PostPage = (props: Props) => {
+  const [posts, setPosts] = useState<Post[]> ([])
-  const { posts, setPosts } = props
 
   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

@@ -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

@@ -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

@@ -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