Blockchain code Metaverse VR

Crypto×VR×SmartContract(531)

スポンサーリンク

//tips

//smart contract

アイコンの隙間に余白を作り、アイコンをクリックした場合のリンク先を付与できるようにする。

Makestyleの中に新たに下記を作成し、アイコン群に適用させた。

imagemargin:{
marginRight:10,
},

<img src={twitterimage} alt="" width="30" height="27"className={classes.imagemargin} />

無事各アイコンの右側に余白ができた。

アイコン群の下に各アイコンの登録フォームを追加する。

onClick={()=>console.log('image clicked’)でログは確認できているのでこちらに格納するイベント関数を作成。

const handleClickImagetw = (e) => {
document.location.href = 'https://twitter.com/naki_road'
}

こちらにてクリックしたらtwitterのtopに飛ばせるようにした。

データベースにtweetlinkを格納。データベースの引き渡し情報にも追加。

pile.tweetlink = data.tweetlink ?data.tweetlink:null

const handleClickImagetw = (e) => {
if(twitterlink){
document.location.href = twitterlink
console.log('twitterlink');
console.log(twitterlink);
}
}

if(Item.tweetlink !=null||Item.tweetlink !=undefined){
if(twitterlink==undefined||twitterlink==null||twitterlink==''){
setLinktw(Item.tweetlink)
}
こちらにて無事に反応させることができた。

今度はデータベースへのアップフォーマットの作成とeditページからのデータベース追加処理を設定する。

const [twitterlink,setLinktw]=useState('')
const [discordlink,setLinkds]=useState('')
const [youtubelink,setLinkyt]=useState('')
const [telelink,setLinktl]=useState('')
const [whatslink,setLinkwts]=useState('')

twitter 登録・更新
<TextField
onChange={(e)=>setLinktw(e.target.value)}
variant="outlined"
color="secondary"
defaultValue={twitterlink}
fullWidth
required
/>

このような形でテキストフィールドの文言を上書きできるようにした。

あとは登録内容をデータベースにアップロードするイベント関数を実行する。

個別にすると煩雑になるので、SNSの登録はひとまとめにした。

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

console.log('handleOnSNSlinks')

var currentad=null;
var currentaddocid=null;

ninja.forEach((element) =>
{
if(element.tweetlink!=null||element.tweetlink!=undefined){
currentad=element.tweetlink
currentaddocid=element.docid
}
})

//if(currentad===null){
if(!element.tweetlink){

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
tweetlink:twitterlink,
discordlink:discordlink,
youtubelink:youtubelink,
telelink:telelink,
tweetlink:whatslink,

})
}else{

const updateRef = doc(firebaseApp,'mydata',currentaddocid);

updateDoc(updateRef, {
tweetlink:twitterlink,
discordlink:discordlink,
youtubelink:youtubelink,
telelink:telelink,
whatslink:whatslink,
});
}
router.reload()
}

一旦データベースに登録しておいたtweetlinkを削除。

Tweetidが存在しないのか、記入されていないだけなのかの判断を行う必要がある。

Docidが存在するかしないかで判断すれば良さそう。

なぜか新規作成ではなく、note1のdocidを参照し、その中に追加してしまっている。再度イベント関数の中身を調整。

無事にtweetlinkを含む一覧の形で登録することができた。

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

console.log('handleOnSNSlinks')

var currentad=null
var currentaddocid=null

ninja.forEach((element) =>
{
if(element.tweetlink!=null||element.tweetlink!=undefined){
console.log('handleOnSNSlinks11')
currentad=element.tweetlink
currentaddocid=element.docid
}else{
console.log('handleOnSNSlinks22')
currentaddocid=null
}
})
console.log('handleOnSNSlinks2')
console.log(currentad)
console.log('handleOnSNSlinks3')
console.log(currentaddocid)

//if(currentad===null){
if(currentaddocid===undefined||currentaddocid===null){
console.log('handleOnSNSlinks4')

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
tweetlink:twitterlink,
discordlink:discordlink,
youtubelink:youtubelink,
telelink:telelink,
whatslink:whatslink,

})
}else{

さらに登録できたものへの上書きを試す。上書きではなく追加で登録してしまった。
if(element.tweetlink!=null||element.tweetlink!=undefined){がうまく機能していない。ログで調べていくとdoc.idの情報がきちんと渡せていないよう。elseの方で余計な上書きをしていたからのよう。

やっとうまくいった。あとは正しいurlなどを追加していく。Teleglamとwhatsappは外すか要検討。一旦地道な反映作業を行う。

follow,followert機能の追加を行う。これはTopページへの反映にも影響を与えるようにする。全体表示、[id].js整備も順次行う。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.