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 <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2020-05-16 15:42:02 +02:00 committed by GitHub
parent 194199aee1
commit aedd86fbed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 51 additions and 17 deletions

View file

@ -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",

View file

@ -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<HTMLSelectElement>) => {
moment.locale(event.currentTarget.value);
i18n.changeLanguage(event.currentTarget.value);
}

View file

@ -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<HistoryInput> = ({pinned, title, lastVisited, tags, onPinChange}) => {
useTranslation()
return (
<div className="p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4">
<Card className="p-0" text={"dark"} bg={"light"}>
@ -18,8 +20,8 @@ export const HistoryCard: React.FC<HistoryInput> = ({pinned, title, lastVisited,
</div>
<Card.Body>
<div className="text-black-50">
<FontAwesomeIcon icon="clock"/> {formatDistance(lastVisited, new Date())}<br/>
{format(lastVisited, 'EEE, LLL d, YYY h:mm a')}
<FontAwesomeIcon icon="clock"/> {moment(lastVisited).fromNow()}<br/>
{moment(lastVisited).format("llll")}
<div children=
{
tags.map((tag) => <Badge variant={"dark"} key={tag}>{tag}</Badge>)
@ -30,4 +32,4 @@ export const HistoryCard: React.FC<HistoryInput> = ({pinned, title, lastVisited,
</Card>
</div>
)
}
}

View file

@ -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<HistoryInput> = ({pinned, title, lastVisited, onPinChange}) => {
return (
<tr>
<td>{title}</td>
<td>{format(lastVisited, 'EEE, LLL d, YYY h:mm a')}</td>
<td>{moment(lastVisited).format("llll")}</td>
<td>
<PinButton pin={pinned} onPinChange={onPinChange}/>
&nbsp;
@ -16,4 +16,4 @@ export const HistoryTableRow: React.FC<HistoryInput> = ({pinned, title, lastVisi
</td>
</tr>
)
}
}

View file

@ -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,
}

View file

@ -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);
})
}

View file

@ -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"