//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
