//tips
粉末ミルクティの飲み過ぎで健康診断で危険値が出たので、改善方法模索。
暖かく手軽に糖分摂取でき、がぶ飲みできるものを探す。
粉末ミルクティ×→粉末ミルクティ別種×→粉末抹茶△→紅茶パック+牛乳+オリゴ糖×
→梅干し砂糖+お湯△→ぬるいコーラ×→お湯+オレンジジュース△→お湯+redbull(実験中)
予定→お湯+カルピス
予定→お湯+レモネード?タフマン?
//smart contract
Mdeium部分をコンポーネントとして切り出してみる。
Formの中身を <Medium mymedium={mymedium}/>として、Mediumコンポーネントにmap処理を移してみる。
<form onSubmit={handleOnMediumSubmit}>
{/* <h2>Medium</h2>
<button>Medium feed</button>
{mymedium && (
<ul>
{ mymedium.map((item,index) => {
return (
<li key={index}>
<p>{ item.author }</p>
<p>{ item.title } </p>
</li>
);
})}
</ul>
)} */}
<Medium mymedium={mymedium}/>
</form>
下記で無事に機能した。
export default function Medium({mymedium}) {
return (
<div>
<h2>Medium</h2>
<button>Medium feed</button>
{mymedium && (
<ul>
{ mymedium.map((item,index) => {
return (
<li key={index}>
<p>{ item.author }</p>
<p>{ item.title } </p>
</li>
);
})}
</ul>
)}
</div>
)
}
Debankも同様にコンポーネントに分離。
export default function Debank({mydebank}) {
return (
<div>
<h2>Debank</h2>
<button>Debank get</button>
<h6>{mydebank}</h6>
</div>
)
}
複数のtwitterを表示させる場合には
<TwitterTweetEmbed
// tweetId={item.id_str}
tweetId={'1501574706423808004'}
/>
Mapを使用する別途コンポーネントに移すことも検討する。
またmediumをul,liを使わない形にdivで変形。
<div>
{ mymedium.map((item,index) => {
return (
<div key={index}>
<p>item.author: { item.author }</p>
<p>item.title :{ item.title } </p>
</div>
);
})}
</div>
編集用のページ移行するアイコンを追加。
import Icon from '@mui/material/Icon';
<Icon>add_circle</Icon>
こちらで戸惑ったが、下記のURLを参考にトライ。
https://mui.com/components/material-icons/#main-content
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
<AddCircleOutlineOutlinedIcon />
なかなか位置調整に手間取ったがmakestyleで最終的に調整した。
<AddCircleOutlineOutlinedIcon className={classes.doright} sx={{ fontSize: 35 }}/>
doright:{
align:'right',
marginBottom:-6,
},
このボタンをクリックすることで遷移を発生させる。
<Typography variant="h4" component="h1" gutterBottom>
Next.js exampleeeeeeeeeeeeeeeeeeeeeeee
{/*   */}
<AddCircleOutlineOutlinedIcon
className={classes.doright}
sx={{ fontSize: 35 }}
onClick={()=>{console.log('click!')}}
/>
onClickを実装し、コンソールでイベントを確認できた。
今度はリダイレクトさせる。router pushを使用して機能させた。
https://nextjs.org/docs/api-reference/next/router
import { useRouter } from 'next/router'
const handleClick = (e) => {
e.preventDefault()
router.push('/Note')
}
問題なく稼働したので、編集ページを用意していく。
