From aec5d889a81b5a8f8eb11a2de8c9bbd66b46a7e7 Mon Sep 17 00:00:00 2001
From: Matthew Trontz <mtrontz@trontzenterprises.com>
Date: Fri, 15 Oct 2021 01:05:53 -0400
Subject: [PATCH] 1

---
 .../MessageBrowser/MessageBrowser.js          |  56 +++++-----
 .../MessageBrowser/MessageListItem.js         | 105 +++++++++---------
 src/components/MessageDetail/MessageDetail.js |  73 ++++++------
 src/index.js                                  |   5 +-
 4 files changed, 122 insertions(+), 117 deletions(-)

diff --git a/src/components/MessageBrowser/MessageBrowser.js b/src/components/MessageBrowser/MessageBrowser.js
index 5adb8e2..b735199 100644
--- a/src/components/MessageBrowser/MessageBrowser.js
+++ b/src/components/MessageBrowser/MessageBrowser.js
@@ -1,34 +1,34 @@
 import React from 'react';
-import classnames from 'classnames';
+
 import { Sidebar } from './Sidebar';
 import { SearchInput } from './SearchInput';
 import { MessageList } from './MessageList';
 
 export const MessageBrowser = (props) => {
-  return (
-    <div className="columns">
-      <div className="column is-third">
-        <Sidebar
-          filterFlagged={props.filterFlagged}
-          updateFilterFlagged={props.updateFilterFlagged}
-          sentOrder={props.sentOrder}
-          updateSentOrder={props.updateSentOrder}
-        />
-      </div>
-      <div className="column">
-        <SearchInput
-          value={props.searchText}
-          onChange={props.updateSearchText}
-          loading={props.loading}
-        />
-        <MessageList
-          messages={props.messages}
-          loading={props.loading}
-          loadMore={props.loadMore}
-          deleteMessage={props.deleteMessage}
-          toggleMessageFlagged={props.toggleMessageFlagged}
-        />
-      </div>
-    </div>
-  );
-};
+    return ( <
+        div className = "columns" >
+        <
+        div className = "column is-third" >
+        <
+        Sidebar filterFlagged = { props.filterFlagged }
+        updateFilterFlagged = { props.updateFilterFlagged }
+        sentOrder = { props.sentOrder }
+        updateSentOrder = { props.updateSentOrder }
+        /> <
+        /div> <
+        div className = "column" >
+        <
+        SearchInput value = { props.searchText }
+        onChange = { props.updateSearchText }
+        loading = { props.loading }
+        /> <
+        MessageList messages = { props.messages }
+        loading = { props.loading }
+        loadMore = { props.loadMore }
+        deleteMessage = { props.deleteMessage }
+        toggleMessageFlagged = { props.toggleMessageFlagged }
+        /> <
+        /div> <
+        /div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/MessageBrowser/MessageListItem.js b/src/components/MessageBrowser/MessageListItem.js
index 5dd9a0d..045f44d 100644
--- a/src/components/MessageBrowser/MessageListItem.js
+++ b/src/components/MessageBrowser/MessageListItem.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import classnames from 'classnames';
 import { Link } from 'react-router';
+import classnames from 'classnames';
 import { Icon } from '../Icon';
 
 const makeEventKiller = fn => event => {
-  event.preventDefault();
-  event.stopPropagation();
-  fn();
+    event.preventDefault();
+    event.stopPropagation();
+    fn();
 };
 
 /**
@@ -16,56 +16,57 @@ const makeEventKiller = fn => event => {
  * @return {number}
  */
 function humanizedDiff(before, after = new Date()) {
-  const daysDiff = Math.round((after - before) / (24 * 60 * 60 * 1000));
-  return (daysDiff < 30)
-    ? `${daysDiff} days`
-    : `${Math.round(daysDiff / 30)} months`;
+    const daysDiff = Math.round((after - before) / (24 * 60 * 60 * 1000));
+    return (daysDiff < 30) ?
+        `${daysDiff} days` :
+        `${Math.round(daysDiff / 30)} months`;
 }
 
 export const MessageListItem = (props) => {
-  const {
-    message,
-    deleteMessage,
-    toggleFlagged,
-  } = props;
+    const {
+        message,
+        deleteMessage,
+        toggleFlagged,
+    } = props;
 
-  const onClickFlag = makeEventKiller(toggleFlagged);
-  const onClickDelete = makeEventKiller(deleteMessage);
-  const onClickReply = makeEventKiller(() => alert(`Reply to ${message.from}`));
+    const onClickFlag = makeEventKiller(toggleFlagged);
+    const onClickDelete = makeEventKiller(deleteMessage);
+    const onClickReply = makeEventKiller(() => alert(`Reply to ${message.from}`));
 
-  return (
-    <div className="media hide message-list-item">
-      <div className="media-left">
-        <div className="image is-64x64">
-          <img src={message.fromAvatar} />
-        </div>
-      </div>
-      <div className="media-content content columns">
-        <div className="column is-10">
-          <Link to={`/${message.id}`} className="is-link">
-            {message.subject}
-          </Link>
-          <p>
-            {`${message.body.substring(0, 100 )}...`}
-          </p>
-          <div>
-            <small>
-              <a className="is-link" onClick={onClickReply}>
-                Reply to {message.from}
-              </a>
-              {' ● '}
-              {humanizedDiff(new Date(message.sent))} ago ●
-              <Icon name="trash" onClick={onClickDelete} />
-            </small>
-          </div>
-        </div>
-        <div className="column flex-center-all" onClick={onClickFlag}>
-          <Icon
-            name="flag"
-            className={classnames('clickable', {'text-red': message.flagged})}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
+    return ( <
+        div className = "media hide message-list-item" >
+        <
+        div className = "media-left" >
+        <
+        div className = "image is-64x64" >
+        <
+        img src = { message.fromAvatar }
+        role = "presentation" / >
+        <
+        /div> </div > <
+        div className = "media-content content columns" >
+        <
+        div className = "column is-10" >
+        <
+        Link to = { `/${message.id}` }
+        className = "is-link" > { message.subject } < /Link> <
+        p > { `${message.body.substring(0, 100)}...` } < /p> <
+        div >
+        <
+        small >
+        <
+        a className = "is-link"
+        onClick = { onClickReply } >
+        Reply to { message.from } < /a> {' ● '} {humanizedDiff(new Date(message.sent))}
+        ago● <
+        Icon name = "trash"
+        onClick = { onClickDelete }
+        /> </small > < /div> </div > <
+        div className = "column flex-center-all"
+        onClick = { onClickFlag } >
+        <
+        Icon name = "flag"
+        className = { classnames('clickable', { 'text-red': message.flagged }) }
+        /> </div > < /div> </div >
+    );
+};
\ No newline at end of file
diff --git a/src/components/MessageDetail/MessageDetail.js b/src/components/MessageDetail/MessageDetail.js
index f4057eb..1b53ecd 100644
--- a/src/components/MessageDetail/MessageDetail.js
+++ b/src/components/MessageDetail/MessageDetail.js
@@ -5,37 +5,42 @@ import { Icon } from '../Icon';
 
 const btnClasses = "button is-outlined is-pulled-right";
 
-export const MessageDetail = ({message, deleteMessage, toggleFlagged})  => {
-  return (
-    <div>
-      <Link to="/" className="button is-info is-outlined">
-        Back
-      </Link>
-      <button onClick={deleteMessage} className={btnClasses}>
-        <Icon name="trash" />
-      </button>
-      <button onClick={toggleFlagged} className={classnames(btnClasses, {'text-red': message.flagged})}>
-        <Icon name="flag" />
-      </button>
-      <hr />
-      <div className="columns">
-        <div className="column is-3">
-          <div className="image">
-            <img src={message.fromAvatar} />
-          </div>
-        </div>
-        <div className="column">
-          <h1 className="title">
-            {message.from}
-          </h1>
-          <h2 className="subtitle">
-            {message.subject}
-          </h2>
-          <p className="subtitle is-5">
-            {message.body}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
+export const MessageDetail = ({ message, deleteMessage, toggleFlagged }) => {
+    return ( <
+        div >
+        <
+        Link to = "/"
+        className = "button is-info is-outlined" >
+        Back < /Link> <
+        button onClick = { deleteMessage }
+        className = { btnClasses } >
+        <
+        Icon name = "trash" / >
+        <
+        /button> <
+        button onClick = { toggleFlagged }
+        className = { classnames(btnClasses, { 'text-red': message.flagged }) } >
+        <
+        Icon name = "flag" / >
+        <
+        /button> <hr / >
+        <
+        div className = "columns" >
+        <
+        div className = "column is-3" >
+        <
+        div className = "image" >
+        <
+        img src = { message.fromAvatar }
+        role = "presentation" / >
+        <
+        /div> </div > < div className = "column" >
+        <
+        h1 className = "title" > { message.from } < /h1>  <
+        h2 className = "subtitle" > { message.subject } < /h2>  <
+        p className = "subtitle is-5" > { message.body } < /p>  <
+        /div>  <
+        /div>  <
+        /div>
+    );
+};
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index bc775fc..cc0603f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from 'react-dom';
 import axios from 'axios';
 import { routes } from './routes';
@@ -7,8 +6,8 @@ import './styles/animations.css';
 
 // Some basic axios setup.
 axios.defaults.baseURL = 'http://localhost:3001';
-const responseToBody = ({data}) => data;
+const responseToBody = ({ data }) => data;
 // Convert all response directly to data/JSON
 axios.interceptors.response.use(responseToBody);
 
-render(routes, document.querySelector('#root'));
+render(routes, document.querySelector('#root'));
\ No newline at end of file
