//tips
//smart contract
まずはMediumカードの整理。
Mediumは下記のような内容に変更。リンクはつけたが文章などがないと空白が目立つ。
return (
<div>
<h1>Medium</h1>
{data.map((item,index) => (
<Card key={index} elevation={3}>
<CardHeader
title={item.title}
subheader={item.author}
/>
<CardContent>
<MuiLink href={item.link} target="_blank" variant="h6" rel="noopener noreferrer">Go to My Medium</MuiLink>
</CardContent>
</Card>
))}
</div>
文章も追加した。
if(data[0]){
details=data[0].content;
let parser = new DOMParser();
let doc = parser.parseFromString(details, 'text/html');
var p_element = doc.querySelectorAll("p");
var detailnew="";
p_element.forEach(function(userItem) {
if(userItem.textContent !=undefined){
detailnew += userItem.textContent+'.'
}
});
details=detailnew;
}
気づいた点は同一useridに複数のアドレスが格納されており、その一つが表示されているということ。
基本的には同じもののみ格納でき、それ以外は更新させるようにしたい。
Address: {address}
if(Item.address !=null||Item.address !=undefined){
if(address==undefined||address==null||address==''){
setaddress(Item.address)
}
}
編集マークを追加し、ボタンを押したらaddressを追加できるようにする。<br />での空行も追加。
<Grid item xs={12} md={8} lg={9}>
<div>
<Typography variant="h5" >
Address: {address}<EditOutlinedIcon />
</Typography>
<br />
[id].jsではAddressはデータベースにあれば表示、なければ非表示とし、editのみで編集できるものとする。
Address: {address}<EditOutlinedIcon onClick={()=>console.log('edit address')}/>
こちらの編集マークをクリックするとonclick効果が発動することを確認できたので、フラグを作り、クリックを押されたタイミングでフィールドに記入できるものに表示を切り替える。
const [addressflag,setAddress]=useState(false)
Address: {address}<EditOutlinedIcon onClick={()=>{setAddress(!addressflag)}}/>
onChange={(e)=>setNewaddress(e.target.value)}
const [newaddress,setNewaddress]=useState(false)
最新テキスト入力時にデータベースを更新できるようにする。
<form noValidate autoComplete="off" onSubmit={handleOnNewaddress}>
イベント関数handleOnNewaddressを新たに生成。
ここも既に存在していればupdate,存在しなければ追加での対応となる。
async function handleOnNewaddress(e) {
e.preventDefault();
console.log('handleOnNewaddress')
var currentad=null;
var currentaddocid=null;
ninja.forEach((element) =>
{
if(element.address!=null){
currentad=element.address
currentaddocid=element.docid
}
})
if(currentad===null){
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
address:newaddress
})
}else{
const updateRef = doc(firebaseApp,'mydata',currentaddocid);
updateDoc(updateRef, {
address: newaddress
});
}
router.reload()
}
これらはdebankの仕組みの焼き直しで対応可能。ばっちり機能した。
各SNSのアイコンを探していたらまとまっているものを見つけた。
https://osunbook6.com/official-logo-download/
こちらからtwitter,discord,youtube,teleglam,whatsappなどの公式アイコンを探して導入していく。
まずはtwitterから。
https://about.twitter.com/en/who-we-are/brand-toolkit
Youtubeは記入フォームがあったので記入して提出。
https://www.youtube.com/intl/ja/howyoutubeworks/resources/brand-resources/#logos-icons-colors
同じページからロゴも取得。
Discordは下記から取得。
https://discord.com/branding
Teleglamのロゴはここから取得。
https://telegram.org/tour/screenshots
whatsappはここから。
https://www.facebook.com/brand/resources/whatsapp/whatsapp-brand
あとはimageの大きさを合わせてペチペチ貼っていく。これらのリンク先登録場所は別途作る必要がありそう。
firebase storageにAdminフォルダを追加し、そちらに取得したロゴデータたちを格納していく。
現在のimage表示は<img src={image} alt="" width="250" height="250"/>として行っているので、大きさなどはこちらで調整するか。
現在NFTの表示は各々のユーザーのidを参照して行っているのでそちらをadminを参照させれば良い。
//image表示
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
)
getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))
そういえば自分のnft imageのアップロードの仕組みはまだ組み込めていなかったか。ここは後で追加。
const [twitterimage,setImagetw]=useState('')
const [discordimage,setImageds]=useState('')
const [youtubeimage,setImageyt]=useState('')
const [teleimage,setImagetl]=useState('')
const [whatsimage,setImagewts]=useState('')
表示できたのはいいがそれぞれのロゴのサイズに表示領域を合わせる必要がある。
隣同士のアイコンの間に隙間を設けたいのでmakestyleでそこを調整するか。もう少し。
参考：
https://maku.blog/p/fw7gpx7/
他の機能としてはfollow,followert機能の追加を最後にし、Topページの作成、全体表示、[id].jsを整えて、完成とするか。
chat、掲示板機能は他の接続snsで代替できるのでどうするか検討。
