Migrate from moment to date-fns and some changes

This commit is contained in:
canove
2020-07-06 18:21:08 -03:00
parent 1bc4831f8f
commit 3679c94baa
33 changed files with 430 additions and 12010 deletions

View File

@@ -3564,11 +3564,6 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4356,6 +4351,11 @@
}
}
},
"date-fns": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz",
"integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw=="
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -8579,19 +8579,6 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
},
"moment-timezone": {
"version": "0.5.31",
"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.31.tgz",
"integrity": "sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==",
"requires": {
"moment": ">= 2.9.0"
}
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10990,11 +10977,6 @@
"resolved": "https://registry.npmjs.org/react-modal-image/-/react-modal-image-2.5.0.tgz",
"integrity": "sha512-QucQrgOLmF44CD4EFDLZ9ICrbHEZwztjALgx1GsNmMWZrAtmzDLarG+T1TK2OSE4w1eHfkXtmEhQibjbt0mT2g=="
},
"react-moment": {
"version": "0.9.7",
"resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.9.7.tgz",
"integrity": "sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g=="
},
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -11101,16 +11083,6 @@
"workbox-webpack-plugin": "4.3.1"
}
},
"react-toastify": {
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.0.4.tgz",
"integrity": "sha512-ieNHqMZim/8h0NfSigWsmqly9dG4JwtTnBCq3y5UVua73Os8VyvsZkdu5CHORqXXgIe9CGIIPz4AbIiFXWkLHg==",
"requires": {
"classnames": "^2.2.6",
"prop-types": "^15.7.2",
"react-transition-group": "^4.4.1"
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

View File

@@ -9,19 +9,16 @@
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"date-fns": "^2.14.0",
"dotenv": "^8.2.0",
"emoji-mart": "^3.0.0",
"moment": "^2.26.0",
"moment-timezone": "^0.5.31",
"qrcode.react": "^1.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-infinite-scroll-reverse": "^1.0.3",
"react-modal-image": "^2.5.0",
"react-moment": "^0.9.7",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-toastify": "^6.0.4",
"socket.io-client": "^2.3.0"
},
"scripts": {

View File

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
import api from "../../../../util/api";
import openSocket from "socket.io-client";
import moment from "moment-timezone";
import { parseISO, format } from "date-fns";
import profileDefaultPic from "../../../../Images/profile_default.png";
@@ -219,9 +220,7 @@ const ContactsList = () => {
const showDesktopNotification = data => {
const options = {
body: `${data.message.messageBody} - ${moment(new Date())
.tz("America/Sao_Paulo")
.format("DD/MM/YY - HH:mm")}`,
body: `${data.message.messageBody} - ${format(new Date(), "HH:mm")}`,
icon: data.contact.profilePicUrl,
};
new Notification(`Mensagem de ${data.contact.name}`, options);
@@ -322,9 +321,7 @@ const ContactsList = () => {
variant="body2"
color="textSecondary"
>
{moment(contact.updatedAt)
.tz("America/Sao_Paulo")
.format("HH:mm")}
{format(parseISO(contact.updatedAt), "HH:mm")}
</Typography>
)}
</span>

View File

@@ -1,6 +1,11 @@
import React, { useState, useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import { isSameDay, parseISO, format } from "date-fns";
import openSocket from "socket.io-client";
import InfiniteScrollReverse from "react-infinite-scroll-reverse";
import ModalImage from "react-modal-image";
import { makeStyles } from "@material-ui/core/styles";
import AccessTimeIcon from "@material-ui/icons/AccessTime";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -18,11 +23,7 @@ import { green } from "@material-ui/core/colors";
import whatsBackground from "../../../../Images/wa-background.png";
import api from "../../../../util/api";
import openSocket from "socket.io-client";
import moment from "moment-timezone";
import InfiniteScrollReverse from "react-infinite-scroll-reverse";
import ModalImage from "react-modal-image";
import MessagesInput from "../MessagesInput/MessagesInput";
const useStyles = makeStyles(theme => ({
@@ -164,7 +165,7 @@ const useStyles = makeStyles(theme => ({
fontSize: 11,
position: "absolute",
bottom: 0,
right: 10,
right: 5,
color: "#999",
},
@@ -188,12 +189,14 @@ const useStyles = makeStyles(theme => ({
ackIcons: {
fontSize: 18,
verticalAlign: "middle",
marginLeft: 4,
},
ackDoneAllIcon: {
color: green[500],
fontSize: 18,
verticalAlign: "middle",
marginLeft: 4,
},
}));
@@ -362,32 +365,23 @@ const MessagesList = () => {
key={`timestamp-${message.id}`}
>
<div className={classes.dailyTimestampText}>
{moment(messagesList[index].createdAt)
.tz("America/Sao_Paulo")
.format("DD/MM/YY")}
{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
</div>
</span>
);
}
if (index < messagesList.length - 1) {
let messageDay = moment(messagesList[index].createdAt)
.tz("America/Sao_Paulo")
.format("DD/MM/YY");
let messageDay = parseISO(messagesList[index].createdAt);
let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
let previousMessageDay = moment(messagesList[index - 1].createdAt)
.tz("America/Sao_Paulo")
.format("DD/MM/YY");
if (messageDay > previousMessageDay) {
if (!isSameDay(messageDay, previousMessageDay)) {
return (
<span
className={classes.dailyTimestamp}
key={`timestamp-${message.id}`}
>
<div className={classes.dailyTimestampText}>
{moment(messagesList[index].createdAt)
.tz("America/Sao_Paulo")
.format("DD/MM/YY")}
{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
</div>
</span>
);
@@ -415,9 +409,7 @@ const MessagesList = () => {
<div className={classes.textContentItem}>
{message.messageBody}
<span className={classes.timestamp}>
{moment(message.createdAt)
.tz("America/Sao_Paulo")
.format("HH:mm")}
{format(parseISO(message.createdAt), "HH:mm")}
</span>
</div>
</div>,
@@ -430,9 +422,7 @@ const MessagesList = () => {
<div className={classes.textContentItem}>
{message.messageBody}
<span className={classes.timestamp}>
{moment(message.createdAt)
.tz("America/Sao_Paulo")
.format("HH:mm")}{" "}
{format(parseISO(message.createdAt), "HH:mm")}
{renderMessageAck(message)}
</span>
</div>

File diff suppressed because it is too large Load Diff