//tips
//smart contract
Edit.jsの下部のcardコンポーネントの下にも+ボタンを挿入できた。
これは単にBox箇所を挿入するだけで問題なく反映された。
<Box textAlign="center">
<div>
<br/>
<AddCircleOutlineOutlinedIcon
// className={classes.docenter}
sx={{ fontSize: 35 }}
onClick={handleClickcreate}
/>
</div>
</Box>
Debankの数字をdrawerbar内に反映できないか試していく。listの内容が現在固定されているので、その一部を変数で入れ替えられるようにする。
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
Layout.jsを編集していく。
新たに下記を作成。
const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])
{myarray.map((text, index) => (としてシンプルに表示。
myarrayの中身をdebankの受け取りに合わせて変更しようかと考えたが、layoutの中が煩雑になりそうなのでこちらも別のコンポーネントので対応する。
const Editdrawer = () => {
const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])
return (
<div>
<List>
{/* {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( */}
{myarray.map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
}
export default Editdrawer;
これをindexでボタンが押されたタイミングで数値を追加されるようにする。現状はボタンが押されると handleOnDebankSubmit(e)が発動して、const [mydebank, setDebank] = useState();中に保存され、mydebankの変数として表示されている。
async function handleOnDebankSubmit(e) {
e.preventDefault();
const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});
var results = await res.json();
console.log(results.total_usd_value);
setDebank(results.total_usd_value);
}
Drawerにもdebankのボタンを追加して変数の値を表示させる。
import React from "react";
import { Button, Container, Typography } from "@mui/material"
import HailIcon from '@mui/icons-material/Hail'
import { makeStyles } from "@mui/styles"
import { useState } from "react"
import { Drawer } from "@mui/material"
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
import List from '@mui/material/List';
import { typography } from "@mui/system";
const Editdrawer = () => {
const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])
const [mydebank, setDebank] = useState();
async function handleOnDebankSubmit(e) {
e.preventDefault();
const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});
var results = await res.json();
console.log(results.total_usd_value);
setDebank(results.total_usd_value);
}
return (
<div>
<List>
{/* {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( */}
{myarray.map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<form onSubmit={handleOnDebankSubmit}>
<h2>Debank</h2>
<button>Debank get</button>
<h6>{mydebank}</h6>
</form>
</div>
);
}
export default Editdrawer;
この表示させた値をarrayの中に組み込む。
Mydebankのarray追加がうまくいっていなかったので、別途arrayを作って挙動確認。
async function handleOnDebankSubmit(e) {
e.preventDefault();
const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});
var results = await res.json();
//console.log(results.total_usd_value);
setDebank(results.total_usd_value);
myarray.push(mydebank);
console.log(mydebank);
console.log('hi,there');
}
const handleOnArraychange = (e) => {
e.preventDefault()
console.log(myarray);
var newarray=myarray.pop();
//setArray(newarray);
console.log(newarray);
console.log('hihi');
console.log(myarray);
setArray(myarray);
}
きちんmyarrayを更新することができた。ただ、ここではリアルタイム表示の変換はできないし、するつもりもないので、挙動確認できたことで問題ない。
console.log(mydebank);がundifinedになるのはJSON.parseしてないからかと思ったのだが違ったよう。
色々試してやっと配列に入れられたのだが、setDebank(results.total_usd_value);とするとセットできないよう。別の変数に移して読み込ませることできちんと認識された。
console.log(results.total_usd_value);
const myvalue= results.total_usd_value
setDebank(results.total_usd_value);
myarray.push(mydebank);
myarray.push('みかん');
myarray.push(1.1233333333333333333333333333333333333333333333333333333333333);
const foo="abc"
myarray.push(foo);
myarray.push(myvalue);
console.log(myarray);
console.log('hi,there');
0: "Inbox"
1: "Starred"
2: "Send email"
3: "Drafts"
4: undefined
5: "みかん"
6: 1.1233333333333333
7: "abc"
8: 2046.520064564697
参照値などが関係しているところかと思ったが、setStateで値が更新されるのは関数が呼び出された後だからか。
const myvalue= results.total_usd_value
setDebank(myvalue);
myarray.push(myvalue);
console.log(myarray);
console.log(mydebank);
このように変更したがconsole.log(mydebank);はやはりundifined。この後に値が更新されるのか解せぬ。return内の<h6>{mydebank}</h6>にはきちんと反映されている。
Arrayへの追加は確認できたので、今度はボタンではなく、useeffectでページ読み込み時に追加させる。
useEffect(() => {
DebankSubmit()
},[])
async function DebankSubmit() {ではタイミング遅く反映に間に合わないので、ここはgetstaticpropsを使う必要がありそう。
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
しかし、コンポーネント単位では使えないのか。なぜかページに反映されない。
https://kokeshing.com/article/use-getstaticprops-component/
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
思い出した。getStaticPropsはページからのみしかエクスポートされなかった。
そうか、drawerにprerenderingを使ってfetchしたものを入れるのはあまり良くなさそう。
メインページの方にdepositなどとして表示させる形に変更する。
Deposits.jsページを作成。edit.jsページに取り込み。
import Deposits from './Deposits';
更新日時を表すのにnpm install date-fnsが良いそうなので利用。
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")
このように対応。
そこから先のようにfetchしたものをprerenderingする形に変更。
import * as React from 'react';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import { parseISO, format } from 'date-fns'
import { useState,useEffect } from "react"
export default function Deposits({myvalue}) {
const [mydebank, setDebank] = useState(myvalue);
//setDebank(myvalue);
console.log('1');
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>
);
}
export async function getStaticProps() {
//export async function getServerSideProps() {
console.log('2');
const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});
var results = await res.json();
const myvalue= results.total_usd_value
console.log('hi,there');
console.log(myvalue);
return {
props: {
myvalue,
},
}
}
Editページをみるとシンプルに下記で対応できている。こちらで試す。
useEffect(() => {
fetch('http://localhost:8000/notes')
.then(res => res.json())
.then(data => setNotes(data))
}, [])
他にも下記が保留中。
Mediumで取得した情報をそのままcardデータベースに反映できないか。
Twitter追加ボタンの作成。
