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>

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

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

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<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/>
+                        <FontAwesomeIcon icon="clock"/> {moment(lastVisited).fromNow()}<br/>
-                        {format(lastVisited, 'EEE, LLL d, YYY h:mm a')}
+                        {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>
     )
-}
+}

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<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>
     )
-}
+}

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

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

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"