#297

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -261,53 +261,52 @@ export default (() => {
 	</MainArea>
 
 	<SidebarComponent>
-	  {comments.length > 0 && (
+	  <form
-	      <form
+	      className="w-full h-5/6"
-		  className="w-full h-5/6"
+	      onSubmit={async e => {
-		  onSubmit={async e => {
+		e.preventDefault ()
-		    e.preventDefault ()
 
-		    if (!(content))
+		if (!(content))
-		      return
+		  return
 
-		    try
+		try
-		    {
+		{
-		      setSending (true)
+		  setSending (true)
-		      await apiPost (`/theatres/${ id }/comments`, { content })
+		  await apiPost (`/theatres/${ id }/comments`, { content })
-		      setContent ('')
+		  setContent ('')
-		      commentsRef.current?.scrollTo ({
+		  commentsRef.current?.scrollTo ({
-			  top: commentsRef.current.scrollHeight,
+		      top: commentsRef.current.scrollHeight,
-			  behavior: 'smooth' })
+		      behavior: 'smooth' })
-		    }
+		}
-		    finally
+		finally
-		    {
+		{
-		      setSending (false)
+		  setSending (false)
-		    }
+		}
-		  }}>
+	      }}>
-		<div
+	    <div
-		    ref={commentsRef}
+		ref={commentsRef}
-		    className="overflow-x-hidden overflow-y-scroll text-wrap
+		className="overflow-x-hidden overflow-y-scroll text-wrap
-			       border border-black dark:border-white w-full h-3/4">
+			   border border-black dark:border-white w-full h-3/4">
-		  {comments.map (comment => (
+	      {comments.map (comment => (
-		      <div key={comment.no} className="p-2">
+		  <div key={comment.no} className="p-2">
-			<div className="w-full">
+		    <div className="w-full">
-			  {comment.content}
+		      {comment.content}
-			</div>
+		    </div>
-			<div className="w-full text-sm text-right">
+		    <div className="w-full text-sm text-right">
-			  by {comment.user ? (comment.user.name || '名もなきニジラー') : '運営'}
+		      by {comment.user ? (comment.user.name || '名もなきニジラー') : '運営'}
-			</div>
+		    </div>
-			<div className="w-full text-sm text-right">
+		    <div className="w-full text-sm text-right">
-			  {dateString (comment.createdAt)}
+		      {dateString (comment.createdAt)}
-			</div>
+		    </div>
-		      </div>))}
+		  </div>))}
-		</div>
+	    </div>
-		<input
+	    <input
-		    className="w-full p-2 border border-black dark:border-white"
+		className="w-full p-2 border border-black dark:border-white"
-		    type="text"
+		type="text"
-		    value={content}
+		value={content}
-		    onChange={e => setContent (e.target.value)}
+		onChange={e => setContent (e.target.value)}
-		    disabled={sending}/>
+		disabled={sending}/>
-	      </form>)}
+	  </form>
 	</SidebarComponent>
 
 	<div className="md:hidden">