From 1e5a45d95bb7726105d36d1b60c5dec9cbf3c668 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 1 Feb 2022 13:46:30 +1100 Subject: [PATCH] cleanup timestamp display for search results --- app/sql.js | 2 +- ts/components/basic/MessageBodyHighlight.tsx | 2 ++ ts/components/conversation/Timestamp.tsx | 30 ++++++---------- .../conversation-list-item/HeaderItem.tsx | 2 +- ts/components/search/MessageSearchResults.tsx | 16 ++++++--- ts/util/formatRelativeTime.ts | 35 ------------------- 6 files changed, 26 insertions(+), 61 deletions(-) delete mode 100644 ts/util/formatRelativeTime.ts diff --git a/app/sql.js b/app/sql.js index 2f96b8b12..afbc31105 100644 --- a/app/sql.js +++ b/app/sql.js @@ -1862,7 +1862,7 @@ function searchMessages(query, limit) { .prepare( `SELECT ${MESSAGES_TABLE}.json, - snippet(${MESSAGES_FTS_TABLE}, -1, '<>', '<>', '...', 15) as snippet + snippet(${MESSAGES_FTS_TABLE}, -1, '<>', '<>', '...', 5) as snippet FROM ${MESSAGES_FTS_TABLE} INNER JOIN ${MESSAGES_TABLE} on ${MESSAGES_FTS_TABLE}.id = ${MESSAGES_TABLE}.id WHERE diff --git a/ts/components/basic/MessageBodyHighlight.tsx b/ts/components/basic/MessageBodyHighlight.tsx index 9e30e5b91..744799e1a 100644 --- a/ts/components/basic/MessageBodyHighlight.tsx +++ b/ts/components/basic/MessageBodyHighlight.tsx @@ -12,6 +12,7 @@ const renderNewLines: RenderTextCallbackType = ({ text, key }) => ( const SnippetHighlight = styled.span` font-weight: bold; + color: var(--color-text); `; const renderEmoji = ({ @@ -29,6 +30,7 @@ const renderEmoji = ({ export const MessageBodyHighlight = (props: { text: string }) => { const { text } = props; const results: Array = []; + // this is matching what sqlite fts5 is giving us back const FIND_BEGIN_END = /<>(.+?)<>/g; let match = FIND_BEGIN_END.exec(text); diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx index e2600c6c2..0f0163150 100644 --- a/ts/components/conversation/Timestamp.tsx +++ b/ts/components/conversation/Timestamp.tsx @@ -1,18 +1,16 @@ import React, { useCallback, useState } from 'react'; import moment from 'moment'; -import { formatRelativeTime } from '../../util/formatRelativeTime'; - // tslint:disable-next-line: no-submodule-imports import useInterval from 'react-use/lib/useInterval'; import styled from 'styled-components'; type Props = { timestamp?: number; - extended?: boolean; module?: string; withImageNoCaption?: boolean; isConversationListItem?: boolean; + momentFromNow: boolean; }; const TimestampContainerListItem = styled.div` @@ -45,34 +43,26 @@ export const Timestamp = (props: Props) => { // formatRelativeTime() will print the correct moment. const update = useCallback(() => { setLastUpdated(Date.now()); - }, []); + }, [setLastUpdated]); useInterval(update, UPDATE_FREQUENCY); - const { timestamp, extended } = props; + const { timestamp, momentFromNow } = props; if (timestamp === null || timestamp === undefined) { return null; } - // Use relative time for under 24hrs ago. - const now = Math.floor(Date.now()); - const messageAgeInDays = (now - timestamp) / (1000 * 60 * 60 * 24); - const daysBeforeRelativeTiming = 1; - - let dateString; - if (messageAgeInDays > daysBeforeRelativeTiming) { - dateString = formatRelativeTime(timestamp, { extended }); + const momentValue = moment(timestamp); + let dateString: string = ''; + if (momentFromNow) { + dateString = momentValue.fromNow(); } else { - dateString = moment(timestamp).fromNow(); - // Prevent times reading "NOW AGO" - if (dateString.startsWith('now') || dateString.startsWith('Now')) { - dateString = 'now'; - } - - dateString = dateString.replace('minutes', 'mins').replace('minute', 'min'); + dateString = momentValue.format('lll'); } + dateString = dateString.replace('minutes', 'mins').replace('minute', 'min'); + const title = moment(timestamp).format('llll'); if (props.isConversationListItem) { return {dateString}; diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index a50260e5b..e675697ed 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -110,7 +110,7 @@ export const ConversationListItemHeaderItem = () => { unreadCount > 0 ? 'module-conversation-list-item__header__date--has-unread' : null )} > - + ); diff --git a/ts/components/search/MessageSearchResults.tsx b/ts/components/search/MessageSearchResults.tsx index 70e53d965..4aef6fccf 100644 --- a/ts/components/search/MessageSearchResults.tsx +++ b/ts/components/search/MessageSearchResults.tsx @@ -30,6 +30,8 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults) font-size: 12px; line-height: 14px; overflow-x: hidden; + font-weight: 400; + color: var(--color-text-subtle); `; const FromName = (props: { source: string; conversationId: string }) => { @@ -60,7 +62,6 @@ const FromName = (props: { source: string; conversationId: string }) => { const ConversationHeader = (props: { source: string; conversationId: string }) => { const { source, conversationId } = props; - const fromName = ; const ourKey = getOurPubKeyStrFromCache(); @@ -68,13 +69,17 @@ const ConversationHeader = (props: { source: string; conversationId: string }) = return ( - + ); } - return {fromName}; + return ( + + ; + + ); }; const FromUserInGroup = (props: { authorPubkey: string; conversationId: string }) => { @@ -168,7 +173,10 @@ export const MessageSearchResult = (props: MessageResultProps) => {
- +
diff --git a/ts/util/formatRelativeTime.ts b/ts/util/formatRelativeTime.ts deleted file mode 100644 index a271cd272..000000000 --- a/ts/util/formatRelativeTime.ts +++ /dev/null @@ -1,35 +0,0 @@ -import moment from 'moment'; - -const getExtendedFormats = () => ({ - y: 'lll', - M: `${window.i18n('timestampFormat_M') || 'MMM D'} LT`, - d: 'ddd LT', -}); -const getShortFormats = () => ({ - y: 'll', - M: window.i18n('timestampFormat_M') || 'MMM D', - d: 'ddd', -}); - -function isYear(timestamp: moment.Moment) { - const year = moment().format('YYYY'); - const targetYear = moment(timestamp).format('YYYY'); - - return year === targetYear; -} - -export function formatRelativeTime(rawTimestamp: number | Date, options: { extended?: boolean }) { - const { extended } = options; - const formats = extended ? getExtendedFormats() : getShortFormats(); - const timestamp = moment(rawTimestamp); - const now = moment(); - const diff = moment.duration(now.diff(timestamp)); - - if (diff.years() >= 1 || !isYear(timestamp)) { - return timestamp.format(formats.y); - } else if (diff.months() >= 1 || diff.days() > 6) { - return timestamp.format(formats.M); - } - - return timestamp.format(formats.d); -}