From 5cae71653fb3b973e61c61c109e2aac05a463cc1 Mon Sep 17 00:00:00 2001 From: Eli Ribble Date: Wed, 4 Sep 2024 11:39:44 -0700 Subject: [PATCH 1/2] Space between when sent time, from, and subject in email summary This is the first time I'm creating some custom style. There's probably a way to do this with Bootstrap that I'm not expert enough to know about. For now I'm just scratching itches. --- src/EmailSummary.tsx | 23 +++++++++++++---------- src/client/Client.tsx | 2 +- src/client/types.tsx | 2 +- src/components/DateTime.tsx | 30 ++++++++++++++++++++++-------- src/components/EmailFrom.tsx | 20 ++++++++++++++++++++ src/style.scss | 12 ++++++++++++ 6 files changed, 69 insertions(+), 20 deletions(-) create mode 100644 src/components/EmailFrom.tsx diff --git a/src/EmailSummary.tsx b/src/EmailSummary.tsx index 66d3517..334231d 100644 --- a/src/EmailSummary.tsx +++ b/src/EmailSummary.tsx @@ -4,9 +4,11 @@ import ButtonGroup from "react-bootstrap/ButtonGroup"; import ButtonToolbar from "react-bootstrap/ButtonToolbar"; import Placeholder from "react-bootstrap/Placeholder"; import React from "react"; +import Stack from "react-bootstrap/Stack"; import Client from "./client/Client"; import DateTime from "./components/DateTime"; +import EmailFrom from "./components/EmailFrom"; import { IAccount, IEmailStub, IMailbox } from "./client/types"; type EmailSummaryProps = { @@ -49,17 +51,18 @@ class EmailSummary extends React.Component< return ; } return ( -
+ + + +
{stub.from == null ? "?" : stub.from[0].name}
- - - {" - " + - (stub.from == null ? "?" : stub.from[0].name) + - " - " + - stub.subject} - +
{stub.subject}
 - + -
+ ); } } diff --git a/src/client/Client.tsx b/src/client/Client.tsx index 25eb9ab..bd3e460 100644 --- a/src/client/Client.tsx +++ b/src/client/Client.tsx @@ -241,7 +241,7 @@ export default class Client { ); } this.state.session.emailStubs[e.id] = { - from: e.from, + from: e.from === null ? [] : e.from, id: e.id, mailboxIds: e.mailboxIds, receivedAt: e.receivedAt, diff --git a/src/client/types.tsx b/src/client/types.tsx index e8fa48c..a251cd0 100644 --- a/src/client/types.tsx +++ b/src/client/types.tsx @@ -2,7 +2,7 @@ import * as client from "./jmap-client-ts/src/types"; export type MailboxIdMap = { [mailboxId: string]: boolean }; export interface IEmailStub { - from: Array | null; + from: Array; id: string; mailboxIds: MailboxIdMap; receivedAt: string; diff --git a/src/components/DateTime.tsx b/src/components/DateTime.tsx index 38c2148..91222cd 100644 --- a/src/components/DateTime.tsx +++ b/src/components/DateTime.tsx @@ -4,16 +4,30 @@ type DateTimeProps = { d: string; }; -const DateTime: React.FC = ({ d }) => { - const datetime = Date.parse(d); +const DateTime: React.FC< + DateTimeProps & React.HTMLAttributes +> = (props) => { + const datetime = Date.parse(props.d); const now = Date.now(); const diff = (now - datetime) / 1000; - if (diff < 30) return moments ago; - if (diff < 60) return {diff}s; - if (diff < 60 * 60) return {Math.round(diff / 60)}m; - if (diff < 60 * 60 * 48) return {Math.round(diff / (60 * 60))}h; + if (diff < 30) return moments ago; + if (diff < 60) return {diff}s; + if (diff < 60 * 60) + return {Math.round(diff / 60)}m; + if (diff < 60 * 60 * 48) + return ( + {Math.round(diff / (60 * 60))}h + ); if (diff < 60 * 60 * 24 * 365) - return {Math.round(diff / (60 * 60 * 24))}d; - return {Math.round(diff / (60 * 60 * 24 * 365))}y; + return ( + + {Math.round(diff / (60 * 60 * 24))}d + + ); + return ( + + {Math.round(diff / (60 * 60 * 24 * 365))}y + + ); }; export default DateTime; diff --git a/src/components/EmailFrom.tsx b/src/components/EmailFrom.tsx new file mode 100644 index 0000000..aa174a2 --- /dev/null +++ b/src/components/EmailFrom.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import * as client from "../client/jmap-client-ts/src/types"; + +type EmailFromProps = { + froms: Array; +}; + +const EmailFrom: React.FC = ({ froms }) => { + if (froms.length === 0) { + return None; + } + if (froms.length > 1) { + return MANY?; + } + if (froms[0].name) { + return {froms[0].name}; + } + return {froms[0].email}; +}; +export default EmailFrom; diff --git a/src/style.scss b/src/style.scss index 5de3350..e8cabd0 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1 +1,13 @@ @import '~bootstrap/scss/bootstrap'; + +.email-summary { + .email-from { + overflow: hidden; + text-overflow: ellipsis; + width: 200px; + } + .received { + width: 50px; + } +} + From 1d9a1841400b30c47c2aaf3cea2a1a782d605979 Mon Sep 17 00:00:00 2001 From: Eli Ribble Date: Wed, 4 Sep 2024 11:41:33 -0700 Subject: [PATCH 2/2] Subscribe to event type and message. This mirrors a change in the client where we extract the type of the event. --- src/client/Client.tsx | 9 ++++++--- src/client/jmap-client-ts | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/client/Client.tsx b/src/client/Client.tsx index bd3e460..e67bd71 100644 --- a/src/client/Client.tsx +++ b/src/client/Client.tsx @@ -370,8 +370,11 @@ export default class Client { .replace("{types}", "*") .replace("{closeafter}", "no") .replace("{ping}", "60"); - this.jclient.subscribeToEvents(eventSourceUrl, (e) => { - console.log("Got an event!", e); - }); + this.jclient.subscribeToEvents( + eventSourceUrl, + (type: string, message: PushMessage) => { + console.log("Got an event!", type, message); + }, + ); } } diff --git a/src/client/jmap-client-ts b/src/client/jmap-client-ts index 2ef5f5b..5cf6129 160000 --- a/src/client/jmap-client-ts +++ b/src/client/jmap-client-ts @@ -1 +1 @@ -Subproject commit 2ef5f5b7fa0a22a499bd32831ac24622f17e10e6 +Subproject commit 5cf6129a517224b90f79cb96f212d57c5bceb51f