設定画面 (#34) (#397)

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

frontend/src/pages/posts/PostNewPage.tsx

@@ -41,16 +41,13 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [parentPostIds, setParentPostIds] = useState ('')
   const [tags, setTags] = useState ('')
   const [duration, setDuration] = useState ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
   const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
   const [thumbnailLoading, setThumbnailLoading] = useState (false)
   const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
   const [title, setTitle] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
   const [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
 
-  const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
@@ -86,23 +83,17 @@ const PostNewPage: FC<Props> = ({ user }) => {
     }
   }
 
-  const handleURLBlur = () => {
-    if (!(url) || url === previousURLRef.current)
-      return
-
-    if (titleAutoFlg)
-      fetchTitle ()
-    if (thumbnailAutoFlg)
-      fetchThumbnail ()
-    previousURLRef.current = url
-  }
-
   const fetchTitle = useCallback (async () => {
-    setTitle ('')
     setTitleLoading (true)
-    const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
-    setTitle (data.title || '')
-    setTitleLoading (false)
+    try
+    {
+      const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
+      setTitle (data.title || '')
+    }
+    finally
+    {
+      setTitleLoading (false)
+    }
   }, [url])
 
   const fetchThumbnail = useCallback (async () => {
@@ -111,30 +102,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
     setThumbnailLoading (true)
     if (thumbnailPreviewRef.current)
       URL.revokeObjectURL (thumbnailPreviewRef.current)
-    const data = await apiGet<Blob> ('/preview/thumbnail',
-				     { params: { url }, responseType: 'blob' })
-    const imageURL = URL.createObjectURL (data)
-    setThumbnailPreview (imageURL)
-    setThumbnailFile (new File ([data],
-				'thumbnail.png',
-				{ type: data.type || 'image/png' }))
-    setThumbnailLoading (false)
+    try
+    {
+      const data = await apiGet<Blob> ('/preview/thumbnail',
+				       { params: { url }, responseType: 'blob' })
+      const imageURL = URL.createObjectURL (data)
+      setThumbnailPreview (imageURL)
+      setThumbnailFile (new File ([data],
+				  'thumbnail.png',
+				  { type: data.type || 'image/png' }))
+    }
+    finally
+    {
+      setThumbnailLoading (false)
+    }
   }, [url])
 
   useEffect (() => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [fetchTitle, titleAutoFlg, url])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [fetchThumbnail, thumbnailAutoFlg, url])
-
   if (!(editable))
     return <Forbidden/>
 
@@ -156,59 +143,62 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		       onChange={e => setURL (e.target.value)}
 		       aria-describedby={describedBy}
 		       aria-invalid={invalid}
-		       className={inputClass (invalid)}
-		       onBlur={handleURLBlur}/>)}
+		       className={inputClass (invalid)}/>)}
 	  </FormField>
 
 	  {/* タイトル */}
-	  <FormField
-	      checkBox={{
-		  label:    '自動',
-		  checked:  titleAutoFlg,
-		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
-	      label="タイトル"
-	      messages={fieldErrors.title}>
+	  <FormField label="タイトル" messages={fieldErrors.title}>
 	    {({ describedBy, invalid }) => (
-		<input type="text"
-		       aria-describedby={describedBy}
-		       aria-invalid={invalid}
-		       className={inputClass (invalid)}
-		       value={title}
-		       placeholder={titleLoading ? 'Loading...' : ''}
-		       onChange={ev => setTitle (ev.target.value)}
-		       disabled={titleAutoFlg}/>)}
+		<div className="space-y-2">
+		  <input type="text"
+			 aria-describedby={describedBy}
+			 aria-invalid={invalid}
+			 className={inputClass (invalid)}
+			 value={title}
+			 placeholder={titleLoading ? 'Loading...' : ''}
+			 onChange={ev => setTitle (ev.target.value)}
+			 disabled={titleLoading}/>
+		  <div className="flex flex-wrap items-center gap-2 text-sm">
+		    <span>必要なタイミングで URL から取得できます．</span>
+		    <Button
+			type="button"
+			variant="outline"
+			onClick={() => void fetchTitle ()}
+			disabled={!(url) || titleLoading}>
+		      取得
+		    </Button>
+		  </div>
+		</div>)}
 	  </FormField>
 
 	  {/* サムネール */}
-	  <FormField
-	      checkBox={{
-		  label:    '自動',
-		  checked:  thumbnailAutoFlg,
-		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
-	      label="サムネール"
-	      messages={fieldErrors.thumbnail}>
+	  <FormField label="サムネール" messages={fieldErrors.thumbnail}>
 	    {({ describedBy, invalid }) => (
 		<>
-		  {thumbnailAutoFlg
-		   ? (thumbnailLoading
-		      ? <p className="text-gray-500 text-sm">Loading...</p>
-		      : !(thumbnailPreview) && (
-			  <p className="text-gray-500 text-sm">
-			    URL から自動取得されます。
-			  </p>))
-		   : (
-		      <input type="file"
-			     accept="image/*"
-			     aria-describedby={describedBy}
-			     aria-invalid={invalid}
-			     onChange={e => {
-			       const file = e.target.files?.[0]
-			       if (file)
-				 {
-				   setThumbnailFile (file)
-				   setThumbnailPreview (URL.createObjectURL (file))
-				 }
-			     }}/>)}
+		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
+		    <span>必要なタイミングで URL から取得できます．</span>
+		    <Button
+			type="button"
+			variant="outline"
+			onClick={() => void fetchThumbnail ()}
+			disabled={!(url) || thumbnailLoading}>
+		      取得
+		    </Button>
+		  </div>
+		  {thumbnailLoading && (
+		      <p className="text-gray-500 text-sm">Loading...</p>)}
+		  <input type="file"
+			 accept="image/*"
+			 aria-describedby={describedBy}
+			 aria-invalid={invalid}
+			 onChange={e => {
+			   const file = e.target.files?.[0]
+			   if (file)
+			     {
+			       setThumbnailFile (file)
+			       setThumbnailPreview (URL.createObjectURL (file))
+			     }
+			 }}/>
 		  {thumbnailPreview && (
 		      <img src={thumbnailPreview}
 			   alt="preview"