Blockchain code Metaverse VR

Crypto×VR×SmartContract(525)

スポンサーリンク

//tips

//smart contract

カードの前後入れ替え処理の継続。

<IconButton className={classes.rightarrow} onClick={()=>console.log('clicked')}>のイベント関数の実装を行う。

実装してからconst NoteCard = ({note,handleDelete}) => {に引き継ぐことになる。

関数の内容としては、クリックされた段階で、doc.idとcardorderを取得し、当cardorderと次のcardoder数字をそれぞれ+1,-1する。

その際にはuseridごとにcardorderが異なるが、ここはデータの取得タイミングでconst q = await query(colRef,where("userid","==",id))のようにuseridのもので縛っているので問題ない。

<IconButton className={classes.rightarrow} onClick={handleOrderchangeright(note.cardorder)}>
<ArrowForwardIosOutlinedIcon />
</IconButton>

updateRefを行う際にdoc.idで取得した方が良さそうなのでそちらを変更。

試しで下記を実行させようとしたらhandleOrderchangerightでのエラー。

const handleOrderchangeright=async(id)=>{

//該当cardorderの取得したものがid,id+1
const docRef = doc(firebaseApp,'mydata',id.toString());
const docSnap = await getDoc(docRef);
console.log(docSnap.data());

actionの中に入れて実行使用としたがactionはCardHeaderの中で使える要素だった。

探してみると<CardActions>を見つけたのでこちらを使用してみる。

https://mui.com/api/card-actions/

うまくいかない。

<ArrowForwardIosOutlinedIcon className={classes.rightarrow} onClick={()=>handleOrderchangeright(note.docid)} />

こちらもエラー。

<CardActions>
<Button  onClick={()=>handleOrderchangeright(note.docid)}><ArrowForwardIosOutlinedIcon /></Button>
<Button size="small">Learn More</Button>
</CardActions>

こちらの形でうまくいくことを確認できた。

この流れでイベントを下記のように実装。

const handleOrderchangeright=async(id)=>{
//ninjaそのものがuserid制限がかかったもの
//該当cardorderの取得したものがid,id+1
const docRef = doc(firebaseApp,'mydata',id.toString());
const docSnap = await getDoc(docRef);

console.log(docSnap.data());
console.log(docSnap.data().cardorder);

const cordbase=docSnap.data().cardorder+1
console.log(cordbase);

var target2=null

//clickされた次のcordnumberのdocidの取得
ninja.forEach(Item => {
if(Item.cardorder ===cordbase){
target2=Item.docid
console.log(target2);
}

});

const updateRef = doc(firebaseApp,'mydata',id.toString());

updateDoc(updateRef, {
cardorder: id+1
});

const updateRef2 = doc(firebaseApp,'mydata', target2.toString());

updateDoc(updateRef2, {
cardorder: id-1
});

}

次のcardorderを持つdocidを入れ替える処理を行なっている。

cardorderの更新処理はできたが、文字列の11と数字の0になってしまっているので調整。

const updateRef = doc(firebaseApp,'mydata',id.toString());

updateDoc(updateRef, {
cardorder: docSnap.data().cardorder+1
});

const updateRef2 = doc(firebaseApp,'mydata', target2.toString());

updateDoc(updateRef2, {
cardorder: cordbase-1
});

こちらで無事に対応できた。

この変化を下記に適用し、cardorderの番号順に表示されるようにする。

{ninja.map((item,index) => (
<>
{item.cardorder &&
<Grid item xs={12} md={6} lg={4} key={index}>
<NoteCard note={item} handleDelete={handleDelete} handleOrderchangeright={handleOrderchangeright}/>
</Grid>
}
</>

keyをcardorderに変えれば良いのか。

下記のソート術を参考に加筆。先人達の偉業に感謝。ありがたや。

javascriptでオブジェクトをソートするには?要素をキーに並べ替え

let ninjav = ninja.sort(function(a, b) {
return (a.cardorder < b.cardorder) ? -1 : 1; //オブジェクトの昇順ソート
//return (a.cardorder > b.cardorder) ? -1 : 1; //オブジェクトの降順ソート
});
console.log(ninjav);

{ninjav.map((item,index) => (とすることで降順処理されたものを引き渡した。

きちんと反映された。

このカードの入れ替えはリアルタイムで反映させたい。

ここだけリアルタイム反映処理をできないか模索する。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.