Fix: System messages would break replies.

Fix: Show correct time format on left side of messages.
This commit is contained in:
Paul 2021-07-06 19:29:09 +01:00
parent b62eeb35e7
commit 1fcf4df1ed
10 changed files with 58 additions and 27 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 1d2b4d0147ef4bd0613c44c702233f7af888d6c0 Subproject commit ce5e32d444a35a691ac6b0abfbc722945e7cdf46

View file

@ -67,7 +67,7 @@
"@typescript-eslint/eslint-plugin": "^4.27.0", "@typescript-eslint/eslint-plugin": "^4.27.0",
"@typescript-eslint/parser": "^4.27.0", "@typescript-eslint/parser": "^4.27.0",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"dayjs": "^1.10.5", "dayjs": "^1.10.6",
"detect-browser": "^5.2.0", "detect-browser": "^5.2.0",
"eslint": "^7.28.0", "eslint": "^7.28.0",
"eslint-config-preact": "^1.1.4", "eslint-config-preact": "^1.1.4",

View file

@ -1,4 +1,3 @@
import dayjs from "dayjs";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
@ -7,6 +6,8 @@ import { Text } from "preact-i18n";
import { MessageObject } from "../../../context/revoltjs/util"; import { MessageObject } from "../../../context/revoltjs/util";
import Tooltip from "../Tooltip"; import Tooltip from "../Tooltip";
import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
export interface BaseMessageProps { export interface BaseMessageProps {
head?: boolean; head?: boolean;
@ -170,13 +171,15 @@ export function MessageDetail({
message: MessageObject; message: MessageObject;
position: "left" | "top"; position: "left" | "top";
}) { }) {
const dict = useDictionary();
if (position === "left") { if (position === "left") {
if (message.edited) { if (message.edited) {
return ( return (
<> <>
<time className="copyTime"> <time className="copyTime">
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format("H:mm")} {dayjs(decodeTime(message._id)).format(dict.dayjs.timeFormat)}
<i className="copyBracket">]</i> <i className="copyBracket">]</i>
</time> </time>
<span className="edited"> <span className="edited">
@ -191,7 +194,7 @@ export function MessageDetail({
<> <>
<time> <time>
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format("H:mm")} {dayjs(decodeTime(message._id)).format(dict.dayjs.timeFormat)}
<i className="copyBracket">]</i> <i className="copyBracket">]</i>
</time> </time>
</> </>

View file

@ -9,6 +9,8 @@ import { useUser } from "../../../../context/revoltjs/hooks";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { SYSTEM_USER_ID } from "revolt.js";
import { SystemMessage } from "../SystemMessage";
interface Props { interface Props {
channel: string; channel: string;
@ -84,10 +86,13 @@ export function MessageReply({ index, channel, id }: Props) {
{message.attachments && message.attachments.length > 0 && ( {message.attachments && message.attachments.length > 0 && (
<File size={16} /> <File size={16} />
)} )}
{ message.author === SYSTEM_USER_ID ?
<SystemMessage message={message} /> :
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")} content={(message.content as string).replace(/\n/g, " ")}
/> />
}
</ReplyBase> </ReplyBase>
); );
} }

View file

@ -21,6 +21,8 @@ import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { ReplyBase } from "../attachments/MessageReply"; import { ReplyBase } from "../attachments/MessageReply";
import { SystemMessage } from "../SystemMessage";
import { SYSTEM_USER_ID } from "revolt.js";
interface Props { interface Props {
channel: string; channel: string;
@ -100,13 +102,13 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
message.attachments.length > 0 && ( message.attachments.length > 0 && (
<File size={16} /> <File size={16} />
)} )}
{ message.author === SYSTEM_USER_ID ?
<SystemMessage message={message} /> :
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={(message.content as string).replace( content={(message.content as string).replace(/\n/g, " ")}
/\n/g,
" ",
)}
/> />
}
</ReplyBase> </ReplyBase>
<span class="actions"> <span class="actions">
<IconButton <IconButton

View file

@ -1,5 +1,6 @@
import dayjs from "dayjs";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { dayjs } from "../../context/Locale";
const Base = styled.div<{ unread?: boolean }>` const Base = styled.div<{ unread?: boolean }>`
height: 0; height: 0;

View file

@ -1,4 +1,6 @@
import dayjs from "dayjs"; import dayJS from "dayjs";
export const dayjs = dayJS;
import calendar from "dayjs/plugin/calendar"; import calendar from "dayjs/plugin/calendar";
import format from "dayjs/plugin/localizedFormat"; import format from "dayjs/plugin/localizedFormat";
import update from "dayjs/plugin/updateLocale"; 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 // TODO: clean this up and use the built in Intl API
function transformLanguage(source: { [key: string]: any }) { function transformLanguage(source: { [key: string]: any }) {
const obj = defaultsDeep(source, definition); const obj = defaultsDeep(source, definition);
const dayjs = obj.dayjs; const dayjs = obj.dayjs;
const defaults = dayjs.defaults; const defaults = dayjs.defaults;
const twelvehour = defaults?.twelvehour === "yes" || true; const twelvehour = defaults?.twelvehour === "yes" || true;
const separator: "/" | "-" | "." = defaults?.date_separator ?? "/"; const separator: string = defaults?.date_separator ?? "/";
const date: "traditional" | "simplified" | "ISO8601" = const date: "traditional" | "simplified" | "ISO8601" =
defaults?.date_format ?? "traditional"; defaults?.date_format ?? "traditional";
@ -159,19 +160,22 @@ function Locale({ children, locale }: Props) {
}; };
dayjs["sameElse"] = DATE_FORMATS[date]; dayjs["sameElse"] = DATE_FORMATS[date];
dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm";
Object.keys(dayjs) Object.keys(dayjs)
.filter((k) => typeof dayjs[k] === 'string') .filter((k) => typeof dayjs[k] === 'string')
.forEach( .forEach(
(k) => (k) =>
(dayjs[k] = dayjs[k].replace( (dayjs[k] = dayjs[k].replace(
/{{time}}/g, /{{time}}/g,
twelvehour ? "LT" : "HH:mm", dayjs["timeFormat"],
)), )),
); );
return obj; return obj;
} }
dayjs.updateLocale("en", { calendar: { ...definition.dayjs, sameDay: 'sussy baka' } });
useEffect(() => { useEffect(() => {
if (locale === "en") { if (locale === "en") {
const defn = transformLanguage(definition); const defn = transformLanguage(definition);
@ -193,7 +197,7 @@ function Locale({ children, locale }: Props) {
dayjs.updateLocale(target, { calendar: defn.dayjs }); dayjs.updateLocale(target, { calendar: defn.dayjs });
} }
dayjs.locale(dayjs_locale.default); dayjs.locale(target, dayjs_locale.default);
setDefinition(defn); setDefinition(defn);
}, },
); );

View file

@ -12,11 +12,21 @@ interface Props {
fields: Fields; 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 { export interface IntlType {
intl: { intl: {
dictionary: { dictionary: Dictionary;
[key: string]: Object | string;
};
}; };
} }
@ -60,3 +70,8 @@ export function useTranslation() {
return (id: string, fields?: Object, plural?: number, fallback?: string) => return (id: string, fields?: Object, plural?: number, fallback?: string) =>
translate(id, "", intl.dictionary, fields, plural, fallback); translate(id, "", intl.dictionary, fields, plural, fallback);
} }
export function useDictionary() {
const { intl } = useContext(IntlContext) as unknown as IntlType;
return intl.dictionary;
}

View file

@ -10,7 +10,7 @@ import {
Safari, Safari,
Windows, Windows,
} from "@styled-icons/simple-icons"; } from "@styled-icons/simple-icons";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
@ -24,6 +24,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import Preloader from "../../../components/ui/Preloader"; import Preloader from "../../../components/ui/Preloader";
import Tip from "../../../components/ui/Tip"; import Tip from "../../../components/ui/Tip";
import { dayjs } from "../../../context/Locale";
dayjs.extend(relativeTime); dayjs.extend(relativeTime);

View file

@ -1997,7 +1997,7 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw== integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
dayjs@^1.10.5: dayjs@^1.10.6:
version "1.10.6" version "1.10.6"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw== integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==