UI プロトタイプ実装 #13
UI プロトタイプ実装 #13
Conversation
| <MantineTextInput | ||
| autoComplete={autoComplete} | ||
| inputWrapperOrder={mantineInputOrder} | ||
| {...(autoComplete === "off" && { "data-1p-ignore": true })} |
There was a problem hiding this comment.
1password が必要以上に自動補完してくるのを防ぐ
| const shortLanguage = useLanguageLiteral("ja"); | ||
|
|
||
| const navigation = useNavigation(); | ||
| const searchInProgress = navigation.state !== "idle"; |
There was a problem hiding this comment.
idle → (submit) → submitting → (execute action) → loading → (execute loader) → idle
なので、idle でない場合は常に何らかのロードを行っているとみなす
| @@ -0,0 +1,50 @@ | |||
| import { parseURL, stringifyParsedURL, withQuery } from "ufo"; | |||
There was a problem hiding this comment.
API 側のページネーションが既に治っているので必要ない実装だが、あとから消すことにした
| formType, | ||
| ...rest | ||
| }: UseNoteSearchFormOptions): UseNoteSearchFormReturn => { | ||
| const formIdHash = useMemo( |
There was a problem hiding this comment.
defaultValue が変わると必ず formIdHash の値が変わる。
これを useForm の id に渡してあげることで、
defaultValue が変わったらすべての input を明示的に再レンダリングできる
| @@ -12,7 +12,7 @@ export interface Note { | |||
| /** | |||
| * コミュニティノートの作成日時 (ミリ秒単位の UNIX EPOCH TIMESTAMP) | |||
| * @minimum 1152921600000 | |||
| * @maximum 1736905314223 | |||
| * @maximum 1738808503163 | |||
There was a problem hiding this comment.
このあたりの値が定数になるのは予想していない挙動だと思うので、
OpenAPI Spec の修正が必要
| { | ||
| rel: "canonical", | ||
| // TODO: change before production | ||
| href: "https://birdxplorer.code4japan.org", |
There was a problem hiding this comment.
これが確定するまでにリリースすると危険
There was a problem hiding this comment.
先に noindex nofollow でデプロイして、ドメイン紐づけが完了次第 noindex nofollow を外すことで合意済み
| // 簡易検索画面においても詳細検索にしかない検索条件の値は保持される。 | ||
| // このため、簡易検索の条件を入れて検索したつもりでも、詳細検索にしかない条件が追加で入る可能性がある。 | ||
| // これは、詳細検索を多用するユーザーには利用しやすいが、簡易検索を多用するユーザーには予期せぬ挙動となる。 | ||
| // この問題を解決するために、詳細検索のみの条件が指定されている場合はその数をユーザーにフィードバックしたい。 | ||
| const hiddenInputKeys = Object.keys(form.value ?? {}).filter((key) => { | ||
| return !( | ||
| [ | ||
| "note_includes_text", | ||
| "topic_ids", | ||
| "language", | ||
| "note_created_at_from", | ||
| "note_created_at_to", | ||
| "limit", | ||
| "offset", // フォームでは入力しないが、ページネーションは簡易検索の画面に表示されているので | ||
| ] satisfies Array<keyof NoteSearchParams> | ||
| ).includes( | ||
| // @ts-expect-error ここでは型が合わないが、ランタイムの挙動は Literal[] と string の比較になるので問題ないstring | ||
| key, | ||
| ); | ||
| }); |
There was a problem hiding this comment.
コメントにも書いているが、
- 詳細検索限定の検索パラメータは簡易検索画面でも保持される
- 詳細検索を多用するユーザーに都合が良い挙動
- 問題: 簡易検索のパラメータのみ指定したつもりでも詳細検索のパラメータが含まれる挙動が出る
この問題に対処するために詳細検索限定の条件が何個指定されているか計算し表示している
There was a problem hiding this comment.
このロジックは後で切り出してテストを書くべき
やったこと
TODO
スクリーンショット
PC
Mobile
|