feat: 上位タグ（#64） (#173)

#64 おそらく完成

Merge remote-tracking branch 'origin/main' into feature/064

#64 バックエンドぼちぼち

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #173

frontend/src/components/PostEditForm.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
@@ -10,7 +10,23 @@ import { API_BASE_URL } from '@/config'
 
 import type { FC } from 'react'
 
-import type { Post } from '@/types'
+import type { Post, Tag } from '@/types'
+
+
+const tagsToStr = (tags: Tag[]): string => {
+  const result: Tag[] = []
+
+  const walk = (tag: Tag) => {
+    const { children, ...rest } = tag
+    result.push (rest)
+    children?.forEach (walk)
+  }
+
+  tags.filter (t => t.category !== 'nico').forEach (walk)
+
+  return [...(new Set (result.map (t => t.name)))].join (' ')
+}
+
 
 type Props = { post:    Post
 	       onSave:  (newPost: Post) => void }
@@ -22,10 +38,7 @@ export default (({ post, onSave }: Props) => {
   const [originalCreatedFrom, setOriginalCreatedFrom] =
       useState<string | null> (post.originalCreatedFrom)
   const [title, setTitle] = useState (post.title)
-  const [tags, setTags] = useState<string> (post.tags
-					    .filter (t => t.category !== 'nico')
-					    .map (t => t.name)
-					    .join (' '))
+  const [tags, setTags] = useState<string> ('')
 
   const handleSubmit = async () => {
     const res = await axios.put (
@@ -43,6 +56,10 @@ export default (({ post, onSave }: Props) => {
 	      originalCreatedBefore:  data.originalCreatedBefore } as Post)
   }
 
+  useEffect (() => {
+    setTags(tagsToStr (post.tags))
+  }, [post])
+
   return (
       <div className="max-w-xl pt-2 space-y-4">
 	{/* タイトル */}

frontend/src/components/TagDetailSidebar.tsx

@@ -7,12 +7,30 @@ import SubsectionTitle from '@/components/common/SubsectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { CATEGORIES } from '@/consts'
 
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 
 import type { Category, Post, Tag } from '@/types'
 
 type TagByCategory = { [key in Category]: Tag[] }
 
+
+const renderTagTree = (
+    tag:        Tag,
+    nestLevel:  number,
+    path:       string,
+    ): ReactNode[] => {
+  const key = `${ path }-${ tag.id }`
+
+  const self = (
+      <li key={key} className="mb-1">
+	<TagLink tag={tag} nestLevel={nestLevel}/>
+      </li>)
+
+  return [self,
+	  ...(tag.children?.flatMap (child => renderTagTree (child, nestLevel + 1, key)) ?? [])]
+}
+
+
 type Props = { post: Post | null }
 
 
@@ -54,10 +72,7 @@ export default (({ post }: Props) => {
 	    <div className="my-3" key={cat}>
 	      <SubsectionTitle>{categoryNames[cat]}</SubsectionTitle>
 	      <ul>
-		{tags[cat].map (tag => (
-		    <li key={tag.id} className="mb-1">
-		      <TagLink tag={tag}/>
-		    </li>))}
+		{tags[cat].map (tag => renderTagTree (tag, 0, `cat-${ cat }`))}
 	      </ul>
 	    </div>))}
 	{post && (

frontend/src/components/TagLink.tsx

@@ -8,6 +8,7 @@ import type { ComponentProps, FC, HTMLAttributes } from 'react'
 import type { Tag } from '@/types'
 
 type CommonProps = { tag:         Tag
+		     nestLevel?:  number
 		     withWiki?:   boolean
 		     withCount?:  boolean }
 
@@ -21,6 +22,7 @@ type Props = PropsWithLink | PropsWithoutLink
 
 
 export default (({ tag,
+		   nestLevel = 0,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
@@ -42,6 +44,12 @@ export default (({ tag,
 		?
 	      </Link>
 	    </span>)}
+	{nestLevel > 0 && (
+	    <span
+		className="ml-1 mr-1"
+		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
+	      ↳
+	    </span>)}
 	{linkFlg
 	 ? (
 	    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}

frontend/src/types.ts

@@ -1,7 +1,7 @@
-import React from 'react'
-
 import { CATEGORIES, USER_ROLES, ViewFlagBehavior } from '@/consts'
 
+import type { ReactNode } from 'react'
+
 export type Category = typeof CATEGORIES[number]
 
 export type Menu = MenuItem[]
@@ -29,19 +29,19 @@ export type Post = {
     originalCreatedFrom:    string | null
     originalCreatedBefore:  string | null }
 
-export type SubMenuItem = {
-    component:  React.ReactNode
-    visible:    boolean
-    } | {
-    name:     string
-    to:       string
-    visible?: boolean }
+export type SubMenuItem =
+    | { component:  ReactNode
+	visible:    boolean }
+    | { name:     string
+	to:       string
+	visible?: boolean }
 
 export type Tag = {
     id:         number
     name:       string
     category:   Category
-    postCount:  number }
+    postCount:  number
+    children?:  Tag[] }
 
 export type User = {
     id:               number