#34

frontend/src/pages/posts/PostNewPage.tsx

@@ -49,13 +49,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [title, setTitle] = useState ('')
   const [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
+  const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
+  const [thumbnailAutoFlg, setThumbnailAutoFlg] =
+      useState (settings.autoFetchThumbnail === 'auto')
 
   const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
   const titleFetchMode = settings.autoFetchTitle
   const thumbnailFetchMode = settings.autoFetchThumbnail
-  const titleAutoFlg = titleFetchMode === 'auto'
-  const thumbnailAutoFlg = thumbnailFetchMode === 'auto'
   const titleFetchVisible = titleFetchMode !== 'off'
   const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
   const videoFlg =
@@ -143,6 +144,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
+  useEffect (() => {
+    setTitleAutoFlg (settings.autoFetchTitle === 'auto')
+  }, [settings.autoFetchTitle])
+
+  useEffect (() => {
+    setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
+  }, [settings.autoFetchThumbnail])
+
   useEffect (() => {
     if (titleAutoFlg && url)
       fetchTitle ()
@@ -189,23 +198,33 @@ const PostNewPage: FC<Props> = ({ user }) => {
 			 value={title}
 			 placeholder={titleLoading ? 'Loading...' : ''}
 			 onChange={ev => setTitle (ev.target.value)}
-			 disabled={titleAutoFlg}/>
+			 disabled={titleLoading}/>
 		  <div className="flex flex-wrap items-center gap-2 text-sm">
 		    <span>
 		      {titleAutoFlg
 		       ? 'URL 入力時に自動取得します．'
 		       : titleFetchMode === 'manual'
 			 ? '自動取得しません．必要なら手動で取得できます．'
-			 : '取得機能は無効です．'}
+		       : '取得機能は無効です．'}
 		    </span>
-		    {titleFetchVisible && !(titleAutoFlg) && (
-			<Button
-			    type="button"
-			    variant="outline"
-			    onClick={() => void fetchTitle ()}
-			    disabled={!(url) || titleLoading}>
-			  取得
-			</Button>)}
+		    {titleFetchVisible && (
+			<>
+			  <label className="flex items-center gap-1">
+			    <input
+				type="checkbox"
+				checked={titleAutoFlg}
+				onChange={ev => setTitleAutoFlg (ev.target.checked)}/>
+			    <span>自動</span>
+			  </label>
+			  {!(titleAutoFlg) && (
+			      <Button
+				  type="button"
+				  variant="outline"
+				  onClick={() => void fetchTitle ()}
+				  disabled={!(url) || titleLoading}>
+				取得
+			      </Button>)}
+			</>)}
 		  </div>
 		</div>)}
 	  </FormField>
@@ -220,16 +239,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		       ? 'URL 入力時に自動取得します．'
 		       : thumbnailFetchMode === 'manual'
 			 ? '自動取得しません．必要なら手動で取得できます．'
-			 : '取得機能は無効です．'}
+		       : '取得機能は無効です．'}
 		    </span>
-		    {thumbnailFetchVisible && !(thumbnailAutoFlg) && (
-			<Button
-			    type="button"
-			    variant="outline"
-			    onClick={() => void fetchThumbnail ()}
-			    disabled={!(url) || thumbnailLoading}>
-			  取得
-			</Button>)}
+		    {thumbnailFetchVisible && (
+			<>
+			  <label className="flex items-center gap-1">
+			    <input
+				type="checkbox"
+				checked={thumbnailAutoFlg}
+				onChange={ev => setThumbnailAutoFlg (ev.target.checked)}/>
+			    <span>自動</span>
+			  </label>
+			  {!(thumbnailAutoFlg) && (
+			      <Button
+				  type="button"
+				  variant="outline"
+				  onClick={() => void fetchThumbnail ()}
+				  disabled={!(url) || thumbnailLoading}>
+				取得
+			      </Button>)}
+			</>)}
 		  </div>
 		  {thumbnailAutoFlg
 		   ? (thumbnailLoading