/TinderUI

Primary LanguageJavaScript

Tinder UI (React-Javascript)

Try the demo

tinderUI-error

Try the demo here!

Requirements

  • スマホのブラウザ環境で動作すること ✅
  • カード下の左にスキップボタン、右にいいね！ボタンを表示する ✅
  • スキップボタンをタップしたときはカードが左に流れるアニメーションが実行され、次のカードが表示される ✅
  • いいね！ボタンをタップしたときはカードが右に流れるアニメーションが実行され、次のカードが表示される ✅
  • すべてのカードを仕分けできたら empty 画面が表示される ✅
  • テストを書く ❌
  • スワイプでカードを仕分けできる ✅
  • カードの下部をタップすると詳細画面が表示される ✅
  • API サーバーと連携する ✅

Planning

① UI design

Tinder-UI-Picture

figma で見てみる

② Component

  • Phone (写真とボタンを覆うコンポーネント)
  • TinderCards (一枚一枚の写真を展開(map)するコンポーネント）
  • Card (写真のコンポーネント)
  • Botton (ボタンのコンポーネント)

③ 使用予定の Library

難しかったこと

ユーザーが Skip と Like のボタンを交互に押した時、アニメーションが上手くいかなかった。

tinderUI-error

考えられる問題

もしかしたどこか知らないところで、コンポーネントが unmount されて、の exit animation がトリガーされてしまっているかもしれない。

解決するためにしたこと

useEffect()を使い, いつ TinderCards コンポーネントが mount、unmount されるかをテストしてみた。

useEffect(() => {
	console.log('Mounted');
	return () => {
		console.log('Unmounted');
	};
});

問題の解決

useEffect()のおかげで Skip と Like ボタンを交互に押した時、setSwipeDirection()で swipeDirection の state が変わり、React が TinderCards コンポーネントを rerender をしているのがわかった。要は、以下の状況が起きていた。

  1. 左のボタンを押した後、右のボタンを押す。

  2. setSwipeDirection()が left->right へと state を変更されるので React が TinderCards コンポーネントを rerender する。

  3. 元々あった TinderCards が unmount されるための exit animation がトリガーされる。この時、の className は left のままのため、左側に流れるアニメーションが実行されてしまう。

なので毎回、カードを取り除いた後、このように setSwipeDirection('')を実行し、swipeDirection をリセットする。 そうすることでまた state が変わり rerender が実行されの className は' 'になる。当然''という名前のアニメショーンは書いていない。結果、left->right と変更した時、同じようにの exit animation がトリガーされるが、の className は''のためアニメーションは実行されずに済むので上手くいく。

tinderUI-sucess