//tips
//smart contract
ドラッグ&ドロップでカードの移動を可能にする方法を見つけたが、これだとdatabaseへの反映は別処理になりそう。どちらかというとeditに使うというより[id]で使う方が適当に思えたので別の方法を考えか。
https://www.geeksforgeeks.org/how-to-add-draggable-components-in-next-js/
https://blog.gaji.jp/2021/11/09/8481/
一旦挙動を見てみる。
npm i react-draggable
import Draggable from 'react-draggable';
<div>
<h3>GeeksforGeeks - Draggable Components</h3>
<Draggable>
<div>We can move this text</div>
</Draggable>
</div>
を試すとどこにでもドラックして移動させることができた。
試しにcardの方に適用してみるとドラッグした位置に移動して整列させることはできなくなってしまった。
{ninja.map((item,index) => (
<Draggable>
<Grid item xs={12} md={6} lg={4} key={index}>
<NoteCard note={item} handleDelete={handleDelete} />
</Grid>
</Draggable>
))}
react-beautiful-dndの方も試してみる。
https://www.npmjs.com/package/react-beautiful-dnd-next
https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/#step-1-installing-react-beautiful-dnd
npm install react-beautiful-dnd --save
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
なぜかDraggable単体では読み込みエラーが出る。エラー要因を探しているとnext用の同様なプラグインを発見。こちらも試す。
npm install react-beautiful-dnd-next
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
Could not resolve dependency:
npm ERR! peer react@"^16.8.5" from react-beautiful-dnd-next@11.0.5
react-beautiful-dndのまま進めていくか。おそらく要因としては他のタグDragDropContextなどで囲んでおらず、providerも設定していないのが問題となりそう。
下記のように作成していったらエラー。
<DragDropContext>
<Droppable droppableId='characters'>
{(provided)=>(
<ul className='characters' {...provided.droppableProps} ref={provided.innerRef}>
{ninja.map((item,index) => (
<Draggable key={index} draggableId={index} index={index}>
{(provided)=>(
<li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<Grid item xs={12} md={6} lg={4} >
<NoteCard note={item} handleDelete={handleDelete} />
</Grid>
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
A setup problem was encountered.
むむむ、一旦シンプルなテストページで実験してみるのが良さそう。
シンプルな形にしても、Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "0" Client: “1”のエラーが出たので検索。
Just call resetServerContext() server side: As an example, in a next.js page i simple call it in getServerSideProps
next.jsの場合はresetServerContext() を呼ぶ必要があるとのこと。
https://devdreamz.com/question/184573-how-to-fix-data-rbd-draggable-context-id-did-not-match-server-1-client-0
https://stackoverflow.com/questions/64242578/how-to-fix-data-rbd-draggable-context-id-did-not-match-server-1-client-0
It occurs because DOM and window is not loaded before that our component gets loaded.
draggable-context-idがサーバーサイドとクライアントサイドで食い違うためこの問題が起きている。
以前makestyleでどう良いの問題が起きたときには{ name: "MuiExample_Component" }に名称を統一して対応していた。
下記を見ていると、どうやらclassの塊のよう、これをどう対処するか。resetServerContext()で一気に消せればよかったのだが。機能せず。
https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md
resetServerContext() が使えない各国の人も死屍累々のよう。document.jsをいじるとなんとかできるようだが既に複雑すぎるdocument.jsを持っているのでこちらは導入を見送る。
他の代替策がないか。
まずはカードの表示の順番を確認。
現在はデータベースに格納された順番で引き出せているよう。
Getstatic propsでprops: { ninja: posts }に格納された順番となる。
この順番を入れ替えれば良いので、左右の矢印を追加し、クリックしたら次のカードのdocidと入れ替えられるようにするか。いや、カードの順番をつけてしまった方が早いし、整理しやすそう。
pile.cardorder = data.cardorder ?data.cardorder:null
追加の時にはcardorderの最後尾を参照し、+1すれば良い。
まずはcardorderがあるものだけをカードどして表示。
{ninja.map((item,index) => (
<>
{item.cardorder &&
<Grid item xs={12} md={6} lg={4} key={index}>
<NoteCard note={item} handleDelete={handleDelete} />
</Grid>
}
</>
))}
下記を導入。
import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
const useStyles=makeStyles({
rightarrow:{
float: 'right'
},
このボタンにイベント関数を紐づける。
