From c0906f7c21faa0910c6caf3539164e730c677d3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Mon, 23 Aug 2021 09:32:55 -1000 Subject: [PATCH] Remove moment to use timeago.js Moment is huge, timeago.js is tiny ! --- frontend/js/components/admins/user.js | 6 ++--- frontend/js/components/details/releaseDate.js | 17 +++++++----- frontend/js/components/users/tokens.js | 9 ++++--- frontend/package-lock.json | 27 +++++++++---------- frontend/package.json | 2 +- 5 files changed, 34 insertions(+), 27 deletions(-) diff --git a/frontend/js/components/admins/user.js b/frontend/js/components/admins/user.js index 6d47286..6c5ffda 100644 --- a/frontend/js/components/admins/user.js +++ b/frontend/js/components/admins/user.js @@ -1,14 +1,14 @@ import React from "react"; -import moment from "moment"; import PropTypes from "prop-types"; import { useSelector } from "react-redux"; +import { format } from "timeago.js"; import { UserEdit } from "./userEdit"; export const User = ({ id }) => { const user = useSelector((state) => state.admin.users.get(id)); const polochon = user.polochon; - const lastSeen = moment(user.last_seen, "YYYY-MM-DDTHH:mm:ss.SZ"); + const lastSeen = new Date(user.last_seen); return ( @@ -33,7 +33,7 @@ export const User = ({ id }) => { } > - {lastSeen.isValid() ? lastSeen.fromNow() : "-"} + {isNaN(lastSeen) ? "-" : format(lastSeen)} diff --git a/frontend/js/components/details/releaseDate.js b/frontend/js/components/details/releaseDate.js index 0975a34..b4b3d22 100644 --- a/frontend/js/components/details/releaseDate.js +++ b/frontend/js/components/details/releaseDate.js @@ -1,21 +1,26 @@ import React from "react"; import PropTypes from "prop-types"; -import moment from "moment"; +import { format } from "timeago.js"; const prettyDate = (input) => { if (typeof input !== "string" || input === "") { return input; } - const date = moment(input, "YYYY-MM-DD HH:mm:ss Z"); - if (!date.isValid()) { + const date = new Date(input); + if (isNaN(date)) { return ""; } - let output = date.format("DD/MM/YYYY"); + const dd = date.getDay().toString().padStart(2, "0"); + const mm = date.getMonth().toString().padStart(2, "0"); + const yyyy = date.getFullYear(); + let output = `${dd}/${mm}/${yyyy}`; - if (date > moment().subtract(1, "month") && date < moment().add(1, "month")) { - output += " (" + date.fromNow() + ")"; + const now = new Date(); + const days = Math.abs((now - date) / (24 * 60 * 60 * 1000)); + if (days < 31) { + output += ` (${format(date)})`; } return output; diff --git a/frontend/js/components/users/tokens.js b/frontend/js/components/users/tokens.js index 2d4c415..4f2380f 100644 --- a/frontend/js/components/users/tokens.js +++ b/frontend/js/components/users/tokens.js @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import PropTypes from "prop-types"; import { useDispatch, useSelector } from "react-redux"; import { UAParser } from "ua-parser-js"; -import moment from "moment"; +import { format } from "timeago.js"; import { getUserTokens, deleteUserToken } from "../../actions/users"; @@ -27,6 +27,9 @@ export const UserTokens = () => { const Token = ({ token }) => { const ua = UAParser(token.user_agent); + const lastUsed = new Date(token.last_used); + const createdAt = new Date(token.created_at); + return (
@@ -39,8 +42,8 @@ const Token = ({ token }) => {

Last IP: {token.ip}

-

Last used: {moment(token.last_used).fromNow()}

-

Created: {moment(token.created_at).fromNow()}

+

Last used: {isNaN(lastUsed) ? "-" : format(lastUsed)}

+

Created: {isNaN(createdAt) ? "-" : format(createdAt)}

diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4d4bf31..4030b1e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,7 +14,6 @@ "immer": "^9.0.5", "jquery": "^3.6.0", "jwt-decode": "^3.1.2", - "moment": "^2.29.1", "popper.js": "^1.15.0", "prop-types": "^15.7.2", "react": "^17.0.2", @@ -54,6 +53,7 @@ "sass": "^1.37.5", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", + "timeago.js": "^4.0.2", "universal-cookie": "^4.0.4", "webpack": "^5.50.0", "webpack-cli": "^4.7.2", @@ -6138,14 +6138,6 @@ "mkdirp": "bin/cmd.js" } }, - "node_modules/moment": { - "version": "2.29.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", - "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", - "engines": { - "node": "*" - } - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -8270,6 +8262,12 @@ "node": ">=8" } }, + "node_modules/timeago.js": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz", + "integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==", + "dev": true + }, "node_modules/timm": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz", @@ -13691,11 +13689,6 @@ "minimist": "^1.2.5" } }, - "moment": { - "version": "2.29.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", - "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" - }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -15306,6 +15299,12 @@ "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==" }, + "timeago.js": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz", + "integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==", + "dev": true + }, "timm": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index d4a6910..f885081 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,7 +14,6 @@ "immer": "^9.0.5", "jquery": "^3.6.0", "jwt-decode": "^3.1.2", - "moment": "^2.29.1", "popper.js": "^1.15.0", "prop-types": "^15.7.2", "react": "^17.0.2", @@ -54,6 +53,7 @@ "sass": "^1.37.5", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", + "timeago.js": "^4.0.2", "universal-cookie": "^4.0.4", "webpack": "^5.50.0", "webpack-cli": "^4.7.2",