Conversation UI

commons/src/methods/contact_strings.ts

@@ -0,0 +1,33 @@
+import type { Participant, Account } from "@commons/types/Nylas";
+
+export function getNameInitials(name: string): string {
+  const nameParts = name.split(" ");
+  return nameParts
+    .map((n, i) => (i === 0 || i === nameParts.length - 1 ? n[0] : ""))
+    .join("");
+}
+
+export function getContactInitialForAvatar(
+  contact: Participant | Partial<Account>,
+): string {
+  const participant = <Participant>contact;
+  const account = <Partial<Account>>contact;
+
+  // if participant type
+  if (participant.email) {
+    if (participant.name) {
+      return getNameInitials(participant.name);
+    }
+    return participant.email[0];
+  }
+
+  // else account type
+  // since this is partial, need to check every attr and have a fallback
+  if (account.name) {
+    return getNameInitials(account.name);
+  } else if (account.email_address) {
+    return account.email_address[0];
+  } else {
+    return "?";
+  }
+}

commons/src/methods/datetime.ts

@@ -0,0 +1,51 @@
+export function getTimeString(date: Date): string {
+  // 11:11am
+  return date
+    .toLocaleTimeString([], { timeStyle: "short" })
+    .replaceAll(/\./g, "");
+}
+
+export function getYearString(date: Date): string {
+  // Jul 5th 2020
+  const suffixMapper = (num: number): string => {
+    if ([31, 21, 1].includes(num)) return "st ";
+    if ([22, 2].includes(num)) return "nd ";
+    if ([23, 3].includes(num)) return "rd ";
+    return "th ";
+  };
+  return date
+    .toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    })
+    .replaceAll(/, /g, suffixMapper(date.getDate()))
+    .replaceAll(/[.]/g, "");
+}
+
+export function getDateString(date: Date): string {
+  // Sep 22
+  return date
+    .toLocaleDateString(undefined, { month: "short", day: "numeric" })
+    .replaceAll(/[.]/g, "");
+}
+
+// Date logic: https://www.figma.com/file/oiCKNsHDfAo9KnH1Sbs8Xj/Email-%26-Mailbox-Component?node-id=128%3A51
+export function getDate(date: Date): string {
+  const today = new Date();
+  if (today.toDateString() === date.toDateString()) {
+    return getTimeString(date);
+  }
+
+  const diff_years = today.getFullYear() - date.getFullYear();
+  if (diff_years !== 0) {
+    return getYearString(date);
+  }
+
+  const yesterday = new Date(today.getDate() - 1);
+  if (yesterday.toDateString() === date.toDateString()) {
+    return "Yesterday";
+  }
+
+  return getDateString(date);
+}

commons/src/store/events.ts

@@ -26,9 +26,9 @@ function initializeEvents() {
         return await eventsMap[queryKey];
       }
     },
-    createEvent: (event: Event, query: EventQuery) => {
+    createEvent: async (event: Event, query: EventQuery) => {
       const queryKey = JSON.stringify(query);
-      if (eventsMap[queryKey]) {
+      if (await eventsMap[queryKey]) {
         eventsMap[queryKey] = Promise.all([
           eventsMap[queryKey],
           createEvent(event, query),