//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整備も順次行う。
