5月はどんな月だったか
フロントエンド開発に関わって４ヶ月目。こう聞くと意外と時間経ってるなと感じるが、できることはまだまだ少ない。プログラミング自体触りはじめてまだ8ヶ月くらいなんで仕方ない。そこから考えると、8ヶ月でよくアルバイトでプログラム書いて、まあまあそれっぽいことをやらせてもらえてることが驚きである。今月からはまあまあそれっぽいことをやって、苦労しながらなんとかこなしたという感じだった。ある意味で、エンジニア職の洗礼を浴びたと言えるのかもしれない。
ボタン連打防止
これは個人的にはやばいバグランキング上位入賞作品だと思っている。決済実行ボタンを連打すると、押した分だけ決済が発生してしまうという、こんなことが起きてしまうのか、、、というバグだった。
export const Pay = () => {
const [completeModal, setCompleteModal] = useState(false)
const [formDisabled,setFormDisabled] = useState(false)
const onSubmit = () => {
setFormDisabled(true);
changeOrderPayInformation({
variables: {
input: {
arguments: {
//略
},
},
},
})
.then(() => {
setCompleteModal(true)
})
.catch(() => {
setFormDisabled(false)
})
}
return (
<>
<Button type="submit" size="lg"
bgColor={color} textColor="white"
disabled={formDisabled}>
<span>提出</span>
</Button>
</>
)
}
ポイントはuseState()とエラーハンドリング。
promiseを使った非同期処理をしています。まだちゃんと自分も理解していないので、今後非同期処理についてもまとめたい。
流れ
- submitが起きたら、
setFormDisabled(true);でとりあえずボタンを無効化。 - onSubmitの処理が成功したら
setCompleteModal(true)で完了モーダル表示。失敗したらsetFormDisabled(false)でボタンを有効化。
空のオーダーで注文できてしまう
お金が絡むものは早急に対処すべき。商品数が0なのに注文できてしまうバグだった。結果的に何が起きるかというと、商品何も買っていないのに送料だけかかってしまい、お賽銭してしまうことになる。
でも確かに、何も考えなければこの現象は大いに起こりうる。違和感のないWEBサービスというのは、細かいところに数多くの気配りがされているのだなと感じた。
やったこと
const cartItemsCount = cart.reduce((sum, { quantity }) => sum + quantity, 0)
useEffect(() => {
if (cartItemsCount === 0) {
navigate('決済ページじゃない、安全なページ')
}
},[])
方針としては、カート内の商品数が０の場合に決済ページに入った場合は、安全なページへ遷移するように実装した。
一つ問題があって、if文をそのまま置いても実行されなくて、試しにuseEffectの中にif文を入れると期待する動作が確認できた。お恥ずかしい話、なんでuseEffectでちゃんと動くようになったのかが全くわからない。stateは周りで使われていなそうなので、再レンダリングはそこまで問題にならなさそうなのだが、なぜかuseEffectで解決されてしまった。
そこがわからないのも良く無いので、可能性の話でもいいので、こうだからじゃない？っていう思い当たる点があれば教えていただきたいです。 (全体のコード載せて無いのでアドバイスするのも難しいと思いますが、すみません、、、)
まとめ
5月、本当はもうちょっとやったのですが、実は書いてるのがもう6月後半でして、記憶が薄れてしまっているのでこの辺までにします。鮮度が高いうちにアウトプットすることを心がけます。
約束として、promiseを使った非同期処理の理解がまだ浅いので、近いうちにまとめます！