//tips
//smart contract
useeffect内でfetch可能かを試す。
さらにdebankを少数点二桁までの表示に加工。
toFixedを使いsetDebank((results.total_usd_value).toFixed(digit)))とした。
export default function Deposits() {
const [mydebank, setDebank] = useState();
//setDebank(myvalue);
console.log('1');
const digit = 2;
useEffect(() => {
fetch(
'https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers:
{
'accept': 'application/json'
}
})
.then(res => res.json())
.then(results => setDebank((results.total_usd_value).toFixed(digit)))
}, [])
const fns = require('date-fns')
//console.log(fns.format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSS"))
const today=fns.format(new Date(), "yyyy-MM-dd")
return (
<Paper>
<h1>Recent Deposits</h1>
<Typography component="p" variant="h4">
$ {mydebank}
</Typography>
<Typography color="text.secondary" sx={{ flex: 1 }}>
{today}
</Typography>
</Paper>
);
}
こちらで無事に反映できた。 useEffectがシンプルな上に便利すぎた。
Mediumで取得した情報をcardデータベースに反映する方法を考える。
Fetchしたmediumの情報をcardの各入力変数に適応させ、その内容をpostさせる必要がある。
Fetchするmediumの情報はhttps://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@Nakithemagicから取得し、
取得するjsonのitemsの中の"title”,"content”を取得し、"categories”:を固定でmediumなどにすればよさそう。
まずはこれからのjsonの内容を適切に抜き出させるかを確認。下記のようなMediumコンポーネントと別のものを作成する。
Fetchでgetした情報を変数に入れて、それをpostさせる流れを考えたが、うまくgetしたものを分割できない。今まではreturnの方で直接反映させていただので、mapを使えたがここではうまく機能しない。どうするか。
async function handleOnMediumCard(e) {
e.preventDefault();
const endpoint = "https://api.rss2json.com/v1/api.json";
const feed_url = "https://medium.com/feed/@Nakithemagic";
// rss feed を取得
var res = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${feed_url}`);
// text を json 化
var results = await res.json();
console.log(results.items);
setMcard(results.items);
var title=obj.title;//mcard.title
var details=obj.content;
console.log(obj);
console.log(title);
console.log(details);
console.log(category);
// if(title&&details){
// fetch('http://localhost:8000/notes', {
// method: 'POST',
// headers: {"Content-type": "application/json"},
// body: JSON.stringify({ title, details, category })
// }).then(() => router.push("/edit"))
// }
}
console.log(mcard.title)などを使う代わりに、そのまま console.log(results.items[0].title);で取得できるのでこちらの方法に切り替え。
console.log(results.items[0].content);
の問題点としてはhtml形式で渡されること。
<p>API test</p>
<p>next.js</p>
一旦このままで進めてみる。
async function handleOnMediumCard(e) {
e.preventDefault();
const endpoint = "https://api.rss2json.com/v1/api.json";
const feed_url = "https://medium.com/feed/@Nakithemagic";
// rss feed を取得
var res = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${feed_url}`);
// text を json 化
var results = await res.json();
console.log(results.items);
var title=results.items[0].title;//mcard.title
var details=results.items[0].content;
console.log(results.items[0].title);
console.log(results.items[0].content);
if(title&&details){
fetch('http://localhost:8000/notes', {
method: 'POST',
headers: {"Content-type": "application/json"},
body: JSON.stringify({ title, details, category })
}).then(() => router.push("/edit"))
}
Json serverをみると下記のように追加されていた。
{
"title": "Hi Medium",
"details": "\n<p>API test</p>\n<p>next.js</p>\n<img src=\"https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=3800c7813126\" width=\"1\" height=\"1\" alt=\"\">\n",
"category": "Medium",
"id": 6
}
ただ追加後に更新ボタンを押さないと追加カードが表示されない。これは//e.preventDefault();とすることで追加タイミングで更新が行われるようにした。
問題なのはhtlm表記部分がタグと一緒に表示されてしまう部分。こちらを編集する必要がある。
他にも下記が保留中。
Twitter追加ボタンの作成。
