[Improve code]: astro/src/components/Client/bsky/* 手動formatter・Linter対応

astro/src/components/Client/bsky/LoginForm.tsx

@@ -1,24 +1,30 @@
-import { useState, useEffect, useContext, Dispatch, SetStateAction } from "react"
+import {
+    useState,
+    useEffect,
+    useContext,
+    Dispatch,
+    SetStateAction,
+} from "react"
 import { inputtext_base, link } from "../common/tailwindVariants"
 import { Session_context, Profile_context } from "../common/contexts"
 import { type msgInfo } from "../common/types"
-import createSession from "@/utils/atproto_api/createSession";
-import loadProfile from "./lib/loadProfile";
+import createSession from "@/utils/atproto_api/createSession"
+import loadProfile from "./lib/loadProfile"
 
-import { writeJwt } from "@/utils/useLocalStorage"
 import ProcButton from "../common/ProcButton"
 import Tooltip from "../common/Tooltip"
 import SavePasswordToggle from "./optionToggles/SavePasswordToggle"
-import { readLogininfo, setLogininfo } from "@/utils/useLocalStorage"
+import { writeJwt, readLogininfo, setLogininfo } from "@/utils/useLocalStorage"
+import { servicename } from "@/env/vars"
 
 export const Component = ({
     setMsgInfo,
 }: {
-    setMsgInfo: Dispatch<SetStateAction<msgInfo>>,
+    setMsgInfo: Dispatch<SetStateAction<msgInfo>>
 }) => {
     const [loading, setLoad] = useState<boolean>(false)
     const [savePassword, setSavePassword] = useState<boolean>(false)
-    const [identifier, setIdentifer] = useState<string>("")
+    const [identifier, setIdentifier] = useState<string>("")
     const [password, setPassword] = useState<string>("")
     const { setSession } = useContext(Session_context)
     const { setProfile } = useContext(Profile_context)
@@ -32,10 +38,10 @@ export const Component = ({
             }
             const res = await createSession({
                 identifier: id,
-                password: pw
+                password: pw,
             })
-            if (typeof res.error !== "undefined") {
-                let e: Error = new Error(res.message)
+            if ("error" in res) {
+                const e: Error = new Error(res.message)
                 e.name = res.error
                 throw e
             } else {
@@ -50,13 +56,13 @@ export const Component = ({
                 if (savePassword === true) {
                     setLogininfo({
                         id: identifier,
-                        pw: password
+                        pw: password,
                     })
                 }
                 // プロフィールを読み込み
                 await loadProfile({
                     session: res,
-                    setProfile: setProfile
+                    setProfile: setProfile,
                 })
             }
         } catch (error: unknown) {
@@ -66,7 +72,7 @@ export const Component = ({
             }
             setMsgInfo({
                 msg: msg,
-                isError: true
+                isError: true,
             })
         }
         setLoad(false)
@@ -78,77 +84,92 @@ export const Component = ({
                 msg: "ブラウザに保存されたID/APWでログイン中...",
                 isError: false,
             })
-            await handleLogin(
-                loginInfo.id,
-                loginInfo.pw)
+            await handleLogin(loginInfo.id, loginInfo.pw)
         }
     }
     useEffect(() => {
-        handleOnLoad()
+        void handleOnLoad()
     }, [])
 
     return (
-        <>
+        <div>
             <div className="mt-16">
                 <div className="align-middle mb-0">
                     <label className="w-32 inline-block my-auto">
                         Email or ID:
                     </label>
-                    <input onChange={(event) => setIdentifer(event.target.value)}
+                    <input
+                        onChange={event => setIdentifier(event.target.value)}
                         placeholder="example.bsky.social"
                         disabled={loading}
                         className={inputtext_base({
                             class: "max-w-52 w-full px-2",
                             kind: "outbound",
-                            disabled: loading
-                        })} type="text" />
+                            disabled: loading,
+                        })}
+                        type="text"
+                    />
                 </div>
                 <div className="align-middle">
                     <label className="w-32 inline-block my-auto">
                         AppPassword※:
                     </label>
-                    <input onChange={(event) => setPassword(event.target.value)}
+                    <input
+                        onChange={event => setPassword(event.target.value)}
                         placeholder="this-isex-ampl-epwd"
                         disabled={loading}
                         className={inputtext_base({
                             class: "max-w-52 w-full px-2",
                             kind: "outbound",
-                            disabled: loading
-                        })} type="password" />
+                            disabled: loading,
+                        })}
+                        type="password"
+                    />
                 </div>
                 <div className="my-2">
                     <ProcButton
                         handler={handleLogin}
                         isProcessing={loading}
                         context="Blueskyアカウントへログイン"
-                        disabled={!(identifier.length > 0 && password.length > 0)}
-                        showAnimation={true} />
+                        disabled={
+                            !(identifier.length > 0 && password.length > 0)
+                        }
+                        showAnimation={true}
+                    />
                 </div>
                 <div className="mx-auto w-fit">
                     <SavePasswordToggle
                         labeltext={"ID/AppPasswordをブラウザへ保存する"}
                         prop={savePassword}
-                        setProp={setSavePassword} />
+                        setProp={setSavePassword}
+                    />
                 </div>
-                <Tooltip tooltip={
-                    <div className="flex flex-col sm:flex-row">
-                        <div className="inline-block px-4 py-2 text-left">
-                            （BskyLinXに限らず）非公式のアプリを使う際はAppPasswordの利用が推奨されています。
-                            <a className={link()}
-                                target="_blank"
-                                href="https://bsky.app/settings/app-passwords">
-                                <b>bsky.appの⚙設定</b>→<b>🔒高度な設定(新規タブが開きます)</b>
-                            </a>から生成してください。
+                <Tooltip
+                    tooltip={
+                        <div className="flex flex-col sm:flex-row">
+                            <div className="inline-block px-4 py-2 text-left">
+                                {`（${servicename}に限らず）非公式のアプリを使う際はAppPasswordの利用が推奨されています。`}
+                                <a
+                                    className={link()}
+                                    target="_blank"
+                                    href="https://bsky.app/settings/app-passwords"
+                                    rel="noopener noreferrer"
+                                >
+                                    <b>bsky.appの⚙設定</b>→
+                                    <b>🔒高度な設定(新規タブが開きます)</b>
+                                </a>
+                                から生成してください。
+                            </div>
                         </div>
-                    </div>
-                }>
+                    }
+                >
                     <span className="text-sky-400">
                         ※AppPasswordとは？(タップで説明を表示)
                     </span>
                 </Tooltip>
             </div>
-        </>
+        </div>
     )
 }
 
-export default Component
+export default Component

astro/src/components/Client/bsky/MediaPreview/AltDialog.tsx

@@ -1,5 +1,5 @@
 // utils
-import React, { memo, useRef, useCallback, useState, useEffect } from "react";
+import React, { memo, useRef, useCallback, useState, useEffect } from "react"
 
 // component
 import OverlayDialog from "../../common/OverlayDialog"
@@ -9,50 +9,54 @@ import { inputtext_base, link } from "../../common/tailwindVariants"
 import { MediaData } from "../../common/types"
 
 const Img = ({
-    mediaDataItem
+    mediaDataItem,
 }: {
     mediaDataItem: {
         alt: string
         blob: Blob
     }
 }) => {
     return (
-        <img src={URL.createObjectURL(mediaDataItem.blob)} className="max-w-md w-full mx-auto" />
+        <img
+            src={URL.createObjectURL(mediaDataItem.blob)}
+            className="max-w-md w-full mx-auto"
+        />
     )
 }
 const MemoImg = memo(Img)
 
 export const Component = ({
     itemId,
-    mediaData
+    mediaData,
 }: {
-    itemId: number,
+    itemId: number
     mediaData: MediaData
 }) => {
     // mediaDataがimageではない場合はコンポーネントを無効に
     if (mediaData === null || mediaData.type !== "images") {
         return
     }
     let mediaDataItem = mediaData.images[itemId]
-    const textref = useRef<HTMLTextAreaElement | null>(null);
+    const textref = useRef<HTMLTextAreaElement | null>(null)
     const [altBoxText, setAltBoxText] = useState<string>(mediaDataItem.alt)
     const maxShowAltLength = 10
 
     const handleOpenDialog = () => {
         if (textref.current) {
             textref.current.value = mediaDataItem.alt
         }
-    };
+    }
 
     const handleCloseDialog = () => {
         mediaDataItem.alt = altBoxText
-    };
+    }
 
     const handleClickInDialog = useCallback(
         (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            e.stopPropagation();
-        }, []
-    );
+            e.stopPropagation()
+        },
+        [],
+    )
 
     const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         // メディアがimagesの場合のみ処理
@@ -81,43 +85,51 @@ export const Component = ({
             callbackOpenDialog={handleOpenDialog}
             callbackCloseDialog={handleCloseDialog}
             buttonOption={{
-                className: [
-                    "rounded-lg", "border-1",
-                    "bg-opacity-70", "px-2",
-                    "bg-black", "border-white",
-                    "text-white", "absolute",
-                    "left-1", "bottom-1"].join(" ") + (
-                        altBoxText !== "" ? (" bg-blue-500") : ("")
-                    ),
+                className:
+                    [
+                        "rounded-lg",
+                        "border-1",
+                        "bg-opacity-70",
+                        "px-2",
+                        "bg-black",
+                        "border-white",
+                        "text-white",
+                        "absolute",
+                        "left-1",
+                        "bottom-1",
+                    ].join(" ") + (altBoxText !== "" ? " bg-blue-500" : ""),
                 content:
-                    altBoxText !== "" ? (
-                        `${altBoxText.slice(0, maxShowAltLength)
-                        }${altBoxText.length >= maxShowAltLength
-                            ? ("...") : ("")}`
-                    ) : (
-                        "Altを設定"
-                    )
-            }}>
-            <div onClick={handleClickInDialog} >
-                <MemoImg
-                    mediaDataItem={mediaDataItem} />
-                <label>画像に設定するAltを入力（ダイアログを閉じると反映）</label>
-                <textarea onChange={handleOnChange}
+                    altBoxText !== ""
+                        ? `${altBoxText.slice(0, maxShowAltLength)}${
+                              altBoxText.length >= maxShowAltLength ? "..." : ""
+                          }`
+                        : "Altを設定",
+            }}
+        >
+            <div onClick={handleClickInDialog}>
+                <MemoImg mediaDataItem={mediaDataItem} />
+                <label>
+                    画像に設定するAltを入力（ダイアログを閉じると反映）
+                </label>
+                <textarea
+                    onChange={handleOnChange}
                     autoFocus={true}
                     ref={textref}
                     placeholder="上記に設定するAltを入力してください"
                     className={inputtext_base({
                         kind: "outbound",
-                        class: "p-4 w-full md:w-lg resize-y overflow-y-auto h-32"
+                        class: "p-4 w-full md:w-lg resize-y overflow-y-auto h-32",
                     })}
                 />
                 <button
                     className={link({ enabled: !(altBoxText === "") })}
                     disabled={altBoxText === ""}
                     onClick={handleClick}
-                >内容をクリア</button>
+                >
+                    内容をクリア
+                </button>
             </div>
         </OverlayDialog>
-    );
-};
-export default Component
+    )
+}
+export default Component