TS: rewrite Messages List

web/src/actions/messages.ts

@@ -28,7 +28,7 @@ export const fetchMessagesStatus = (status: boolean) => ({
 });
 
 // Toggle message read
-export const messageToggle = (id: number) => async (dispatch: AppDispatch) => {
+export const messageToggle = (id: string) => async (dispatch: AppDispatch) => {
    try {
       const message = await toggleMessageRead(id);
 
@@ -41,7 +41,7 @@ export const messageToggle = (id: number) => async (dispatch: AppDispatch) => {
 };
 
 // Remove message
-export const messageRemove = (id: number) => async (dispatch: AppDispatch) => {
+export const messageRemove = (id: string) => async (dispatch: AppDispatch) => {
    try {
       const message = await removeMessage(id);
 

web/src/api/messages.ts

@@ -7,7 +7,7 @@ export const getMyMessages = () => callAPI(`/messages/my`);
 export const getSingleMessage = (id: number) => callAPI(`/messages/${id}`);
 
 // Toggle message read
-export const toggleMessageRead = (id: number) => callAPI(`/messages/${id}/toggle-read`, 'put');
+export const toggleMessageRead = (id: string) => callAPI(`/messages/${id}/toggle-read`, 'put');
 
 // Remove message
-export const removeMessage = (id: number) => callAPI(`/messages/${id}`, 'delete');
+export const removeMessage = (id: string) => callAPI(`/messages/${id}`, 'delete');

web/src/components/Messages/List/index.tsx

@@ -1,72 +1,63 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
+import React, { useState } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { useAppSelector, useAppDispatch } from '@hooks';
+
 import * as actions from 'actions';
 import MessagesListEl from '../ListElement';
 
-class MessagesList extends Component {
-   constructor(props) {
-      super(props);
-
-      this.state = {
-         search: ''
-      };
-   }
-
-   findMessage = () => {
-      this.setState({ search: this.refs.search.value });
-   };
-
-   render() {
-      // Messages
-      // Allow search by message title
-      const searchText = this.state.search.toLowerCase();
-      const messagesList = this.props.messages
-         .filter(message => message.title.toLowerCase().includes(searchText))
-         .map(message => (
-            <MessagesListEl
-               key={message._id}
-               {...message}
-               matchUrl={this.props.match.url}
-               onToggle={this.props.messageToggle}
-               onRemove={this.props.messageRemove}
-            />
-         ));
-
-      return (
-         <Fragment>
-            <h1>Messages</h1>
-
-            <p>There are {this.props.messages.length} messages in your box</p>
-
-            <div className="form-group">
-               <input
-                  className="form-control"
-                  placeholder="Search for..."
-                  onChange={this.findMessage}
-                  ref="search"
-               />
-            </div>
-
-            <div className="list-group">{messagesList}</div>
-         </Fragment>
-      );
-   }
+interface Props extends RouteComponentProps {
+   messages: {
+      _id: string;
+      title: string;
+      isRead: boolean;
+      sentDate: Date;
+   }[];
 }
 
-const mapStateToProps = state => {
-   return {
-      messages: state.messages.data
-   };
-};
+const MessagesList: React.FC<Props> = (props) => {
+   const dispatch = useAppDispatch();
+
+   const [search, setSearch] = useState('');
+
+   const messages = useAppSelector((state) => state.messages.data);
+
+   const messageToggle = (id: string) => dispatch(actions.messageToggle(id));
+   const messageRemove = (id: string) => dispatch(actions.messageRemove(id));
+   const findMessage = (value: string) => setSearch(value);
+
+   // Messages
+   // Allow search by message title
+   const searchText = search.toLowerCase();
+   const messagesList = props.messages
+      .filter((message) => message.title.toLowerCase().includes(searchText))
+      .map((message) => (
+         <MessagesListEl
+            {...message}
+            key={message._id}
+            matchUrl={props.match.url}
+            onToggle={() => messageToggle(message._id)}
+            onRemove={() => messageRemove(message._id)}
+         />
+      ));
+
+   return (
+      <>
+         <h1>Messages</h1>
+
+         <p>There are {messages.length} messages in your box</p>
+
+         <div className="form-group">
+            <input
+               className="form-control"
+               placeholder="Search for..."
+               onChange={(e) => findMessage(e.target.value)}
+               ref="search"
+            />
+         </div>
 
-const mapDispatchToProps = dispatch => {
-   return {
-      messageToggle: id => dispatch(actions.messageToggle(id)),
-      messageRemove: id => dispatch(actions.messageRemove(id))
-   };
+         <div className="list-group">{messagesList}</div>
+      </>
+   );
 };
 
-export default connect(
-   mapStateToProps,
-   mapDispatchToProps
-)(MessagesList);
+export default MessagesList;