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