From 1fcf4df1ed90156da0f1cdcf2d736a5d900ed38a Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 6 Jul 2021 19:29:09 +0100 Subject: [PATCH] Fix: System messages would break replies. Fix: Show correct time format on left side of messages. --- external/lang | 2 +- package.json | 2 +- .../common/messaging/MessageBase.tsx | 9 +++++--- .../messaging/attachments/MessageReply.tsx | 13 ++++++++---- .../common/messaging/bars/ReplyBar.tsx | 16 +++++++------- src/components/ui/DateDivider.tsx | 3 ++- src/context/Locale.tsx | 14 ++++++++----- src/lib/i18n.tsx | 21 ++++++++++++++++--- src/pages/settings/panes/Sessions.tsx | 3 ++- yarn.lock | 2 +- 10 files changed, 58 insertions(+), 27 deletions(-) diff --git a/external/lang b/external/lang index 1d2b4d01..ce5e32d4 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 1d2b4d0147ef4bd0613c44c702233f7af888d6c0 +Subproject commit ce5e32d444a35a691ac6b0abfbc722945e7cdf46 diff --git a/package.json b/package.json index 9e5e3914..bcf07e8c 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@typescript-eslint/eslint-plugin": "^4.27.0", "@typescript-eslint/parser": "^4.27.0", "classnames": "^2.3.1", - "dayjs": "^1.10.5", + "dayjs": "^1.10.6", "detect-browser": "^5.2.0", "eslint": "^7.28.0", "eslint-config-preact": "^1.1.4", diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx index 1ed75ffd..ad505c9e 100644 --- a/src/components/common/messaging/MessageBase.tsx +++ b/src/components/common/messaging/MessageBase.tsx @@ -1,4 +1,3 @@ -import dayjs from "dayjs"; import styled, { css } from "styled-components"; import { decodeTime } from "ulid"; @@ -7,6 +6,8 @@ import { Text } from "preact-i18n"; import { MessageObject } from "../../../context/revoltjs/util"; import Tooltip from "../Tooltip"; +import { useDictionary } from "../../../lib/i18n"; +import { dayjs } from "../../../context/Locale"; export interface BaseMessageProps { head?: boolean; @@ -170,13 +171,15 @@ export function MessageDetail({ message: MessageObject; position: "left" | "top"; }) { + const dict = useDictionary(); + if (position === "left") { if (message.edited) { return ( <> @@ -191,7 +194,7 @@ export function MessageDetail({ <> diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 0620b907..cbfaf674 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/src/components/common/messaging/attachments/MessageReply.tsx @@ -9,6 +9,8 @@ import { useUser } from "../../../../context/revoltjs/hooks"; import Markdown from "../../../markdown/Markdown"; import UserShort from "../../user/UserShort"; +import { SYSTEM_USER_ID } from "revolt.js"; +import { SystemMessage } from "../SystemMessage"; interface Props { channel: string; @@ -84,10 +86,13 @@ export function MessageReply({ index, channel, id }: Props) { {message.attachments && message.attachments.length > 0 && ( )} - + { message.author === SYSTEM_USER_ID ? + : + + } ); } diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index 4199c134..7db07b98 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/src/components/common/messaging/bars/ReplyBar.tsx @@ -21,6 +21,8 @@ import IconButton from "../../../ui/IconButton"; import Markdown from "../../../markdown/Markdown"; import UserShort from "../../user/UserShort"; import { ReplyBase } from "../attachments/MessageReply"; +import { SystemMessage } from "../SystemMessage"; +import { SYSTEM_USER_ID } from "revolt.js"; interface Props { channel: string; @@ -100,13 +102,13 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { message.attachments.length > 0 && ( )} - + { message.author === SYSTEM_USER_ID ? + : + + } ` height: 0; diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx index 1e73ba4e..d12fd9a0 100644 --- a/src/context/Locale.tsx +++ b/src/context/Locale.tsx @@ -1,4 +1,6 @@ -import dayjs from "dayjs"; +import dayJS from "dayjs"; +export const dayjs = dayJS; + import calendar from "dayjs/plugin/calendar"; import format from "dayjs/plugin/localizedFormat"; import update from "dayjs/plugin/updateLocale"; @@ -143,12 +145,11 @@ function Locale({ children, locale }: Props) { // TODO: clean this up and use the built in Intl API function transformLanguage(source: { [key: string]: any }) { const obj = defaultsDeep(source, definition); - const dayjs = obj.dayjs; const defaults = dayjs.defaults; const twelvehour = defaults?.twelvehour === "yes" || true; - const separator: "/" | "-" | "." = defaults?.date_separator ?? "/"; + const separator: string = defaults?.date_separator ?? "/"; const date: "traditional" | "simplified" | "ISO8601" = defaults?.date_format ?? "traditional"; @@ -159,19 +160,22 @@ function Locale({ children, locale }: Props) { }; dayjs["sameElse"] = DATE_FORMATS[date]; + dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm"; + Object.keys(dayjs) .filter((k) => typeof dayjs[k] === 'string') .forEach( (k) => (dayjs[k] = dayjs[k].replace( /{{time}}/g, - twelvehour ? "LT" : "HH:mm", + dayjs["timeFormat"], )), ); return obj; } + dayjs.updateLocale("en", { calendar: { ...definition.dayjs, sameDay: 'sussy baka' } }); useEffect(() => { if (locale === "en") { const defn = transformLanguage(definition); @@ -193,7 +197,7 @@ function Locale({ children, locale }: Props) { dayjs.updateLocale(target, { calendar: defn.dayjs }); } - dayjs.locale(dayjs_locale.default); + dayjs.locale(target, dayjs_locale.default); setDefinition(defn); }, ); diff --git a/src/lib/i18n.tsx b/src/lib/i18n.tsx index 987f3faa..9b99a292 100644 --- a/src/lib/i18n.tsx +++ b/src/lib/i18n.tsx @@ -12,11 +12,21 @@ interface Props { fields: Fields; } +export interface Dictionary { + dayjs: { + defaults: { + twelvehour: 'yes' | 'no'; + separator: string; + date: "traditional" | "simplified" | "ISO8601"; + }, + timeFormat: string + }; + [key: string]: Object | string; +} + export interface IntlType { intl: { - dictionary: { - [key: string]: Object | string; - }; + dictionary: Dictionary; }; } @@ -60,3 +70,8 @@ export function useTranslation() { return (id: string, fields?: Object, plural?: number, fallback?: string) => translate(id, "", intl.dictionary, fields, plural, fallback); } + +export function useDictionary() { + const { intl } = useContext(IntlContext) as unknown as IntlType; + return intl.dictionary; +} diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index a64b16ea..2ca26bb4 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -10,7 +10,7 @@ import { Safari, Windows, } from "@styled-icons/simple-icons"; -import dayjs from "dayjs"; + import relativeTime from "dayjs/plugin/relativeTime"; import { useHistory } from "react-router-dom"; import { decodeTime } from "ulid"; @@ -24,6 +24,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient"; import Button from "../../../components/ui/Button"; import Preloader from "../../../components/ui/Preloader"; import Tip from "../../../components/ui/Tip"; +import { dayjs } from "../../../context/Locale"; dayjs.extend(relativeTime); diff --git a/yarn.lock b/yarn.lock index d7e90454..c5877243 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1997,7 +1997,7 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw== -dayjs@^1.10.5: +dayjs@^1.10.6: version "1.10.6" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63" integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==