updated react to 16.10.1 && updated react-dom to 16.10.1 changed all …

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.18.1",
     "moment": "^2.23.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1",
     "react-scripts": "2.1.3"
   },
   "scripts": {
@@ -25,6 +25,6 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "shave": "^2.5.2"
+    "shave": "^2.5.4"
   }
 }

src/components/App/index.js

@@ -1,12 +1,10 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Messenger from '../Messenger';
 
-export default class App extends Component {
-  render() {
+export default function App() {
     return (
       <div className="App">
         <Messenger />
       </div>
     );
-  }
 }

src/components/Compose/index.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './Compose.css';
 
-export default class Compose extends Component {
-  render() {
+export default function Compose(props) {
     return (
       <div className="compose">
         <input
@@ -12,9 +11,8 @@ export default class Compose extends Component {
         />
 
         {
-          this.props.rightItems
+          props.rightItems
         }
       </div>
     );
-  }
 }

src/components/ConversationList/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {useState, useEffect} from 'react';
 import ConversationSearch from '../ConversationSearch';
 import ConversationListItem from '../ConversationListItem';
 import Toolbar from '../Toolbar';
@@ -7,35 +7,25 @@ import axios from 'axios';
 
 import './ConversationList.css';
 
-export default class ConversationList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      conversations: []
-    };
-  }
-
-  componentDidMount() {
-    this.getConversations();
-  }
+export default function ConversationList(props) {
+  const [conversations, setConversations] = useState([]);
+  useEffect(() => {
+    getConversations()
+  },[])
 
-  getConversations = () => {
+ const getConversations = () => {
     axios.get('https://randomuser.me/api/?results=20').then(response => {
-      this.setState(prevState => {
-        let conversations = response.data.results.map(result => {
+        let newConversations = response.data.results.map(result => {
           return {
             photo: result.picture.large,
             name: `${result.name.first} ${result.name.last}`,
             text: 'Hello world! This is a long message that needs to be truncated.'
           };
         });
-
-        return { ...prevState, conversations };
-      });
+        setConversations([...conversations, ...newConversations])
     });
   }
 
-  render() {
     return (
       <div className="conversation-list">
         <Toolbar
@@ -49,7 +39,7 @@ export default class ConversationList extends Component {
         />
         <ConversationSearch />
         {
-          this.state.conversations.map(conversation =>
+          conversations.map(conversation =>
             <ConversationListItem
               key={conversation.name}
               data={conversation}
@@ -58,5 +48,4 @@ export default class ConversationList extends Component {
         }
       </div>
     );
-  }
 }

src/components/ConversationListItem/index.js

@@ -1,15 +1,14 @@
-import React, { Component } from 'react';
+import React, {useEffect} from 'react';
 import shave from 'shave';
 
 import './ConversationListItem.css';
 
-export default class ConversationListItem extends Component {
-  componentDidMount() {
+export default function ConversationListItem(props) {
+  useEffect(() => {
     shave('.conversation-snippet', 20);
-  }
+  })
 
-  render() {
-    const { photo, name, text } = this.props.data;
+    const { photo, name, text } = props.data;
 
     return (
       <div className="conversation-list-item">
@@ -20,5 +19,4 @@ export default class ConversationListItem extends Component {
         </div>
       </div>
     );
-  }
 }

src/components/ConversationSearch/index.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './ConversationSearch.css';
 
-export default class ConversationSearch extends Component {
-  render() {
+export default function ConversationSearch() {
     return (
       <div className="conversation-search">
         <input
@@ -12,5 +11,4 @@ export default class ConversationSearch extends Component {
         />
       </div>
     );
-  }
 }

src/components/Message/index.js

@@ -1,16 +1,15 @@
-import React, { Component } from 'react';
+import React from 'react';
 import moment from 'moment';
 import './Message.css';
 
-export default class Message extends Component {
-  render() {
+export default function Message(props) {
     const {
       data,
       isMine,
       startsSequence,
       endsSequence,
       showTimestamp
-    } = this.props;
+    } = props;
 
     const friendlyTimestamp = moment(data.timestamp).format('LLLL');
     return (
@@ -34,5 +33,4 @@ export default class Message extends Component {
         </div>
       </div>
     );
-  }
 }