（３－１）削除処理（モバイル）
Opened this issue · 12 comments
ゴール
登録されているタスクを削除する。
やること
- タスクをスワイプすると、削除ボタンが表示される。
- 削除ボタンをタップすると、該当データを削除するAPIを実行する。（
http://localhost:8000/todo/[id]をDELETEメソッドで実行する。） - 削除ボタンをタップすると、データが削除される。
- 可能なら、APIが異常終了した際は削除しない。（難しいようであれば、別ISSUEにします。）
そうでした。モバイルの削除はスワイプ処理でした！！
react-swipe-to-delete-componentをインストールしましたが、正しくインポートされず以下のエラーが出ます。
Could not find a declaration file for module 'react-swipe-to-delete-component'. '/Users/yokoiwasaki/src/github.com/mo-ri-regen/qin-todo-frontend/node_modules/react-swipe-to-delete-component/dist/swipe-to-delete.min.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-swipe-to-delete-component` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-swipe-to-delete-component';`
正しくインポートされず以下のエラーが出ます。
これはtypescriptに対応していないという意味のエラーだと思います。
私のローカルでも表示されました。
型が用意されていれば下記のコマンドで型をインストールできますが、エラーになるので型を用意されていないと思います。
yarn add -D @types/react-swipe-to-delete-component
こちらはいかがでしょうか。
https://mebee.info/2020/04/14/post-7305/
typescriptも対応してそうです
https://www.npmjs.com/package/@types/react-swipeable-views
サンプルページと同じコードでデモページを作成してもエラーになってしまいます�
�
このエラーは、todoではなく、新規にお試しで別フォルダで試したけど、エラーという意味でしょうか。
yokoさんのリポジトリでよいので、githubにpushしてもらいたいです。
プッシュしました。#38の方です。
sampleページを作成して、こちら のコードを丸っとコピーしてみましたが、スクショのようなエラーになってしまいます。
yarn add react-swipeable-viewsすると動作しました。commitもしています。
使用ライブラリ（試してみる）
https://github.com/react-component/swipeout
swiperは、TodoRecord.tsxに実装していくと思うのですが、これをPCとMobileに分割するのはどう思われますか？
現状コードがとても長いので、分割して共通部分を外部ファイルから読み込むと言うイメージです。できるか自信はありませんが...
現時点ではどちらもできそうもないのですが、swiperを実装するのがTodoRecordの方なのか、ListTodoの方なのか混乱中です。
確かにどちらもできそうですね。
別のリポジトリで一度試してみるのはいかがでしょうか。
dnd-kitの時に私が試したのはこちらのソースです。
pages配下のTodoSampleに、今回のQinTodoに作るために最低限必要なコードを持ってきて、ごちゃごちゃと試してました。
公式サンプルからは、MultipleContainersとVerticalに、QinTodoとして使いそうな部分だけコピーして試しています。
※公式サンプルには、QinTodoには不要なソースがたくさん含まれていたため、不要なコードを削除したいが、公式サンプルを眺めてもどれが不要か判断できなかったので、こんなやり方にしています。