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

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