React Version Upgrade - Bug Fixes & CompatibilityFix/email upgrades

src/components/emails/compose-modal.tsx

@@ -1,71 +1,63 @@
-import React, {  Dispatch } from 'react';
+import React, { Dispatch } from 'react';
 import { Select, Form, Input, Button } from 'antd';
-import {EmailCreation, User} from '../../types';
+import { EmailCreation, User } from '../../types';
 import { connect } from 'react-redux';
-import {sendEmail} from '../../store/emails/actions';
-import {ActionTypes} from '../../store/emails/types';
-
+import { sendEmail } from '../../store/emails/actions';
+import { ActionTypes } from '../../store/emails/types';
 
 interface ComposeModal {
-  sendEmail : (data:EmailCreation) => void,
-  modalInfo ?: any,
-  emailSuccessMessage : string,
-  currentUser : User
+  sendEmail: (data: EmailCreation) => void;
+  modalInfo?: any;
+  emailSuccessMessage: string;
+  currentUser: User;
 }
 
-function ComposeModal({sendEmail, currentUser}:ComposeModal) {
-  const {email} = currentUser;
-  
-  const onFinish = (values:EmailCreation) => {
-    if(!values.body.trim()){
-      if(!window.confirm("Do you want to proceed without body ?")){
+function ComposeModal({ sendEmail, currentUser }: ComposeModal) {
+  const { email } = currentUser;
+
+  const onFinish = (values: EmailCreation) => {
+    if (!values.body?.trim()) {
+      if (!window.confirm('Do you want to proceed without body ?')) {
         return false;
       }
     }
-    sendEmail({...values, sender : email});
+    sendEmail({ ...values, sender: email });
   };
 
   return (
-  <Form name="compose-modal-form" onFinish={(values:EmailCreation) => onFinish(values)}>
-  <Form.Item label="To" name={'to'} rules={[{ required: true }]}>
-    <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode"> 
-    </Select>
-  </Form.Item>
-  <Form.Item label="Cc" name={'cc'}>
-    <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode"> 
-    </Select>
-  </Form.Item>
-  <Form.Item name={'subject'} label="Subject" rules={[{ required: true }]}>
-    <Input />
-  </Form.Item>
-  <Form.Item name={'body'} label="">
-    <Input.TextArea />
-  </Form.Item>
-  <Form.Item >
-    <Button type="primary" htmlType="submit" id="send-email-action">
-      Submit
-    </Button>
-  </Form.Item>
-</Form>)  
+    <Form name="compose-modal-form" onFinish={(values: EmailCreation) => onFinish(values)}>
+      <Form.Item label="To" name={'to'} rules={[{ required: true }]}>
+        <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" />
+      </Form.Item>
+      <Form.Item label="Cc" name={'cc'}>
+        <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" />
+      </Form.Item>
+      <Form.Item name={'subject'} label="Subject" rules={[{ required: true }]}>
+        <Input />
+      </Form.Item>
+      <Form.Item name={'body'} label="">
+        <Input.TextArea />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit" id="send-email-action">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
 }
 
-
-const mapStateToProps = ({email, auth}:any) => {
-
+const mapStateToProps = ({ email, auth }: any) => {
   return {
-    currentUser : auth.currentUser,
-    emailSuccessMessage : email.successMessage 
-  }
-}
+    currentUser: auth.currentUser,
+    emailSuccessMessage: email.successMessage,
+  };
+};
 
-const mapDispatchToProps = (dispatch:Dispatch<ActionTypes>) => {
+const mapDispatchToProps = (dispatch: Dispatch<ActionTypes>) => {
   return {
-    sendEmail : (data:EmailCreation) => dispatch(sendEmail(data)),
+    sendEmail: (data: EmailCreation) => dispatch(sendEmail(data)),
   };
 };
 
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ComposeModal);
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeModal);

src/components/emails/list.tsx

@@ -1,68 +1,66 @@
-import React, { useState, Dispatch, useEffect } from 'react';
+import React, { useState, Dispatch } from 'react';
 import { Table, Button } from 'antd';
-import { Redirect, useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { connect } from 'react-redux';
-import {includes} from 'lodash';
+import { includes } from 'lodash';
 import './list.css';
-import {ParamTypes} from '../../types';
-import {emailListColumns, emailListFirstColumn} from './config';
-import {deleteEmail} from '../../store/emails/actions';
-import {ActionTypes} from '../../store/emails/types';
+import { emailListColumns, emailListFirstColumn } from './config';
+import { deleteEmail } from '../../store/emails/actions';
+import { ActionTypes } from '../../store/emails/types';
 
-function EmailList({emails, deleteEmail}:any) {
-    const rhist:any = useHistory();
-    let { emailAction } = useParams<ParamTypes>();
-    const  firstColumn  = emailListFirstColumn[emailAction] || {};
-    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-    const onSelectChange = (selectedRowKeys:any) => {
-      setSelectedRowKeys(selectedRowKeys);
-    }
+function EmailList({ emails, deleteEmail }: any) {
+  const navigate = useNavigate();
+  let { emailAction } = useParams<{ emailAction: string }>();
+  const firstColumn = emailListFirstColumn[emailAction!] || {};
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
-    const deleteAnEmail = () => {
-      const emailList = emails
-      .filter((email:any, index:number) => includes(selectedRowKeys, index))
-      .map(({emailUuid}:any) => emailUuid)
-      deleteEmail(emailList);
-      setSelectedRowKeys([]);
-    }
-
-
+  const onSelectChange = (selectedRowKeys: any) => {
+    setSelectedRowKeys(selectedRowKeys);
+  };
 
+  const deleteAnEmail = () => {
+    const emailList = emails
+      .filter((email: any, index: number) => includes(selectedRowKeys, index))
+      .map(({ emailUuid }: any) => emailUuid);
+    deleteEmail(emailList);
+    setSelectedRowKeys([]);
+  };
 
-    return (
-      <>
-        <Button onClick={() => deleteAnEmail()} className='delete-action' disabled={!selectedRowKeys.length}>Delete</Button>
-        <Table rowSelection={{
-          selectedRowKeys,
-          onChange: onSelectChange,
-        }}
-        rowClassName = {({readClass}, index) => (readClass || "")}
-        rowKey={({index}) => index}
-        onRow={({emailUuid}, rowIndex) => {
-          return {
-            onClick: event => rhist.push(`/dashboard/${emailAction}/view/${emailUuid}`)
-          }
-        }}
-        columns={[firstColumn, ...emailListColumns]} dataSource={emails} />
-      </>
-    );
+  return (
+    <>
+      <Button
+        onClick={() => deleteAnEmail()}
+        className='delete-action'
+        disabled={!selectedRowKeys.length}
+      >
+        Delete
+      </Button>
+      <Table
+        rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
+        rowClassName={({ readClass }, index) => readClass || ""}
+        rowKey={({ index }) => index}
+        onRow={({ emailUuid }, rowIndex) => ({
+          onClick: event => navigate(`/dashboard/${emailAction}/view/${emailUuid}`)
+        })}
+        columns={[firstColumn, ...emailListColumns]}
+        dataSource={emails}
+      />
+    </>
+  );
 }
 
+const mapDispatchToProps = (dispatch: Dispatch<ActionTypes>) => {
+  return {
+    deleteEmail: (emailUuids: string[]) => dispatch(deleteEmail(emailUuids)),
+  };
+};
 
 
-const mapDispatchToProps = (dispatch:Dispatch<ActionTypes>) => {
+const mapStateToProps = ({ email, auth }: any) => {
   return {
-    deleteEmail : (emailUuids:string[]) => dispatch(deleteEmail(emailUuids)),
+    currentUser: auth.currentUser,
+    emails: email.emails,
   };
 };
 
-const mapStateToProps = ({email, auth}:any) => {
-  return {
-    currentUser : auth.currentUser,
-    emails : email.emails,
-  }
-}
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(EmailList);
+export default connect(mapStateToProps, mapDispatchToProps)(EmailList);