fix(locale): use dayjs instead of moment and show correct locale

Close #1854
erxes · May 26, 2020 · 5868c77 · 5868c77
1 parent 161f635
commit 5868c77
Show file tree

Hide file tree

Showing 16 changed files with 434 additions and 259 deletions.
diff --git a/widgets/client/form/components/Field.tsx b/widgets/client/form/components/Field.tsx
@@ -1,6 +1,5 @@
-import * as moment from "moment";
+import Datetime from "@nateradebaugh/react-datetime";
 import * as React from "react";
-import DatePicker from "react-datepicker";
 import uploadHandler from "../../uploadHandler";
 import { FieldValue, IField, IFieldError } from "../types";
 
@@ -11,7 +10,7 @@ type Props = {
 };
 
 type State = {
-  dateValue: moment.Moment | null;
+  dateValue: Date | string;
   isAttachingFile?: boolean;
 };
 
@@ -88,7 +87,7 @@ export default class Field extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      dateValue: null
+      dateValue: ""
     };
   }
 
@@ -129,9 +128,9 @@ export default class Field extends React.Component<Props, State> {
     }
   };
 
-  onDateChange = (momentObj: moment.Moment) => {
-    this.setState({ dateValue: momentObj });
-    this.onChange(momentObj.toDate());
+  onDateChange = (date?: Date | string) => {
+    this.setState({ dateValue: date || "" });
+    this.onChange(date || "");
   };
 
   onRadioButtonsChange = (e: React.FormEvent<HTMLInputElement>) => {
@@ -166,11 +165,11 @@ export default class Field extends React.Component<Props, State> {
 
   renderDatepicker() {
     return (
-      <DatePicker
-        selected={this.state.dateValue}
+      <Datetime
+        value={this.state.dateValue}
+        defaultValue={new Date()}
+        viewDate={new Date()}
         onChange={this.onDateChange}
-        className="form-control"
-        showTimeSelect={true}
         timeFormat="HH:mm"
         dateFormat="YYYY/MM/DD HH:mm"
       />

diff --git a/widgets/client/form/sass/components/_datepicker.scss b/widgets/client/form/sass/components/_datepicker.scss
@@ -1,37 +1,3 @@
-.erxes-form {
-  .react-datepicker__input-container {
-    display: block;
-  }
-}
-
-.react-datepicker-wrapper {
-  display: block;
-}
-
-.react-datepicker {
-  border-color: $border-color !important;
-  box-shadow: 0 5px 15px -3px rgba($black, .15);
-
-  .react-datepicker__day--selected,
-  .react-datepicker__day--keyboard-selected {
-    background-color: $main-color;
-    border-radius: $border-radius / 2;
-
-    &:hover {
-      background-color: darken($main-color, 10%);
-    }
-  }
-
-  .react-datepicker__header {
-    background: $bg-color;
-    border-color: $border-color;
-  }
-
-  .react-datepicker__triangle {
-    border-bottom-color: $bg-color !important;
-
-    &::before {
-      border-bottom-color: $border-color !important;
-    }
-  }
+.rdt {
+  display: block !important;
 }
diff --git a/widgets/client/form/sass/style.scss b/widgets/client/form/sass/style.scss
@@ -1,6 +1,3 @@
-
-@import '~react-datepicker/dist/react-datepicker.css';
-
 @import 'client/sass/variables';
 @import 'client/sass/mixin';
 

diff --git a/widgets/client/knowledgebase/components/Article.tsx b/widgets/client/knowledgebase/components/Article.tsx
@@ -1,4 +1,4 @@
-import * as moment from "moment";
+import * as dayjs from "dayjs";
 import * as React from "react";
 import { defaultAvatar } from "../../icons/Icons";
 import { __, readFile } from "../../utils";
@@ -45,7 +45,7 @@ export default class Article extends React.Component<Props> {
             <div>
               {article.modifiedDate ? __("Modified ") : __("Created ")}
               <span>
-                {moment(
+                {dayjs(
                   article.modifiedDate
                     ? article.modifiedDate
                     : article.createdDate

diff --git a/widgets/client/knowledgebase/components/ArticleDetail.tsx b/widgets/client/knowledgebase/components/ArticleDetail.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import * as moment from "moment";
+import * as dayjs from "dayjs";
 import * as React from "react";
 import { defaultAvatar } from "../../icons/Icons";
 import { __, makeClickableLink, readFile } from "../../utils";
@@ -118,7 +118,7 @@ export default class ArticleDetail extends React.PureComponent<
               <div>
                 {modifiedDate ? __("Modified ") : __("Created ")}
                 <span>
-                  {moment(modifiedDate ? modifiedDate : createdDate).format(
+                  {dayjs(modifiedDate ? modifiedDate : createdDate).format(
                     "lll"
                   )}
                 </span>

diff --git a/widgets/client/knowledgebase/index.tsx b/widgets/client/knowledgebase/index.tsx
@@ -1,3 +1,6 @@
+import * as dayjs from "dayjs";
+import * as localizedFormat from "dayjs/plugin/localizedFormat";
+import * as relativeTime from "dayjs/plugin/relativeTime";
 import "erxes-icon/css/erxes.min.css";
 
 import * as React from "react";
@@ -8,6 +11,9 @@ import { connection } from "./connection";
 import { KnowledgeBase } from "./containers";
 import "./sass/style.scss";
 
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);
+
 const render = () => {
   // render root react component
   ReactDOM.render(

diff --git a/widgets/client/messenger/components/ConversationItem.tsx b/widgets/client/messenger/components/ConversationItem.tsx
@@ -1,5 +1,5 @@
 import * as classNames from "classnames";
-import * as moment from "moment";
+import * as dayjs from "dayjs";
 import * as React from "react";
 import { defaultAvatar } from "../../icons/Icons";
 import { __, readFile, striptags } from "../../utils";
@@ -45,9 +45,9 @@ function ConversationItem({
       <div className="erxes-right-side">
         <div
           className="erxes-date erxes-tooltip"
-          data-tooltip={moment(createdAt).format("YYYY-MM-DD, HH:mm:ss")}
+          data-tooltip={dayjs(createdAt).format("YYYY-MM-DD, HH:mm:ss")}
         >
-          {moment(createdAt).format("LT")}
+          {dayjs(createdAt).format("LT")}
         </div>
         <div className="erxes-name">{fullName}</div>
         <div className="erxes-last-message">{striptags(content)}</div>

diff --git a/widgets/client/messenger/components/Home.tsx b/widgets/client/messenger/components/Home.tsx
@@ -1,5 +1,5 @@
 import * as classNames from "classnames";
-import * as moment from "moment";
+import * as dayjs from "dayjs";
 import * as React from "react";
 import * as RTG from "react-transition-group";
 import { facebook, twitter, youtube } from "../../icons/Icons";
@@ -96,7 +96,7 @@ class Home extends React.Component<Props, State> {
 
     return (
       <div className="assist-bar">
-        <time>{moment(new Date()).format("lll")}</time>
+        <time>{dayjs(new Date()).format("lll")}</time>
         <div className="socials">
           <SocialLink url={links.facebook} icon={facebook} />
           <SocialLink url={links.twitter} icon={twitter} />

diff --git a/widgets/client/messenger/components/Message.tsx b/widgets/client/messenger/components/Message.tsx
@@ -1,15 +1,15 @@
-import * as classNames from 'classnames';
-import * as moment from 'moment';
-import * as React from 'react';
-import * as xss from 'xss';
-import { defaultAvatar } from '../../icons/Icons';
-import { IUser } from '../../types';
-import { readFile } from '../../utils';
-import { Attachment, User } from '../components/common';
-import { MESSAGE_TYPES } from '../containers/AppContext';
-import { IAttachment, IMessengerAppData, IVideoCallData } from '../types';
-import VideoCallMessage from './VideoCallMessage';
-import VideoCallRequest from './VideoCallRequest';
+import * as classNames from "classnames";
+import * as dayjs from "dayjs";
+import * as React from "react";
+import * as xss from "xss";
+import { defaultAvatar } from "../../icons/Icons";
+import { IUser } from "../../types";
+import { readFile } from "../../utils";
+import { Attachment, User } from "../components/common";
+import { MESSAGE_TYPES } from "../containers/AppContext";
+import { IAttachment, IMessengerAppData, IVideoCallData } from "../types";
+import VideoCallMessage from "./VideoCallMessage";
+import VideoCallRequest from "./VideoCallRequest";
 
 type Props = {
   content: string;
@@ -26,7 +26,7 @@ class Message extends React.Component<Props> {
   renderMessengerAppMessage() {
     const { messengerAppData } = this.props;
     const image = messengerAppData.customer.avatar || defaultAvatar;
-    const name = messengerAppData.customer.firstName || 'N/A';
+    const name = messengerAppData.customer.firstName || "N/A";
 
     return (
       <div className="app-message-box">
@@ -71,19 +71,19 @@ class Message extends React.Component<Props> {
       contentType,
       videoCallData
     } = this.props;
-    const messageClasses = classNames('erxes-message', {
+    const messageClasses = classNames("erxes-message", {
       attachment: attachments && attachments.length > 0,
-      'from-customer': !user
+      "from-customer": !user
     });
 
     const messageBackground = {
-      backgroundColor: !user ? color : ''
+      backgroundColor: !user ? color : ""
     };
 
     if (contentType === MESSAGE_TYPES.VIDEO_CALL) {
       return (
         <VideoCallMessage
-          videoCallData={videoCallData || { status: 'end', url: '' }}
+          videoCallData={videoCallData || { status: "end", url: "" }}
         />
       );
     }
@@ -106,7 +106,7 @@ class Message extends React.Component<Props> {
 
   render() {
     const { user, createdAt } = this.props;
-    const itemClasses = classNames({ 'from-customer': !user });
+    const itemClasses = classNames({ "from-customer": !user });
 
     return (
       <li className={itemClasses}>
@@ -115,9 +115,9 @@ class Message extends React.Component<Props> {
         <div className="date">
           <span
             className="erxes-tooltip"
-            data-tooltip={moment(createdAt).format('YYYY-MM-DD, HH:mm:ss')}
+            data-tooltip={dayjs(createdAt).format("YYYY-MM-DD, HH:mm:ss")}
           >
-            {moment(createdAt).format('LT')}
+            {dayjs(createdAt).format("LT")}
           </span>
         </div>
       </li>

diff --git a/widgets/client/messenger/components/faq/ArticleDetail.tsx b/widgets/client/messenger/components/faq/ArticleDetail.tsx
@@ -1,4 +1,4 @@
-import * as moment from "moment";
+import * as dayjs from "dayjs";
 import * as React from "react";
 import { iconLeft } from "../../../icons/Icons";
 import { __, makeClickableLink } from "../../../utils";
@@ -49,7 +49,7 @@ export default class ArticleDetail extends React.PureComponent<Props> {
               <h2>{title}</h2>
               <div className="date">
                 {__("Created ")}:{" "}
-                <span>{moment(createdDate).format("lll")}</span>
+                <span>{dayjs(createdDate).format("lll")}</span>
               </div>
               <p>{summary}</p>
               <p dangerouslySetInnerHTML={{ __html: content }} />

diff --git a/widgets/client/messenger/sass/style.scss b/widgets/client/messenger/sass/style.scss
@@ -1,5 +1,3 @@
-@import '~react-datepicker/dist/react-datepicker.css';
-
 @import 'client/sass/variables';
 @import 'client/sass/mixin';
 

diff --git a/widgets/client/utils.ts b/widgets/client/utils.ts
@@ -1,6 +1,5 @@
+import * as dayjs from "dayjs";
 import T from "i18n-react";
-import * as moment from "moment";
-import "moment/locale/mn";
 import { ENV, IBrowserInfo, IRule } from "./types";
 
 export const getEnv = (): ENV => {
@@ -109,15 +108,17 @@ export const requestBrowserInfo = ({
   });
 };
 
-export const setMomentLocale = (code: string) => {
-  moment.locale(code);
+const setDayjsLocale = (code: string) => {
+  import(`dayjs/locale/${code}`)
+    .then(() => dayjs.locale(code))
+    .catch(() => dayjs.locale("en"));
 };
 
 export const setLocale = (code?: string) => {
   import(`../locales/${code}.json`)
     .then(translations => {
       T.setTexts(translations);
-      setMomentLocale(code || "en");
+      setDayjsLocale(code || "en");
     })
     .catch(e => console.log(e)); // tslint:disable-line
 };

diff --git a/widgets/client/widgetConnect.js b/widgets/client/widgetConnect.js
@@ -1,8 +1,15 @@
+import "@nateradebaugh/react-datetime/css/react-datetime.css";
 import * as React from 'react';
+import * as dayjs from "dayjs";
+import * as localizedFormat from "dayjs/plugin/localizedFormat";
+import * as relativeTime from "dayjs/plugin/relativeTime";
 import * as ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
 import client from './apollo-client';
 
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);
+
 // base connect function for all widgets
 const widgetConnect = (params) => {
   const {

diff --git a/widgets/package.json b/widgets/package.json
@@ -37,6 +37,7 @@
     ]
   },
   "dependencies": {
+    "@nateradebaugh/react-datetime": "^4.0.0-rc.10",
     "@types/react-transition-group": "^2.0.14",
     "add-graphql-subscriptions": "^1.0.1",
     "ajv": "^6.10.2",
@@ -51,6 +52,7 @@
     "body-parser": "^1.15.2",
     "classnames": "^2.2.5",
     "cors": "^2.8.3",
+    "dayjs": "^1.8.27",
     "dotenv": "^4.0.0",
     "dotenv-webpack": "^1.7.0",
     "ejs": "^2.5.6",
@@ -59,10 +61,8 @@
     "graphql": "^0.12.3",
     "graphql-tag": "^2.6.1",
     "i18n-react": "^0.6.4",
-    "moment": "^2.21.0",
     "react": "16.4.2",
     "react-apollo": "^2.1.9",
-    "react-datepicker": "^1.4.1",
     "react-dom": "16.4.2",
     "react-transition-group": "^2.4.0",
     "subscriptions-transport-ws": "^0.9.14",
@@ -74,7 +74,6 @@
     "@types/dotenv": "^4.0.3",
     "@types/express": "^4.16.0",
     "@types/react": "^16.4.7",
-    "@types/react-datepicker": "^1.1.5",
     "@types/react-dom": "^16.0.6",
     "@types/react-i18next": "^7.8.0",
     "@types/ws": "^5.1.2",
@@ -97,7 +96,7 @@
     "tslint-config-standard": "^7.1.0",
     "tslint-react": "^3.6.0",
     "typescript": "^2.9.2",
-    "uglifyjs-webpack-plugin": "v1.0.0-beta.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^1.0.1",
     "webpack": "4.16.3",
     "webpack-cli": "^3.1.0",

diff --git a/widgets/webpack.prod.config.js b/widgets/webpack.prod.config.js
@@ -5,7 +5,6 @@ const CommonConfig = require('./webpack.config');
 
 module.exports = Merge(CommonConfig, {
   plugins: [
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       debug: false,
@@ -23,12 +22,10 @@ module.exports = Merge(CommonConfig, {
           beautify: false,
         },
         compress: {
-          warnings: false,
           pure_getters: true,
           unsafe: true,
           unsafe_comps: true,
         },
-        warnings: false,
       },
     }),
   ],