React.PureComponent used to key components (Message, etc.)

Author: abdurrahmanekr

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.12.0",
+  "version": "10.13.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

src/Avatar/Avatar.js

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './Avatar.css';
 
 const classNames = require('classnames');
 
 const loadedAvatars = [];
 
-export class Avatar extends Component {
+export class Avatar extends React.PureComponent {
     constructor(props) {
         super(props);
 

src/FileMessage/FileMessage.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './FileMessage.css';
 
 import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
@@ -8,7 +8,7 @@ import FaFile from 'react-icons/lib/fa/file';
 const ProgressBar = require('react-progress-bar.js');
 const Circle = ProgressBar.Circle;
 
-export class FileMessage extends Component {
+export class FileMessage extends React.PureComponent {
 
     onClick(e) {
         if (!this.props.data.status)

src/LocationMessage/LocationMessage.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './LocationMessage.css';
 
 const classNames = require('classnames');
 
 const STATIC_URL = 'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY';
 const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM';
 
-export class LocationMessage extends Component {
+export class LocationMessage extends React.PureComponent {
     constructor(props) {
         super(props);
 

src/MeetingMessage/MeetingMessage.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './MeetingMessage.css';
 
 import FaCalendar from 'react-icons/lib/fa/calendar';
@@ -17,7 +17,7 @@ import Dropdown from '../Dropdown/Dropdown';
 
 import classNames from 'classnames';
 
-export class MeetingMessage extends Component {
+export class MeetingMessage extends React.PureComponent {
     constructor(props) {
         super(props);
 

src/MessageBox/MessageBox.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './MessageBox.css';
 
 import PhotoMessage from '../PhotoMessage/PhotoMessage';
@@ -25,7 +25,7 @@ import {
 
 import classNames from 'classnames';
 
-export class MessageBox extends Component {
+export class MessageBox extends React.PureComponent {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (nextProps.focus !== this.props.focus && nextProps.focus === true) {
             if (this.refs['message']) {

src/PhotoMessage/PhotoMessage.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import './PhotoMessage.css';
 
@@ -8,7 +8,7 @@ import FaError from 'react-icons/lib/fa/exclamation-triangle';
 const ProgressBar = require('react-progress-bar.js');
 const Circle = ProgressBar.Circle;
 
-export class PhotoMessage extends Component {
+export class PhotoMessage extends React.PureComponent {
     render() {
         var progressOptions = {
             strokeWidth: 2.3,

src/SpotifyMessage/SpotifyMessage.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './SpotifyMessage.css';
 
 const classNames = require('classnames');
 
-export class SpotifyMessage extends Component {
+export class SpotifyMessage extends React.PureComponent {
     toUrl() {
         var formBody = [];
         var data = {

src/SystemMessage/SystemMessage.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './SystemMessage.css';
 
 const classNames = require('classnames');
 
-export class SystemMessage extends Component {
+export class SystemMessage extends React.PureComponent {
     render() {
         return (
             <div className={classNames("rce-container-smsg", this.props.className)}>