Blockchain code Metaverse VR

Crypto×VR×SmartContract(527)

スポンサーリンク

//tips

朝食は制限することを忘れない。眠くなる。

枕変更により睡眠効率がアップした。今後枕の高さにも気を配る。

//smart contract

Editの更新処理もきちんと反映できたのでmedium cardの反映を分けて表示する。

medium cardの表示部分は下記のようにconst [uname,setUname]=useState(‘’)にセットされた内容をhandleOnMediumCardに渡してjsonへ追加していた。

Medium Card
<form noValidate autoComplete="off" onSubmit={handleOnMediumCard}>
<TextField
onChange={(e)=>setUname(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
>
submit
</Button>
</Box>
</form>

Medium idを登録できるようにし、そちらの内容をカード形式にて表現できるようにしてあげれば良いか。

登録部分はdebankidと同じ形で良い。

Card内のarrowは削除処理しておく。

修正を進める中で一部popアップなどが機能しなくなっていることに気がついた。格納していたtweetidなど消してしまったので復活させる。

初期登録内容とnoteが一緒になっていたのが問題。noteと一緒に初期登録部分も消してしまった。

Noteのみきちんと抽出して表示させる。すでにcardorderは不要になっているのでtitleが存在するものを抽出する形で良いか。

後でcard内のhandleDelete箇所にも削除popアップを適用させることを忘れない。

無事に再登録も済みauthでの認証もきちんとできたので再度mediumidの登録場所を作成していく。

データベースに登録し、取得できるようにしておく。

pile.mediumid = data.mediumid ?data.mediumid:null

Medium id 登録・更新
<form noValidate autoComplete="off" onSubmit={handleOnMedium}>

<TextField
onChange={(e)=>setMedium(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>

handleOnMediumの関数の中身はmediumidがなければ追加、あれば更新。

async function handleOnMedium(e) {
e.preventDefault();
var currentmid=null;
var currentmdocid=null;

ninja.forEach((element) =>
{
if(element.mediumid!=null){
currentmid=element.mediumid
currentmdocid=element.docid
}
})

if(currentmid===null){
console.log('aaa')

addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
mediumid:mymedium
})
}else{
console.log('bbb')

const updateRef = doc(firebaseApp,'mydata',currentmdocid);
console.log('currentdocid')

updateDoc(updateRef, {
mediumid: mymedium
});
}
router.reload()

}

という処理にしている。

次に登録したmediumの内容を読み取ってfetch処理して必要な部分のみ抜き出す必要がある。これもdebankと同じ。

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();

Debankではdepositページを新たに作成し、そちらを連結させている。

<Deposits depo={depo}/>

を<Medium depo={depo}/>などの形で対処できるようにする。

Depoの代わりに渡すmediをninja.forEach(Item => {の設定に追加。

if(Item.mediumid !=null||Item.mediumid !=undefined){
if(medi==undefined||medi==null){
setMedi(Item.mediumid)
}

Mediumページの設定を行う。

Mediumaaa
{ medi: 'Nakithemagic' }
Mediumaaa
{ medi: undefined }

引数の受け渡しでmediが初めは渡されるが後で消えている。

これはauthhistoryの認証を取得するタイミングまでのラグがあるからかと試行錯誤していたら下部にもう一つ以前使用していたMediumタグが残っており、これが悪さをしていた。

Mediumidの引き渡しはできたので、カード表示化していく。

きちんと内容の方を下記で取得できたので、データをmapで展開して、各取得要素ごとにカード化させるreturn構造を考える。

export default function Medium({medi}) {

const [mymedium, setMedium] = useState();

useEffect(() => {
if(medi!=undefined||medi!=null){
const feed_url = "https://medium.com/feed/@"+medi;
console.log(feed_url)

fetch(
'https://api.rss2json.com/v1/api.json?rss_url='+feed_url, {
headers:
{
'accept': 'application/json'
}
})
.then(res => res.json())
.then(results => console.log(results))

スクリプトがかなり長くなってきたので見にくくなっている。

Fetchデータの展開だが、depositの場合は単一の値を取得すればよかったのに対して今回はjsonオブジェクトの中のitems配列の中の一部を取得する必要が出ている。

if(mymedium){
for(var i=0; i <= mymedium.items.length-1; i++){
console.log(i)
console.log(mymedium.items[i].title)
data.push(mymedium.items[i])
}
}

useEffect(() => {
if(medi!=undefined||medi!=null){
const feed_url = "https://medium.com/feed/@"+medi;
console.log(feed_url)

fetch(
'https://api.rss2json.com/v1/api.json?rss_url='+feed_url, {
headers:
{
'accept': 'application/json'
}
})
.then(res => res.json())
//.then(results => console.log(results))

.then(results => setMedium(results))
//.then(() => console.log(mymedium))

なんとかこのようにしてjsonデータの中身を取得して表示させることができた。

コンテンツがhtmlとごっちゃになっているので下記のような処理が必要になっている。

let parser = new DOMParser();
let doc = parser.parseFromString(details, 'text/html');
var p_element = doc.querySelectorAll("p");

var detailnew="";

p_element.forEach(function(userItem) {
if(userItem.textContent !=undefined){
detailnew += userItem.textContent+'.'
}
});

これらを表示させず、リンクとタイトルだけにしておくか。サマリーを追加できるようにしておいても良いかもしれない。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.