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

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