From aedd86fbedbc999085730fe1682b6854cffe7d1e Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sat, 16 May 2020 15:42:02 +0200 Subject: [PATCH] changed date-fns to moment (#23) changed date-fns to moment fixes #22 made use of i18n support of moment Signed-off-by: Philip Molares --- package.json | 2 +- .../landing/layout/footer/language-picker.tsx | 2 ++ .../history/history-card/history-card.tsx | 10 +++--- .../history-table/history-table-row.tsx | 6 ++-- .../landing/pages/history/history.tsx | 4 +-- src/initializers/i18n.ts | 34 +++++++++++++++++-- yarn.lock | 10 +++--- 7 files changed, 51 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 822c5ff43..4dd04ab9d 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,10 @@ "@types/react-router-bootstrap": "^0.24.5", "@types/react-router-dom": "^5.1.5", "bootstrap": "^4.4.1", - "date-fns": "^2.13.0", "i18next": "^19.4.4", "i18next-browser-languagedetector": "^4.1.1", "i18next-http-backend": "^1.0.8", + "moment": "^2.25.3", "node-sass": "^4.14.1", "react": "^16.13.1", "react-bootstrap": "^1.0.1", diff --git a/src/components/landing/layout/footer/language-picker.tsx b/src/components/landing/layout/footer/language-picker.tsx index 669487829..e16dd814e 100644 --- a/src/components/landing/layout/footer/language-picker.tsx +++ b/src/components/landing/layout/footer/language-picker.tsx @@ -1,10 +1,12 @@ import React from "react"; import {useTranslation} from "react-i18next"; +import moment from "moment"; const LanguagePicker: React.FC = () => { const {i18n} = useTranslation(); const onChangeLang = (event: React.ChangeEvent) => { + moment.locale(event.currentTarget.value); i18n.changeLanguage(event.currentTarget.value); } diff --git a/src/components/landing/pages/history/history-card/history-card.tsx b/src/components/landing/pages/history/history-card/history-card.tsx index 260ebeb0d..40b53445c 100644 --- a/src/components/landing/pages/history/history-card/history-card.tsx +++ b/src/components/landing/pages/history/history-card/history-card.tsx @@ -2,12 +2,14 @@ import React from 'react' import {HistoryInput} from '../history' import {Badge, Card} from 'react-bootstrap' import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' -import {format, formatDistance} from 'date-fns' import "../common/button.scss" import {PinButton} from "../common/pin-button"; import {CloseButton} from "../common/close-button"; +import moment from "moment"; +import {useTranslation} from "react-i18next"; export const HistoryCard: React.FC = ({pinned, title, lastVisited, tags, onPinChange}) => { + useTranslation() return (
@@ -18,8 +20,8 @@ export const HistoryCard: React.FC = ({pinned, title, lastVisited,
- {formatDistance(lastVisited, new Date())}
- {format(lastVisited, 'EEE, LLL d, YYY h:mm a')} + {moment(lastVisited).fromNow()}
+ {moment(lastVisited).format("llll")}
{tag}) @@ -30,4 +32,4 @@ export const HistoryCard: React.FC = ({pinned, title, lastVisited,
) -} \ No newline at end of file +} diff --git a/src/components/landing/pages/history/history-table/history-table-row.tsx b/src/components/landing/pages/history/history-table/history-table-row.tsx index 27071e0b8..d4a6c44b9 100644 --- a/src/components/landing/pages/history/history-table/history-table-row.tsx +++ b/src/components/landing/pages/history/history-table/history-table-row.tsx @@ -1,14 +1,14 @@ import React from "react"; import {HistoryInput} from "../history"; -import {format} from "date-fns"; import {PinButton} from "../common/pin-button"; import {CloseButton} from "../common/close-button"; +import moment from "moment"; export const HistoryTableRow: React.FC = ({pinned, title, lastVisited, onPinChange}) => { return ( {title} - {format(lastVisited, 'EEE, LLL d, YYY h:mm a')} + {moment(lastVisited).format("llll")}   @@ -16,4 +16,4 @@ export const HistoryTableRow: React.FC = ({pinned, title, lastVisi ) -} \ No newline at end of file +} diff --git a/src/components/landing/pages/history/history.tsx b/src/components/landing/pages/history/history.tsx index d1c0012ac..80cb675f9 100644 --- a/src/components/landing/pages/history/history.tsx +++ b/src/components/landing/pages/history/history.tsx @@ -3,7 +3,7 @@ import {HistoryCard} from "./history-card/history-card"; import {HistoryTable} from "./history-table/history-table"; import {HistoryTableRow} from './history-table/history-table-row'; import {ToggleButton, ToggleButtonGroup} from 'react-bootstrap'; -import {toDate} from "date-fns"; +import moment from "moment"; interface HistoryChange { onPinChange: () => void, @@ -47,7 +47,7 @@ function loadHistoryFromLocalStore() { return { id: entry.id, title: entry.text, - lastVisited: toDate(entry.time), + lastVisited: moment(entry.time).toDate(), tags: entry.tags, pinned: entry.pinned, } diff --git a/src/initializers/i18n.ts b/src/initializers/i18n.ts index 1ab0df3c9..6460760c7 100644 --- a/src/initializers/i18n.ts +++ b/src/initializers/i18n.ts @@ -2,6 +2,34 @@ import i18n from 'i18next'; import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; import {initReactI18next} from 'react-i18next'; +import moment from "moment"; +import "moment/locale/ar"; +import "moment/locale/ca"; +import "moment/locale/cs"; +import "moment/locale/da"; +import "moment/locale/de"; +import "moment/locale/el"; +import "moment/locale/eo"; +import "moment/locale/es"; +import "moment/locale/fr"; +import "moment/locale/hi"; +import "moment/locale/hr"; +import "moment/locale/id"; +import "moment/locale/it"; +import "moment/locale/ja"; +import "moment/locale/ko"; +import "moment/locale/nl"; +import "moment/locale/pl"; +import "moment/locale/pt"; +import "moment/locale/ru"; +import "moment/locale/sk"; +import "moment/locale/sr"; +import "moment/locale/sv"; +import "moment/locale/tr"; +import "moment/locale/uk"; +import "moment/locale/vi"; +import "moment/locale/zh-cn"; +import "moment/locale/zh-tw"; export function setUpI18n() { return i18n @@ -25,7 +53,9 @@ export function setUpI18n() { interpolation: { escapeValue: false, // not needed for react as it escapes by default }, - }); -}; + }).then(() => { + moment.locale(i18n.language); + }) +} diff --git a/yarn.lock b/yarn.lock index b0d18eda5..8c7347272 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3700,11 +3700,6 @@ data-urls@^1.0.0, data-urls@^1.1.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -date-fns@^2.13.0: - version "2.13.0" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.13.0.tgz#d7b8a0a2d392e8d88a8024d0a46b980bbfdbd708" - integrity sha512-xm0c61mevGF7f0XpCGtDTGpzEFC/1fpLXHbmFpxZZQJuvByIK2ozm6cSYuU+nxFYOPh2EuCfzUwlTEFwKG+h5w== - debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -7238,6 +7233,11 @@ mixin-object@^2.0.1: dependencies: minimist "^1.2.5" +moment@^2.25.3: + version "2.25.3" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.25.3.tgz#252ff41319cf41e47761a1a88cab30edfe9808c0" + integrity sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"