//tips
//smart contract
これでURL直打ちの対策ができたので早速下記のURLをid2のものに書き換え。
http://localhost:3000/ID/1/edit
Id1のページに戻る予定だったが、画像取得の部分でエラーが出ている。
TypeError: Cannot read property 'userid' of undefined
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
何が起こっているのかログで確認していく。
Userid2に該当するドキュメントは現時点で一つしかなく、ninja[0].useridも取得できるはず。
console.log('userid')
console.log(ninja[0].userid)
Userid1の方でログ確認したところきちんと取得できている。
再度クリアしてnpm run devを行い、http://localhost:3000/ID/1/editの1の部分を2に変えて実行すると一瞬http://localhost:3000/ID/2/editのページが表示されてすぐに、http://localhost:3000/ID/2/に戻るようになった。
これでurl直打ちを制限する意図した挙動ができた。
Depositのdebank登録フォームの追加やtwitterの登録フォームの追加を行うと同時にdelteアクション時にポップアップで再度delete確認をすることで認証遷移タイミングでの誤タップによる他ユーザーのデータ消失の可能性を下げる。同じくカードのドラッグで順番を入れ替えることができる機能も追加していきたいところ。
まずはdepositのid設定フォームと非表示ボタンを追加する。
Debankidが現在文字列でfirebaseの中にフィールドの一つとして登録されている。また全てのドキュメントに含まれているわけではなく一つのドキュメントに設定されている。
まずはdebankid登録部分を作成。
<Deposits depo={depo}/>
{/* debankid登録ページへ */}
<Box textAlign="center">
<div>
<br/>
<AddCircleOutlineOutlinedIcon
// className={classes.docenter}
sx={{ fontSize: 35 }}
onClick={()=>{setFlagd(!openflagd)}}
/>
</div>
{openflagd && (
<div>
Debank id 登録・更新
<form noValidate autoComplete="off" onSubmit={handleOnDebank}>
<TextField
onChange={(e)=>setDebank(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>
</form>
</div>
)}
</Box>
イベントを関数ではクリックしてみて引き継がれたdebankidの内容が表示されるか確認。
pile.debankid = data.debankid ?data.debankid:null
時々useridが読み込めませんなどのようなエラーが出るので、どこかでasyncを挟む必要があるのかもしれない。そこは考えておく。
きちんと下記のような形にしてidまたはnullを取得することができたので、foreachでnullでない場合を取得して変数に格納すれば良さそう。
console.log(ninja[0].debankid)
console.log(ninja[1].debankid)
一旦新規登録分を作成。
async function handleOnDebank(e) {
e.preventDefault();
console.log('handleOnDebank')
console.log(ninja[0].debankid)
console.log(ninja[1].debankid)
const currentdid=null;
const debankid=ninja.forEach((element) =>
{
if(element.debankid!=null){
currentdid=element.debankid
}
}).then(()=>{
if(currentdid=null){
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
debankid:mydebank
})
}else{
}
}
).then(()=>{router.reload()})
Elseの中にはupdateの処理を記入していく。
}else{
const updateRef = doc(firebaseApp,'mydata',docid);
updateDoc(updateRef, {
debankid: mydebank
});
にしたが、変更するdocidの方を取得する必要がある
下記のようにしてcurrentdocidを定義して、取得させる。
const currentdid=null;
const currentdocid=null;
ninja.forEach((element) =>
{
if(element.debankid!=null){
currentdid=element.debankid
currentdocid=element.docid
}
これでいけるか。const handleDelete=async(id)=>{の方もconst docRef=doc(firebaseApp,"mydata",id.toString())になっており、自動生成idの取得はできないかと思うのでこちらも工夫する必要がある。
Cannot reassign to a variable declared with `const`
としてif(currentdid=null){がエラーとなったのでvarに変更。知らぬ間に変数扱いしていた。なぜ変数のように使えていたのかは思い出す必要あり。
下記のように変更を加えた。
async function handleOnDebank(e) {
e.preventDefault();
console.log('handleOnDebank')
console.log(ninja[0].debankid)
console.log(ninja[1].debankid)
var currentdid=null;
var currentdocid=null;
ninja.forEach((element) =>
{
if(element.debankid!=null){
currentdid=element.debankid
currentdocid=element.docid
}
}).then(()=>{
if(currentdid=null){
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
debankid:mydebank
})
}else{
const updateRef = doc(firebaseApp,'mydata',currentdocid);
console.log('currentdocid')
console.log(currentdocid)
updateDoc(updateRef, {
debankid: mydebank
});
}
}
).then(()=>{router.reload()})
まずは現在入れられているdebankidが空になるか確認。thenを咎められたのでここは通常の形に直す。importにupdateDocも追加。
空のままsubmitするとエラーが出たのでabcを入力。きちんとデータベースに登録された。
更新登録は問題なし。
次はdebankidの新規登録確認。今あるdebankidを削除。
Nullのpropertyは扱えませんとエラー。currentdid===nullとすることで無事に取り扱いがされるようになった。
if(currentdid===null){
console.log('aaa')
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
debankid:mydebank
})
このdeposit欄の表示・非表示を操れるボタンも追加する。
