diff --git a/backend/app/controllers/posts_controller.rb b/backend/app/controllers/posts_controller.rb index 990bd89..3522b01 100644 --- a/backend/app/controllers/posts_controller.rb +++ b/backend/app/controllers/posts_controller.rb @@ -3,8 +3,6 @@ require 'nokogiri' class PostsController < ApplicationController - before_action :set_post, only: %i[ show update destroy ] - # GET /posts def index if params[:tags].present? @@ -71,27 +69,21 @@ class PostsController < ApplicationController # PATCH/PUT /posts/1 def update - if @post.update(post_params) - render json: @post + return head :unauthorized unless current_user + return head :forbidden unless ['admin', 'member'].include?(current_user.role) + + post = Post.find(params[:id]) + tag_ids = JSON.parse(params[:tags]) + if post.update(title: params[:title], tags: Tag.where(id: tag_ids)) + render({ json: (post + .as_json(include: { tags: { only: [:id, :name, :category] } })), + status: :created }) else - render json: @post.errors, status: :unprocessable_entity + render json: post.errors, status: :unprocessable_entity end end # DELETE /posts/1 def destroy - @post.destroy! - end - - private - - # Use callbacks to share common setup or constraints between actions. - def set_post - @post = Post.find(params.expect(:id)) - end - - # Only allow a list of trusted parameters through. - def post_params - params.expect(post: [ :title, :body ]) end end diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7ca85ae..7482327 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -59,7 +59,7 @@ export default () => { } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/frontend/src/components/PostEditForm.tsx b/frontend/src/components/PostEditForm.tsx new file mode 100644 index 0000000..1e6e623 --- /dev/null +++ b/frontend/src/components/PostEditForm.tsx @@ -0,0 +1,72 @@ +import React, { useEffect, useState } from 'react' +import axios from 'axios' +import { API_BASE_URL } from '@/config' + +import type { Post, Tag } from '@/types' + +type Props = { post: Post + onSave: (newPost: Post) => void } + + +export default ({ post, onSave }: Props) => { + const [title, setTitle] = useState (post.title) + const [tags, setTags] = useState ([]) + const [tagIds, setTagIds] = useState (post.tags.map (t => t.id)) + + const handleSubmit = () => { + void (axios.put (`${ API_BASE_URL }/posts/${ post.id }`, + { title, + tags: JSON.stringify (tagIds) }, + { headers: { 'Content-Type': 'multipart/form-data', + 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } } ) + .then (res => { + const newPost: Post = res.data + onSave ({ ...post, + title: newPost.title, + tags: newPost.tags } as Post) + })) + } + + useEffect (() => { + void (axios.get ('/api/tags') + .then (res => setTags (res.data)) + .catch (() => toast ({ title: 'タグ一覧の取得失敗' }))) + }, []) + + return ( +
+ {/* タイトル */} +
+
+ +
+ setTitle (e.target.value)} /> +
+ + {/* タグ */} +
+ + +
+ + {/* 送信 */} + +
) +} diff --git a/frontend/src/components/TagDetailSidebar.tsx b/frontend/src/components/TagDetailSidebar.tsx index 077f58c..5cea00d 100644 --- a/frontend/src/components/TagDetailSidebar.tsx +++ b/frontend/src/components/TagDetailSidebar.tsx @@ -24,7 +24,7 @@ export default ({ post }: Props) => { if (!(post)) return - const fetchTags = async () => { + const fetchTags = () => { const tagsTmp: TagByCategory = { } for (const tag of post.tags) { diff --git a/frontend/src/pages/PostDetailPage.tsx b/frontend/src/pages/PostDetailPage.tsx index 394c7f0..7e87b90 100644 --- a/frontend/src/pages/PostDetailPage.tsx +++ b/frontend/src/pages/PostDetailPage.tsx @@ -8,17 +8,21 @@ 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 type { Post, Tag } from '@/types' +import type { Post, Tag, User } from '@/types' +type Props = { user: User } -const PostDetailPage = () => { - const { id } = useParams () - const [post, setPost] = useState (null) +export default ({ user }: Props) => { + const { id } = useParams () const location = useLocation () + const [post, setPost] = useState (null) + const [editing, setEditing] = useState (true) + const changeViewedFlg = () => { if (post?.viewed) { @@ -56,6 +60,15 @@ const PostDetailPage = () => { .catch (err => console.error ('うんち!', err))) }, [id]) + useEffect (() => { + setEditing (false) + }, [post]) + + useEffect (() => { + if (!(editing)) + setEditing (true) + }, [editing]) + if (!(post)) return ( <> @@ -93,11 +106,19 @@ const PostDetailPage = () => { post.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}> {post.viewed ? '閲覧済' : '未閲覧'} + {(['admin', 'member'].includes (user.role) && editing) && +
+ + 編輯 + + { + setPost (newPost) + toast ({ description: '更新しました．' }) + }} /> +
} ) : 'Loading...'} ) } - - -export default PostDetailPage diff --git a/frontend/src/pages/PostNewPage.tsx b/frontend/src/pages/PostNewPage.tsx index cc228a7..d9ca452 100644 --- a/frontend/src/pages/PostNewPage.tsx +++ b/frontend/src/pages/PostNewPage.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState, useRef } from 'react' 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 { 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' @@ -10,7 +10,6 @@ import MainArea from '@/components/layout/MainArea' import type { Post, Tag } from '@/types' - type Props = { posts: Post[] setPosts: (posts: Post[]) => void }