diff --git a/src/element/DM.tsx b/src/element/DM.tsx index f80ea471..96d45ee6 100644 --- a/src/element/DM.tsx +++ b/src/element/DM.tsx @@ -1,38 +1,33 @@ import "./DM.css"; import { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { useSelector } from "react-redux"; import { useInView } from 'react-intersection-observer'; import useEventPublisher from "../feed/EventPublisher"; import Event from "../nostr/Event"; import NoteTime from "./NoteTime"; import Text from "./Text"; -import { setLastReadDm } from "../pages/MessagesPage"; -import { RootState } from "../state/Store"; -import { HexKey, TaggedRawEvent } from "../nostr"; -import { incDmInteraction } from "../state/Login"; +import { lastReadDm, setLastReadDm } from "../pages/MessagesPage"; export type DMProps = { - data: TaggedRawEvent + data: any } export default function DM(props: DMProps) { - const dispatch = useDispatch(); - const pubKey = useSelector(s => s.login.publicKey); + const pubKey = useSelector(s => s.login.publicKey); const publisher = useEventPublisher(); const [content, setContent] = useState("Loading..."); const [decrypted, setDecrypted] = useState(false); - const { ref, inView } = useInView(); + const { ref, inView, entry } = useInView(); const isMe = props.data.pubkey === pubKey; async function decrypt() { let e = new Event(props.data); - let decrypted = await publisher.decryptDm(e); - setContent(decrypted || ""); if (!isMe) { setLastReadDm(e.PubKey); - dispatch(incDmInteraction()); } + let decrypted = await publisher.decryptDm(e); + setContent(decrypted || ""); } useEffect(() => { diff --git a/src/element/Note.css b/src/element/Note.css index 85c87c43..5b9e5f30 100644 --- a/src/element/Note.css +++ b/src/element/Note.css @@ -2,8 +2,8 @@ margin-bottom: 10px; border-radius: 10px; background-color: var(--note-bg); - padding: 10px 10px 8px 10px; - min-height: 110px; + padding: 20px; + min-height: 120px; } .note.thread { diff --git a/src/element/Text.tsx b/src/element/Text.tsx index add90348..8b57432d 100644 --- a/src/element/Text.tsx +++ b/src/element/Text.tsx @@ -142,11 +142,6 @@ function extractHashtags(fragments: Fragment[]) { }).flat(); } -function transformLi({ body, tags, users }: TextFragment) { - let fragments = transformText({ body, tags, users }) - return
  • {fragments}
    • -} - function transformParagraph({ body, tags, users }: TextFragment) { const fragments = transformText({ body, tags, users }) if (fragments.every(f => typeof f === 'string')) { @@ -182,7 +177,6 @@ export default function Text({ content, tags, users }: TextProps) { return { p: (x: any) => transformParagraph({ body: x.children, tags, users }), a: (x: any) => transformHttpLink(x.href), - li: (x: any) => transformLi({ body: x.children, tags, users }), }; }, [content]); return {content} diff --git a/src/index.css b/src/index.css index e3c8a075..a8f9ecbd 100644 --- a/src/index.css +++ b/src/index.css @@ -349,7 +349,8 @@ body.scroll-lock { @media(max-width: 720px) { .page { - width: calc(100vw - 8px); + width: calc(100vw - 20px); + margin: 0 10px; } div.form-group { flex-direction: column; diff --git a/src/pages/MessagesPage.tsx b/src/pages/MessagesPage.tsx index 1be9daa0..39608e00 100644 --- a/src/pages/MessagesPage.tsx +++ b/src/pages/MessagesPage.tsx @@ -1,11 +1,9 @@ import { useMemo } from "react"; -import { useDispatch, useSelector } from "react-redux" +import { useSelector } from "react-redux" import { HexKey, RawEvent } from "../nostr"; import ProfileImage from "../element/ProfileImage"; import { hexToBech32 } from "../Util"; -import { incDmInteraction } from "../state/Login"; -import { RootState } from "../state/Store"; type DmChat = { pubkey: HexKey, @@ -14,14 +12,12 @@ type DmChat = { } export default function MessagesPage() { - const dispatch = useDispatch(); - const myPubKey = useSelector(s => s.login.publicKey); - const dms = useSelector(s => s.login.dms); - const dmInteraction = useSelector(s => s.login.dmInteraction); + const myPubKey = useSelector(s => s.login.publicKey); + const dms = useSelector(s => s.login.dms); const chats = useMemo(() => { - return extractChats(dms, myPubKey!); - }, [dms, myPubKey, dmInteraction]); + return extractChats(dms, myPubKey); + }, [dms]); function person(chat: DmChat) { return ( @@ -34,19 +30,9 @@ export default function MessagesPage() { ) } - function markAllRead() { - for (let c of chats) { - setLastReadDm(c.pubkey); - } - dispatch(incDmInteraction()); - } - return ( <> -
    -

    Messages

    -
    markAllRead()}>Mark All Read
    -
    +

    Messages

    {chats.sort((a, b) => b.newestMessage - a.newestMessage).map(person)} ) @@ -95,6 +81,7 @@ function newestMessage(dms: RawEvent[], myPubKey: HexKey, pk: HexKey) { 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(keys)); diff --git a/src/state/Login.ts b/src/state/Login.ts index c06ad0b5..df88cc01 100644 --- a/src/state/Login.ts +++ b/src/state/Login.ts @@ -52,27 +52,9 @@ interface LoginStore { /** * Encrypted DM's */ - dms: TaggedRawEvent[], - - /** - * Counter to trigger refresh of unread dms - */ - dmInteraction: 0 + dms: TaggedRawEvent[] }; -const InitState = { - loggedOut: undefined, - publicKey: undefined, - privateKey: undefined, - relays: {}, - latestRelays: 0, - follows: [], - notifications: [], - readNotifications: 0, - dms: [], - dmInteraction: 0 -} as LoginStore; - export interface SetRelaysPayload { relays: Record, createdAt: number @@ -80,7 +62,14 @@ export interface SetRelaysPayload { const LoginSlice = createSlice({ name: "Login", - initialState: InitState, + initialState: { + relays: {}, + latestRelays: 0, + follows: [], + notifications: [], + readNotifications: 0, + dms: [] + }, reducers: { init: (state) => { state.privateKey = window.localStorage.getItem(PrivateKeyItem) ?? undefined; @@ -193,14 +182,17 @@ const LoginSlice = createSlice({ ]; } }, - incDmInteraction: (state) => { - state.dmInteraction += 1; - }, logout: (state) => { - window.localStorage.clear(); - Object.assign(state, InitState); + window.localStorage.removeItem(PrivateKeyItem); + window.localStorage.removeItem(PublicKeyItem); + window.localStorage.removeItem(NotificationsReadItem); + state.privateKey = undefined; + state.publicKey = undefined; + state.follows = []; + state.notifications = []; state.loggedOut = true; - state.relays = Object.fromEntries(DefaultRelays.entries()); + state.readNotifications = 0; + state.dms = []; }, markNotificationsRead: (state) => { state.readNotifications = new Date().getTime(); @@ -218,7 +210,6 @@ export const { setFollows, addNotifications, addDirectMessage, - incDmInteraction, logout, markNotificationsRead } = LoginSlice.actions;