//tips
//smart contract
Looking for your friendsの下に直近の登録者のアイコン表示を加え、さらにその下には自身のfriendsのアイコンと名前も表示させるとしたら自信のデータベースに接続して自分のuseridドキュメントに格納されているfollowers部分を配列から取り出していくことになる。
ninja配列から取得できるかと考えていたら、indexであることを思い出し、データベースからゴリゴリ取得していくのは保留。
サイドバナーに設置するものを考えていたところhomeボタン、mypageボタンが良さそうなのでまずはそちらを導入する。
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
import MyLocationOutlinedIcon from '@mui/icons-material/MyLocationOutlined';
Editdrawer.jsの方に導入し、
<ListItem button key={text} onClick={()=>handlePagechange(text)}>
各ボタンをクリックしたらイベントが発生するように設定。
Routerを追加することでhomeにはどのページからでも簡単に飛ばせるようになった。
const handlePagechange =(text)=> {
console.log(text);
if(text==='Home'){
router.push("/")
}
}
問題なのは自分のページに飛ぶ方で、これは自分のuseridをページが保有している必要があるが、以前componentからデータベース接続やfetchを使用して複雑怪奇な痛い目にあっている。
なので、authの登録・ログイン段階でmailの方だけでなくuseridもlocalに保存させればだいぶ楽になるのではないかと考えた。
localStorage.setItem('authhistory',email)の localStorage.setItem('authuserid’,userid)をどこかに組みこむ。
if(localStorage.getItem('authhistory')==ninja[0].mail){
setidmailcheck(true)
[id]ページに、ちょうどいいwindowチェック処理があったので利用。
localStorage.setItem('authuserid',ninja[0].userid)
indexページのcreateUserWithEmailAndPassword(auth,email,password)にも追加。
console.log("Document written with ID: ", docRef.id);
localStorage.setItem('authuserid',docRef.id)
また、useeffectを追加し、[id]に遷移したら必ず一度はauthとuseridの照合を行わせるようにする。
useEffect(() => {
if(localStorage.getItem('authhistory')==ninja[0].mail){ localStorage.setItem('authuserid',ninja[0].userid)}
}
}, [])
この後にeditdrawerを修正。
if(text==='MyPage'){
const myid=localStorage.getItem('authuserid')
console.log(myid)
}
きちんとローカルに格納されたuseridを取得できた。
if(text==='MyPage'){
const myid=localStorage.getItem('authuserid')
console.log(myid)
router.push("/ID/"+myid)
}
これでHomeとMyPageを自由自在に行き来できるようになった。
素晴らしい。
[id]とeditページにDebankリンクもつけられるようにするか。
Debankの部品を構成しているdeposit.jsを確認。
Onclick時に遷移というように設計。
<Paper onClick={handlePagechange}>
<h1>Recent Deposits</h1>
async function handlePagechange(e) {
e.preventDefault();
console.log('handlePagechange');
今回は外部リンクに飛ばすのでrouterは使用できない。SNSのリンク遷移と同様に下記で対処。
if(depo){
document.location.href = 'https://debank.com/profile/'+depo
}
Debank部分をクリックするとちゃんとdebankの該当ページに飛ぶようにできた。
次に、YouTubeapiの使用の際にサブネイルを取得してリンクをつけて飛ばす方法を模索してみる。今の方法では重すぎる気がする。
ItsmEロゴの発注やデプロイ方法も確認し始める。
ItsMeで検索してみるとベルギーでitsmeというデジタル身分証明書アプリが作られていることがわかった。おお、いい感じ。
https://kaigaisurvival.com/itsme-belgium-id-app/4229/
https://www.itsme-id.com/
ただ、内容としては違うので問題なさそう。
他にも友達とのSNSツールとしてapp storeに下記があった。こちらも用途が異なるため問題なさそう。
https://apps.apple.com/us/app/itsme/id1289087191
一応日本の商標も確認しておこうかと思ったらシステムメンテ中とのこと。
https://www.jpo.go.jp/support/startup/shohyo_search.html#step01
