diff --git a/package.json b/package.json index 23e61f7..91cb7cd 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "react-error-boundary": "^3.1.4", "react-hook-form": "^7.43.9", "react-loading-skeleton": "^3.3.1", + "react-moment": "^1.1.3", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", "react-secure-storage": "^1.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c4f87fb..81afa14 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@emotion/react': specifier: ^11.11.0 @@ -82,6 +86,9 @@ dependencies: react-loading-skeleton: specifier: ^3.3.1 version: 3.3.1(react@18.2.0) + react-moment: + specifier: ^1.1.3 + version: 1.1.3(moment@2.29.4)(prop-types@15.8.1)(react@18.2.0) react-router-dom: specifier: ^6.11.1 version: 6.11.1(react-dom@18.2.0)(react@18.2.0) @@ -7880,6 +7887,10 @@ packages: resolution: {integrity: sha512-HdKewQEREEJgsWnErClfbFoVebze6rGazxFLU/XUyrII8dORfVszN1V0BMRnQSzcgsNNtkX8DHj3nC6cdWE9YQ==} dev: false + /moment@2.29.4: + resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==} + dev: false + /ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} @@ -9256,6 +9267,18 @@ packages: react: 18.2.0 dev: false + /react-moment@1.1.3(moment@2.29.4)(prop-types@15.8.1)(react@18.2.0): + resolution: {integrity: sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==} + peerDependencies: + moment: ^2.29.0 + prop-types: ^15.7.0 + react: ^16.0 || ^17.0.0 || ^18.0.0 + dependencies: + moment: 2.29.4 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /react-refresh@0.11.0: resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==} engines: {node: '>=0.10.0'} diff --git a/src/components/Message.tsx b/src/components/Message.tsx index 19a6ab4..cca5fda 100644 --- a/src/components/Message.tsx +++ b/src/components/Message.tsx @@ -1,6 +1,8 @@ +import Moment from "react-moment"; import styled from "styled-components"; import { QueuedMessage } from "../stores/MessageQueue"; import { default as MessageObject } from "../stores/objects/Message"; +import { calendarStrings } from "../utils/i18n"; import Avatar from "./Avatar"; type MessageLike = MessageObject | QueuedMessage; @@ -74,7 +76,10 @@ function Message({ message, isHeader, isSending, isFailed }: Props) { - {message.timestamp.toLocaleTimeString()} + )} diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts new file mode 100644 index 0000000..83732d4 --- /dev/null +++ b/src/utils/i18n.ts @@ -0,0 +1,6 @@ +export const calendarStrings = { + lastDay: "[Yesterday at] LT", + nextDay: "[Tomorrow at] LT", + sameDay: "[Today at] LT", + sameElse: "MM/DD/YYYY LT", +};