//tips
//smart contract
このdeposit欄の表示・非表示を操れるボタンも追加する。
表示は<Deposits depo={depo}/>で扱われているので、depositidがnullの場合は非表示という仕様にするか。
一番この表示を管理したいのは自分以外の人も見る[id]ページなのでそちらにも対応できるないようにする。
{closeflag && (
<div>
<Deposits depo={depo}/>
</div>)
}
このclsetagの初期設定はfalseにし、depositidが確認できたらtrueにする。
const [closeflag,setClose]=useState(false)
if(depo){setClose(true)}を設定したら無限ループになる警告が出たので
if(depo&&closeflag==false){setClose(true)}
こちらに変更。
これで登録debankidが存在する場合には表示されるようになった。[id]にもこちらを反映。見せたくない人はdebankidを登録しなければ表示されないようにした。
間違って登録してしまった人向けの削除ボタンも追加しておくか。
if(element.debankid!=null){
currentdid=element.debankid
currentdocid=element.docid
}
})
if(currentdid===null){
console.log('aaa')
}else{
console.log('bbb')
console.log(currentdid)
const docRefd=doc(firebaseApp,"mydata",currentdocid)
deleteDoc(docRefd,{
debankid: deleteField()
}).then(()=>{router.reload()})
onClick={handleOnDebankdelete}
ImportでdeleteFieldも追加。ばっちり消せている。再登録も問題なし。
twitterの登録フォームの追加も行おうかと考えたが、先にdelteアクション時にポップアップの実装を行うか。
reactjs-popupをインポートすれば瞬殺できるようだが背景にはmodal作成・利用などのテーマがありそう。
https://www.geeksforgeeks.org/how-to-add-popup-in-nextjs/
https://blog.microcms.io/how-to-react-hooks-use-modal/
https://qiita.com/onikan/items/98983d296fa16cf947de
まずは試しに何かpopupさせてみる。
npm i reactjs-popup
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
POPUPトライ
<div>
<h4>NextJs Popup - GeeksforGeeks</h4>
<Popup trigger={<button> Click to open popup </button>}
position="right center">
<div>GeeksforGeeks</div>
<button>Click here</button>
</Popup>
</div>
こちらで即座にpopupが完了できた。
体裁を整えたい場合には'reactjs-popup/dist/index.css’;を修正する必要があるか。
今のところclick hereを押しても次の動作が発生しないのでそこも設定する。
そこはButtonコンポーネントに囲んで解決できた。
POPUPトライ
<div>
<h4>NextJs Popup - GeeksforGeeks</h4>
<Popup trigger={<button> Click to open popup </button>}
position="right center">
<div>GeeksforGeeks</div>
<Button
type="submit"
varient="contained"
onClick={()=>console.log('clickされました')}
>
Click here
</Button>
</Popup>
</div>
ボタンの色形が変わるのはあまり良くなく感じたので、Buttonコンポーネントに仕様を統一した。
POPアップを閉じる方法も作成する。
https://react-popup.elazizi.com/controlled-popup/
import React, { useRef } from 'react';
useRefを使用するのが無難そうなのでそちらで対応。
const ref = useRef();
const useref = useRef();
const closeTooltip = () => useref.current.close();
Firestorageのrefと変数が被ってしまうので注意が必要。
<Button
type="submit"
varient="contained"
onClick={closeTooltip}
>
NO
</Button>
こちらの形に設定した。
エラーが発生。原因を探してみるおと <Popup ref={useref} trigger={とrefを入れる必要があったよう。
https://qiita.com/oedkty/items/d2e01acf945849c5f9f7
これでもやはりエラー。
onClick={() => console.log(popup.current)}としたところpopupが取得できていないことがわかる。
<Popup ref={popup} trigger={としたらオブジェクトを取得できた。
HTML要素にrefという属性でuseRefの値を渡してあげることで参照できるというuseRefの基本操作のところの問題だった。
https://qiita.com/cheez921/items/9a5659f4b94662b4fd1e
無事稼働。
Twitterの処置に移るか。同じくカードのドラッグで順番を入れ替えることができる機能も追加していきたいところ。
