//tips
//smart contract
Mediumのapiからlinkの要素を取れるのでタイトル表示とリンク先のmediumに飛ぶような仕組みにしていく。
Material-UI を採用したサイトの場合は、a の代わりに @material-ui/core/Link コンポーネントを使用することで、サイト内のデザインを統一することができるよう。
import { Link as MuiLink } from '@material-ui/core’を導入したのちに下記のようにlinkを取得させmuilinkに渡してそちらに飛ばせるようにした。
{data.map((item,index) => (
<>
<Paper key={index}>
{item.title}
{item.author}
{item.title}
<div>
<MuiLink href={item.link} target="_blank" rel="noopener noreferrer">More</MuiLink>
</div>
</Paper>
</>
これによりmediumのカード自体がシンプルにまとまりmediumへの遷移も可能にした。やはりdetailは無理に組み込まなくて良さそう。デザインは後で整える。
Mediumid削除部分のイベント関数を確認する。
async function handleOnMediumdelete(e) {
e.preventDefault();
console.log('Mediumdelete')
var currentmid=null;
var currentdocmid=null;
ninja.forEach((element) =>
{
if(element.mediumid!=null){
currentmid=element.mediumid
currentdocmid=element.docid
}
})
if(currentmid===null){
console.log('aaa')
}else{
console.log('bbb')
console.log(currentmid)
const docRefd=doc(firebaseApp,"mydata",currentdocmid)
deleteDoc(docRefd,{
mediumid: deleteField()
}).then(()=>{router.reload()})
}
}
Popアップのyesの場合にこのイベント関数を設定。
<Button
type="submit"
varient="contained"
onClick={handleOnMediumdelete}
>
YES
</Button>
フィールドだけでなくドキュメンごと消えた。
deletedocではなくupdatedocだった。不覚。
updateDoc(docRefd,{
mediumid: deleteField()
}).then(()=>{router.reload()})
再度トライ。よし機能している。
ただ自動生成で0が最初に来た場合はninja[0].addressの記述は機能しないので対策を考える。
ninja.forEach(Item => {の中でaddressを設定する仕組みを取り入れておく。
if(Item.address !=null||Item.address !=undefined){
if(address==undefined||address==null){
setaddress(Item.address)
console.log('address'+address)
}
}
アドレスは空の場合もあるようなので
if(Item.address !=null||Item.address !=undefined){
if(address==undefined||address==null||address==''){
setaddress(Item.address)
}
}
に修正した。
YouTube apiを取得して表示できるようにさせる。
