//tips
//smart contract
Address部分に表示するwalletのアドレスを組み込み。
pile.address = data.address ?data.address:null
[id].jsにはおおよそ反映ができたのでedit.jsの方の反映に移る。
こちらでは反映に加えてfirebaseへのpostなどの操作も必要になる。
Deleteボタンの修正から。
const handleDelete=async(id)=>{
// データベース側の削除
await fetch('http://localhost:8000/notes/'+id,{
method:'DELETE'
})
// stateで保存しているデータの編集
//ここでクリックしたid以外のものを取得
const newNotes=notes.filter(note => note.id != id )
setNotes(newNotes)
}
ドキュメント名を特定するか、そもそものフィールドに何番目のドキュメントの格納しているかの目標を作るか考える。
自動生成されたIDを持つドキュメントリファレンスを作成して、後でそのリファレンスを使用する方法があるようなので、そちらを利用できるようにする。
一旦は手動でidを設定。
現在のNoteCardでは
{handleDelete
?
<CardHeader
action={
<IconButton onClick={()=>handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
のように設定しているのでidも引き継がせる必要がある。
pile.id = data.id ?data.id:null
n.indexOf is not a function at Function.fromStringが表示されたのでデータベースのidの数字を文字列化したところ反応しなかったのでid.toString()で
const docRef=doc(firebaseApp,"mydata",id.toString())
を試した。
エラーは生じずにクリックはできるがデータベースへの消去および非表示化ができていない。note.idがきちんと渡っているかを確認。
action={
// <IconButton onClick={()=>handleDelete(note.id)} }>
<IconButton onClick={()=>console.log('hi1'+note.id)}>
<DeleteOutlined />
</IconButton>
}
エラーを読んでいくとfirebaseへの接続で問題が出ているよう。NoteCardのアクションはfirebaseエラーのため中断されているよう。
Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/myapp-8e583.appspot.com/o/1%2Fimage.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://firebasestorage.googleapis.com/v0/b/myapp-8e583.appspot.com/o/1%2Fimage.jpg net::ERR_FAILED 503
探していくとCORSの問題の類似例が見つけられた。ありがたし。これが起こっているのはeditに入る際のauthをまだ設定していないので、フロントエンド側で自由にデータベースを書き換えられてしまう問題を指摘していると言えそう。
https://qiita.com/qrusadorz/items/40234ac0b5c5c2315cad
https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase
ここは先にauthのログインとデータベースアクセス権限設定などを先に処理したほうが問題になりにくそう。順番が間違っていた。
Firebase authの設定に移行。
今回はmailとpassの認証を設定する。
フロントエンドである[id]/editに下記を組み込み。
import {getAuth} from "firebase/auth"
なぜならこちらのページのみfirebaseのデータベースを操作するため。[id]は表示しているだけなので不要か。
Firebaseconfigを見返してみるとauthDomainが設定されているので、そちらを通して操作していくことになりそう。
export default function edit({ ninja }) {//{id}
const firestorage = getStorage();
const auth=getAuth()
まずはconst auth=getAuth()のインスタンス生成から。
ただ、認証用のmailとpassを記入する場所を作成する必要がある。新たなページを作成するか[id]に作るか。最終的にはポップアップで対応するが今のところは[id]の最下部に追加して対応することにしよう。
import {
getAuth,
createUserWithEmailAndPassword
} from "firebase/auth"
For auth用にformを追加。これはmedium cardなどの使い回し。イベント関数は後で設定する。
const [umail,setUmail]=useState('')
const [upass,setUpass]=useState('')
Uncaught (in promise) FirebaseError: Firebase: Error (auth/invalid-email).が発生。
これはemail ユーザープロパティに指定された値は無効で、文字列のメールアドレスを指定する必要があるとのこと。
abc@gmail.com
abc123
などとすると無事にuser created:…が生成された。確認できるcredential情報の中にaccesstokenやユニークidなども含まれている。
async function handleOnAuth(e) {
e.preventDefault();
console.log('aiu')
const email=umail
const password=upass
createUserWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user created:',cred.user)
setUmail('')
setUpass('')
})
}
for Auth
<form noValidate autoComplete="off" onSubmit={handleOnAuth}>
Mail
<TextField
onChange={(e)=>setUmail(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
Pass
<TextField
onChange={(e)=>setUpass(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
<Box textAlign="center">
<Button
type="submit"
varient="contained"
>
submit
</Button>
</Box>
</form>
これで登録は可能になった。
登録が完了するとそのままログイン状態になるので、ログアウトの設定と登録後のログイン設定を付加していく。
