Blockchain code Metaverse VR

Crypto×VR×SmartContract(537)

スポンサーリンク

//tips

以前はBizmates英会話で毎日15分程度話すコースを利用していたが、時間が厳しくなり、融通が効きやすいpreplyを利用するようになった。三ヶ月使ってみて飽きないのでおすすめ。

https://preply.com/en/?pref=NTA0MTQ2MQ==

//smart contract

Setting for authはtopページに持っていき、loginページは新たに作成してそちらに飛ばせる仕組みにしていく。

個別ページの大元として作成していたIndex.jsをTopページ仕様に変えていく。

Welocome to Ninjaなどのタイトル表示をさせ、その下にログインボタンと新規設定ボタンを作成する。

そのログインボタン・新規ボタンを組み込む際にauthのイベント関数なども同期させる必要があるのでそちらも合わせる。インポート部分から合わせていく。

import {
getAuth,
createUserWithEmailAndPassword,
signOut,
signInWithEmailAndPassword,
onAuthStateChanged,addDoc
} from "firebase/auth"

const auth=getAuth()周りでエラーが出た。

デフォルト設定が足りないとのことで下記に接続させると問題なく稼働した。

import firebaseApp from "../../components/firebase"
import firebase from "../../components/firebase2"

ひとまずログイン・ログアウト・サインアップのボタンを作り、サインアップ以外のボタンは情報をと登録するためフォームを開くようにした。サインあうとは従来のhandleOnAuthOut関数を実行することで処理。

<Typography variant="h4" component="h1" gutterBottom>
Welocome to Ninja site
<br />
<br />
<Button variant="outlined" sx={{ fontSize: 25 }}  className={classes.imagemargin} onClick={()=>setLogin(!flaglogin)}>Login</Button>
<Button variant="outlined" sx={{ fontSize: 25 }}  className={classes.imagemargin} onClick={()=>setSetting(!flagset)}>Setup</Button>
<Button variant="outlined" sx={{ fontSize: 25 }}  className={classes.imagemargin} onClick={handleOnAuthOut}>Logout</Button>
</Typography>

Serch機能を拡充する。

現在serchのイベント関数では

const handleOnLINK = (e) => {
e.preventDefault()

router.push('/ID/'+ myidlink)
}

とされており、相手のuseridを知っていないとそのページに遷移できなくなっている。

これをusernameを記入することで遷移可能にさせるため、データベースにアクセスし、該当者のページを表示させる形に変えていく。

async function handleOnArrayfollow(e) {を参考にして作成していく。

テキストフィールドに記入された情報はconst [myidlink, setID] = useState();に格納されるのでmyidlinkをデータベースにて探していくことになる。

async function handleOnLINK (e){

const colRef= await collection(firebaseApp, "mydata")
const q = await query(colRef,where("username","==",idlink))
var notexist=true

//authをもとにクリック主のデータベース情報の取得
await getDocs(q)
.then((snapshot)=>{

snapshot.docs.forEach(doc => {
const data = doc.data()

if(data.userid)
{
notexist=false
router.push('/ID/'+ data.userid)
}
});

}).then(()=>{
if(notexist){
setError(true)
}
})
}

handleOnLINKを押すとなぜかreloadに移ってしまうと思ったらe.preventDefault();を消してしまっていた。ボケていた。

async function handleOnLINK (e){
e.preventDefault();

const colRef= await collection(firebaseApp, "mydata")
const q = await query(colRef,where("username","==",idlink))
var notexist=true
console.log('111')
console.log(idlink)
console.log(q)
var goid=''

//authをもとにクリック主のデータベース情報の取得
await getDocs(q)
.then((snapshot)=>{
console.log('222')

snapshot.docs.forEach(doc => {
const data = doc.data()

if(data.userid)
{

console.log(data.userid)
notexist=false
goid=data.userid

}

});

}).then(()=>{
if(notexist){
setError(true)
}else{
router.push('/ID/'+ goid)
}
})
}

こちらできちんと遷移ができた。ただ、若干遷移時間が長い。

そんなに[id]への遷移が通常でも長くかかるのか念のため確認。

<Button onClick={()=>{router.push('/ID/1')}}>遷移check</Button>

でチェックしたがめちゃ時間がかかった。

ローディングのサインを出した方が良さそう。

各々の組み込みapiが重すぎるのか…YouTubeの方リンクとサブネイルでの対応に変えるか考える。

別途エラーのチェック。

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

https://zenn.dev/maktub_bros/articles/3366d053275d60

https://qiita.com/macotok/items/87a260988376bcfa2ffd

人気の記事

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.