//tips
//smart contract
昨日editページにてコンテンツ登録のフォームを作成したが、コンテンツがあるものとないもので表示する分岐を作ることと、一部のコンテンツタイトルを編集できるようにしたい。
Twitterは文字の記載が入るので内容がわかるが、youtubeの方は画像表示のみなので、タイトルを可変にするか、各動画にコメントをつけられるようにするかどうかを考える必要がある。
シンプルにタイトル部分をこちらでつけてあげるとスッキリしてみやすかったので採用。タイトルはこちらで設定する形で良いかも知れない。
各youtubeの掲載の下に簡易コメントをつけられるようにする。
{ninja.map((item,index) => (
<div key={index} >
{item.youtubeId&&(
<div>
<iframe width="560" height="315"
src={`https://www.youtube.com/embed/${item.youtubeId}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
</iframe>
<Typography variant="h5" component="h1" gutterBottom>
my favorite music
</Typography>
</div>
)}
</div>
))}
普通にTypographyをつけるだけで対応できるが、もう少し吹出し風にしたいのと最終的には格納された変数をとって表示させたい。
カードで調整できることが気がつき色々調整。
ただ、右端に生じる微妙な隙間が気になり何とか真ん中に合わせられないかを模索。
<Box sx={{ justifyContent:'center'}}>
<Card variant="outlined" sx={{height: 70}} gutterBottom>
my favorite music
</Card>
</Box>
https://stackoverflow.com/questions/53183297/material-ui-card-will-not-center-react-js
昨日使用したボックス技はあえなく撃沈。gridは既に使用しているのでさらに使うのはためられるので却下。
<Card variant="outlined" className={classes.cardmargin} sx={{height: 70}} gutterBottom>
my favorite music
</Card>
cardmargin:{
display:'flex',
justifyContent:'center'
}
<Box className={classes.cardmargin}>
<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
my favorite music
</Card>
</Box>
数多の挑戦の末、やっと効果があるのを見つけた。%を指定して強引に調整。
cardmargin:{
'margin-left': '5%',
width: "95%",
}
<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
my favorite music
</Card>
さて、表示する欄はできたのでここに組み込む変数を作成する。
現在YouTubeの登録はedit.jsの方で下記のようにYouTubeの動画urlを登録できるようになっている。ここを調整していく。
youtube id 登録・更新
<form noValidate autoComplete="off" onSubmit={handleOnYoutubeCard}>
<TextField
onChange={(e)=>setYid(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
記入されたコメントを保管できるように設定。
onChange={(e)=>setYcomment(e.target.value)}
async function handleOnYoutubeCard(e) {の中身の追加修正へ。
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
youtubeId:final[0],
ycomment:ycomment
})
ここでycommentとしてデータベースに追加したのでpile.ycomment = data.ycomment ?data.ycomment:nullで追加。
こちらで登録しておくと抽出した際に下記で表示されるはず。
<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
{item.ycomment}
</Card>
一旦データベースに直接書き込んで様子を見る。
[id]ページの方では、きちんと登録されたycommentの値が反映された。
Editで実装するにあたりid4ではコンテンツを見れなかったのでid1に切り替え、そこでdelete処理の際に一緒にycommentの方も削除されるように設定する。
onClick={()=>handleDeleteYoutube(item.docid)}
const handleDeleteYoutube=async(id)=>{
console.log(id)
const docRef=doc(firebaseApp,"mydata",id.toString())
deleteDoc(docRef).then(()=>{router.reload()})
}
素晴らしい。一緒のドキュメントに生成するのでドキュメントごと消せば問題なさそう。善い哉。
文字がカードの枠に張り付いているのが気になる。カードから文字を若干離せないかも試すことにする。
