Remix+CloudflareでWebサイトを作る 33（「文A」というアイコン、ショトカのライブラリ、D1はトランザクション未対応、RadixのTabのdefaultValue）
saneatsu【2024-09-08】言語選択アイコンの「文A」って広く浸透していないのでは？
疑問
Xにも投稿したけど、「文A」アイコンを「言語選択だ！」となるのってエンジニア特有で、一般的にはあまり浸透していないのではないかと思った。
この例のように、エンジニアがよく見る技術サイトでは当然のように使われているので今まであまり考えてこなかった。
調べてみる
Dribbbleで調べてみると🌏 <selectedLanguage> は王道っぽいし、Xで返信いただいた溝口さんも同様の懸念からそうしているっぽい。
個人的には 🇯🇵 <selectedLanguage>または🇯🇵 単体という国旗の絵文字パターンでも良いかと思っている。なんか国旗のアイコンってその人に対して親しみ合ってポジティブな感じがするんだよな。
その場合「English」って🇬🇧？🇺🇸？
さすがに🇬🇧か。
イギリス英語とアメリカ英語で分ける思想強めなサイトってあるのかな。
saneatsu【2024-09-08】Locize
そのうち使いたい（がめんどそうなのでしないだろうな）
saneatsu【2024-09-08】ショートカットを設定する
6日前に更新されてる。
ありがてぇ🙏🏻
saneatsu【2024-09-18】D1ではトランザクションが実行できない
背景
最近はもっぱら国際化に伴うDBとUIの修正をしている。
このようなトランザクションを用いた処理を実装したところエラーが発生。
await client.$transaction(async (tx) => {
await tx.tag.create({
data: {
hoge: {
create: array.map(() => {
})
}
},
});
});
ErrorType: DefaultError
ErrorTitle: Error
ErrorMessage: Error: Cloudflare D1 does not support interactive transactions. We recommend you to refactor your queries with that limitation in mind, and use batch transactions with `prisma.$transactions([])` where applicable.
Cloudflare D1ではサポートされてないとな...。
調べる
今回のケースはこの記事のあるクエリの結果を別のクエリに使えないに該当するパターン。
どうする？
今回の対象テーブルはエラーが発生しうるのはテーブルでカラムAとカラムBの組み合わせが重複する時。
catchした先で delete を実行するのも怖いので、エラーが発生しながらも作成されてしまったデータは手動で削除できるような動線を用意することで一時的に回避しようかと思う。
こんなところに躓きがあるとは。
仕様だからしゃーなし。
ひとこと
多言語対応、2週間くらいやってるけど20%くらいしか進んでない。萎える😔
saneatsu
【2024-09-25】RadixのTabを切り替えると、常にdefaultValueの値が表示されてしまう
問題
shadcn/uiのTabsを使用している。
shadcn/uiの中ではRadixを使用している。
このページのデモでも確認できるがタブを切り替えたら値が保持されていなくて、defaultValueの値に戻ってしまっている。
これだとConfomを利用してフォームバリデーションを実装している場合に困ることになる。
このデモページの内容で説明する。
- ページにアクセス。「Account」タブが選択されていてその中のInputタグのフォームに
defaultValueが入っている状態 - 「Account」タブのInputタグのフォームの値を空にする
- ここが必須の場合フォームの周りが赤くなりエラーになる
- 「Password」タブに移動する
- 再度「Account」タブに移動する
この場合、「手順3によりAccountタブではフォーム周りが赤くなりエラーになっているのにも関わらず、defaultValueの値が入っている」という矛盾が生じてしまう。
解決方法
以下のようにforceMoutとhiddenを入れると解決できる。
<TabsContent forceMount hidden={value !== data.language} >
forceMoutがtrueだと選択していなくてもすべての<TabsContent>が強制的に表示される。
この場合、上記のような問題は起きなくなる。
そして hiddenを使って選択しているタブ以外の<TabsContent>を非表示にする、というやり方。
これはこれで記事書こう。