snort/src/Pages/MessagesPage.tsx

import { useMemo } from "react";
import { useDispatch, useSelector } from "react-redux"

import { HexKey, RawEvent } from "Nostr";
import UnreadCount from "Element/UnreadCount";
import ProfileImage from "Element/ProfileImage";
import { hexToBech32 } from "../Util";
import { incDmInteraction } from "State/Login";
import { RootState } from "State/Store";
import NoteToSelf from "Element/NoteToSelf";
import useModeration from "Hooks/useModeration";

type DmChat = {
    pubkey: HexKey,
    unreadMessages: number,
    newestMessage: number
}

export default function MessagesPage() {
    const dispatch = useDispatch();
    const myPubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
    const dms = useSelector<RootState, RawEvent[]>(s => s.login.dms);
    const dmInteraction = useSelector<RootState, number>(s => s.login.dmInteraction);
    const { isMuted } = useModeration();

    const chats = useMemo(() => {
        return extractChats(dms.filter(a => !isMuted(a.pubkey)), myPubKey!)
    }, [dms, myPubKey, dmInteraction]);

    function noteToSelf(chat: DmChat) {
        return (
            <div className="flex mb10" key={chat.pubkey}>
                <NoteToSelf clickable={true} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} pubkey={chat.pubkey} />
            </div>
        )
    }

    function person(chat: DmChat) {
        if(chat.pubkey === myPubKey) return noteToSelf(chat)
        return (
            <div className="flex mb10" key={chat.pubkey}>
                <ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
                <UnreadCount unread={chat.unreadMessages} />
            </div>
        )
    }

    function markAllRead() {
        for (let c of chats) {
            setLastReadDm(c.pubkey);
        }
        dispatch(incDmInteraction());
    }

    return (
        <div className="main-content">
            <div className="flex">
                <h3 className="f-grow">Messages</h3>
                <button type="button" onClick={() => markAllRead()}>Mark All Read</button>
            </div>
            {chats.sort((a, b) => {
                return a.pubkey === myPubKey ? -1 : 
                    b.pubkey === myPubKey ? 1 :
                    b.newestMessage - a.newestMessage
            }).map(person)}
        </div>
    )
}

export function lastReadDm(pk: HexKey) {
    let k = `dm:seen:${pk}`;
    return parseInt(window.localStorage.getItem(k) ?? "0");
}

export function setLastReadDm(pk: HexKey) {
    const now = Math.floor(new Date().getTime() / 1000);
    let current = lastReadDm(pk);
    if (current >= now) {
        return;
    }

    let k = `dm:seen:${pk}`;
    window.localStorage.setItem(k, now.toString());
}

export function dmTo(e: RawEvent) {
    let firstP = e.tags.find(b => b[0] === "p");
    return firstP ? firstP[1] : "";
}

export function isToSelf(e: RawEvent, pk: HexKey) {
    return e.pubkey === pk && dmTo(e) === pk;
}

export function dmsInChat(dms: RawEvent[], pk: HexKey) {
    return dms.filter(a => a.pubkey === pk || dmTo(a) === pk);
}

export function totalUnread(dms: RawEvent[], myPubKey: HexKey) {
    return extractChats(dms, myPubKey).reduce((acc, v) => acc += v.unreadMessages, 0);
}

function unreadDms(dms: RawEvent[], myPubKey: HexKey, pk: HexKey) {
    if (pk === myPubKey) return 0;
    let lastRead = lastReadDm(pk);
    return dmsInChat(dms, pk).filter(a => a.created_at >= lastRead && a.pubkey !== myPubKey).length;
}

function newestMessage(dms: RawEvent[], myPubKey: HexKey, pk: HexKey) {
    if(pk === myPubKey) {
        return dmsInChat(dms.filter(d => isToSelf(d, myPubKey)), pk).reduce((acc, v) => acc = v.created_at > acc ? v.created_at : acc, 0);
    }

    return dmsInChat(dms, pk).reduce((acc, v) => acc = v.created_at > acc ? v.created_at : acc, 0);
}

export function extractChats(dms: RawEvent[], myPubKey: HexKey) {
    const keys = dms.map(a => [a.pubkey, dmTo(a)]).flat();
    const filteredKeys = Array.from(new Set<string>(keys));
    return filteredKeys.map(a => {
        return {
            pubkey: a,
            unreadMessages: unreadDms(dms, myPubKey, a),
            newestMessage: newestMessage(dms, myPubKey, a)
        } as DmChat;
    })
}