bug fixes

Author: iamuteti

package-lock.json

@@ -3,13 +3,14 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "epoch-timeago": "^1.1.9",
+    "date-fns": "^1.30.1",
     "firebase": "^5.6.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "recompose": "^0.30.0",
+    "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.83.0"
   },
   "scripts": {

package.json

@@ -224,13 +224,12 @@ class DefaultLoginToggle extends Component {
       passwordOne !== passwordTwo || passwordOne === '';
 
     return isEnabled ? (
-      <Button
-        type="button"
-        onClick={() => onUnlink(signInMethod.id)}
-        disabled={onlyOneLeft}
-      >
-        Deactivate {signInMethod.id}
-      </Button>
+      <span>
+        <Button type="button" onClick={() => onUnlink(signInMethod.id)} disabled={onlyOneLeft}>
+          Deactivate {signInMethod.id}
+        </Button>
+        <br />
+      </span>
     ) : (
       <Form onSubmit={this.onSubmit}>
         <Form.Group widths='equal'>

src/components/Account/index.js

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
-import timeago from 'epoch-timeago';
+import { distanceInWordsToNow } from 'date-fns'
 import { Link } from 'react-router-dom';
 import { Feed, Icon, Form } from 'semantic-ui-react';
 
 export const TimeAgo = ({ time }) => (
-  <time dateTime={new Date(time).toISOString()}>{timeago(time)}</time>
+  <time>{distanceInWordsToNow(time)} ago</time>
 )
 
 
@@ -69,12 +69,13 @@ class MessageItem extends Component {
                 <Icon bordered size='large' color='green' name='save outline' onClick={this.onSaveEditText} />
                 <Icon bordered size='large' color='blue' name='undo alternate' onClick={this.onToggleEditMode} />
               </span>
-            ) : (
-                <Icon bordered size='large' color='blue' name='edit outline' onClick={this.onToggleEditMode} />
-            )}
+            ) : null}
 
             {!editMode && (
-              <Icon bordered size='large' color='red' name='trash alternate' onClick={() => onRemoveMessage(message.uid)} />
+              <span>
+                <Icon bordered size='large' color='blue' name='edit outline' onClick={this.onToggleEditMode} />
+                <Icon bordered size='large' color='red' name='trash alternate' onClick={() => onRemoveMessage(message.uid)} />
+              </span>
             )}
           </Feed.Meta>
         </Feed.Content>

src/components/Messages/MessageItem.js

@@ -98,6 +98,10 @@ class Messages extends Component {
               <Card.Description>
                 {loading && <Loader active inline='centered' />}
 
+                {!loading && messages && (
+                  <Button size='small' floated='right' positive type="button" onClick={this.onNextPage}>Older Messages</Button>
+                )}
+
                 {messages && (<MessageList
                     messages={messages.map(message => ({
                       ...message,
@@ -116,9 +120,6 @@ class Messages extends Component {
                 {!loading && <Form onSubmit={event => this.onCreateMessage(event, authUser)}>
                   <Form.TextArea value={text} onChange={this.onChangeText} placeholder='Enter your message here...' />
                   <Button primary type='submit'>Send  <Icon name='send' /></Button>
-                  {!loading && messages && (
-                    <Button positive type="button" onClick={this.onNextPage}>More</Button>
-                  )}
                 </Form>}
               </Card.Description>
             </Card.Content>

src/components/Messages/Messages.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import 'semantic-ui-css/semantic.min.css';
 import './index.css';
 import * as serviceWorker from './serviceWorker';