//tips
ドキュメンタリーにするのはアリ。
ドキュメンタリー系で思い出したの。最近天才だと思ったのが、世界からのサプライズ動画チャンネル。これ個人用のプライベートビデオ撮れるらしい。めっちゃ送りたいというかお願いしたい。フラッシュモブは気軽にできないのがネック。
ロゴはクールなのが完成した(時差的にはUAEの方のよう)が、アニメーション(USAカンパニー)は難航。日本の依頼先も追加。サンプル動画を見たが、アニメーションは日本が強そう。
山古志への行き方を調べたら長岡駅からバス２本経由で1時間程度。Discordでお泊まり会などがあったら便乗する。
山古志村は既になく2005年に長岡市と合併し、現在に至るとのこと。現状の自治体区分に関係なく、人口が増加する海外から関係人口を引っ張ることで力を持ち、市から独自財源を確保できるそう。
//smart contract
[msid]ページとMessageページのUI調整。
タイトル部分は逆に必要なさそうなので削除。
最新メッセージの一部を表示させることで、自身の送付で終わっているのか、相手の送付がきているのかの確認を行えるようにする。
新着アイコンなどの表示は別途考える。
リスト表示部分に最新コメントを表示するスクリプトを追加する。
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist} onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid).then(() => router.reload())}>
<img src={item.storagelink} className={classes.avatarshapeleft} alt="" width="50" height="50"/> <Typography display="inline" variant="h4" className={classes.imagemarginv}>{item.username} </Typography>
<Typography display="inline" className={classes.imagemarginv}>{item.username} </Typography>
</Card>
</div>
))
ninjafinalvはミックスリストの内容をフィルタリングしたものであり、データベースのメッセージ情報を格納したninjaデータとは別物となっている。
データ自体はninjaに格納されているものを整理すればいいので新たな関数を作るか。
自身のuseridを除き、useridとtowhomの内容がmap/foreachのループのninja配列から抜き出したitemにて合致する場合のメッセージの一番dateが新しいものを配列に格納していければ良い。
下記はフィルタリングしてしまっているがこれを全部抜き出す形でのループで処理していけば良さそう。
if(authid){
const newArray = ninja.filter(element =>
(element.userid==authid&&element.Towhom==msid||element.userid==parseInt(msid)&&element.Towhom==authid.toString()));
ninjav = newArray.sort(function(a, b) {
return (a.date < b.date) ? -1 : 1; //オブジェクトの昇順ソート
//return (a.cardorder > b.cardorder) ? -1 : 1; //オブジェクトの降順ソート
});
}
何気に複雑になってしまいそう。
{ninjafinalv&&ninjafinalv.map((item,index) => (で拾えるitemの内容取得でいっぺんに終わらせる方法を考える。
新しいコンポーネントを作るか。
import Lastwords from '../../../../components/Lastwords';
<Lastwords words={item.userid} ninja={ninja} />
import * as React from 'react';
import Typography from '@mui/material/Typography';
const Lastwords = ({words,ninja}) => {
console.log(words)
console.log(ninja)
return (
<div>
<Typography >Let's start chatting!</Typography>
</div>
);
}
export default Lastwords;
きちんとログも確認できた。
console.log(words)
console.log(ninja)
継承はできているのでこちらでロジックを作り、必要な情報だけを返すようにする。
import * as React from 'react';
import Typography from '@mui/material/Typography';
const Lastwords = ({wid,ninja}) => {
console.log(wid)
console.log(ninja)
const itemold=[]
const lastword=''
ninja.forEach(item => {
if(item.userid==wid||item.Towhom==wid){
if(item.date>itemold.date){
itemold=item
}
}
});
return (
<div>
<Typography >{itemold.Message}</Typography>
</div>
);
}
export default Lastwords;
うまく表示されない。
if(item.date>itemold.date){の条件の部分がまずいことがわかった。
if(!itemold.date||item.date>itemold.date){
itemold.push(item.Message)
console.log('itemold')
console.log(itemold)
こちらにより合致する条件のメッセージを順に格納していくことができた。
最後のメッセージをreturn部分で表示させれば良いので、
return (
<div>
<Typography >{itemold[itemold.length-1]}</Typography>
</div>
);
}
とした。これにて文言の表示は完了した。
表示文言が時系列の最後尾のものになっていなさそう。
データベースを再度確認。
Olditem部分をコメントのみを格納するようにしたから途中が変になっていた。
if(!olddate||item.date>olddate){
これで問題なく表示させることができた。
また、item.useridとitem.Towhomが同一の場合は自身に対するメッセージとなるので表示させないようにする。
ninja.forEach(item => {
console.log('a')
if(item.userid==item.Towhom){
console.log('same')
return
}
でループを抜けられているはずなのに自身の表示がされている。
