signal-desktop/ts/components/conversation/Timestamp.md

All major transitions

function get1201() {
  const d = new Date();
  d.setHours(0, 0, 1, 0);
  return d.getTime();
}
function getYesterday1159() {
  return get1201() - 2 * 60 * 1000;
}
function getJanuary1201() {
  const now = new Date();
  const d = new Date(now.getFullYear(), 0, 1, 0, 1);
  return d.getTime();
}
function getDecember1159() {
  return getJanuary1201() - 2 * 60 * 1000;
}

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="red"
      timestamp={Date.now() - 500}
      text="500ms ago - all below 1 minute are 'now'"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 5 * 1000}
      text="Five seconds ago"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 30 * 1000}
      text="30 seconds ago"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="red"
      timestamp={Date.now() - 60 * 1000}
      text="One minute ago - in minutes"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 30 * 60 * 1000}
      text="30 minutes ago"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 45 * 60 * 1000}
      text="45 minutes ago (used to round up to 1 hour with moment)"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="red"
      timestamp={Date.now() - 60 * 60 * 1000}
      text="One hour ago - in hours"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={get1201()}
      text="12:01am today"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="red"
      timestamp={getYesterday1159()}
      text="11:59pm yesterday - adds day name"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 24 * 60 * 60 * 1000}
      text="24 hours ago"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
      text="Two days ago"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="red"
      timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
      text="Seven days ago - adds month"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
      text="Thirty days ago"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={getJanuary1201()}
      text="January 1st at 12:01am"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="red"
      timestamp={getDecember1159()}
      text="December 31st at 11:59pm - adds year"
      i18n={util.i18n}
    />
  </div>
  <div className="module-message-container">
    <Message
      direction="incoming"
      status="delivered"
      authorColor="teal"
      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
      text="One year ago"
      i18n={util.i18n}
    />
  </div>
</util.ConversationContext>;