| 
				
				
					
				
				
				 | 
			
			 | 
			@@ -3,6 +3,9 @@ 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 { Button } from '@/components/ui/button' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { toast } from '@/components/ui/use-toast' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { cn } from '@/lib/utils' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			type Tag = { id:        number | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			             name:      string | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -12,22 +15,51 @@ type Post = { id:         number | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              url:        string | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              title:      string | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              thumbnail:  string | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              tags:       Tag[] } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              tags:       Tag[] | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              viewed:     boolean } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			type Props = { posts:     Post[] | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			               setPosts:  (posts: Post[]) => void } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const PostDetailPage = (props: Props) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const { posts, setPosts } = props | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const PostDetailPage = ({ posts, setPosts }: Props) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const { id } = useParams () | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const location = useLocation () | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const changeViewedFlg = () => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    if (posts[0]?.viewed) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        void (axios.delete ( | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  `${ API_BASE_URL }/posts/${ id }/viewed`, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              .then (res => setPosts (([post]) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                post.viewed = false | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                return [post] | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              })) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              .catch (err => toast ({ title:        '失敗……', | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                                      description:  '通信に失敗しました……' }))) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    else | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        void (axios.post ( | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  `${ API_BASE_URL }/posts/${ id }/viewed`, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  { }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              .then (res => setPosts (([post]) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                post.viewed = true | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                return [post] | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              })) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              .catch (err => toast ({ title:        '失敗……', | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                                      description:  '通信に失敗しました……' }))) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  useEffect (() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    if (!(id)) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      return | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    void (axios.get (`/api/posts/${ id }`) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          .then (res => setPosts ([res.data])) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          .catch (err => console.error ('うんち!', err))) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  }, [id]) | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -56,6 +88,11 @@ const PostDetailPage = (props: Props) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          else | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            return <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        }) ()} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <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 ? '閲覧済' : '未閲覧'} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </Button> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </div>) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
	
		
			
				| 
				
					
				
				
				
				 | 
			
			 | 
			
  |