the-road-to-react-with-firebase · rwieruch · Dec 12, 2018 · Dec 12, 2018 · Dec 12, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Account/index.js b/src/components/Account/index.js
@@ -10,7 +10,14 @@ import { withFirebase } from '../Firebase';
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
 
-import {Grid, Card, Header, Message, Form, Button } from 'semantic-ui-react'
+import {
+  Grid,
+  Card,
+  Header,
+  Message,
+  Form,
+  Button,
+} from 'semantic-ui-react';
 
 const SIGN_IN_METHODS = [
   {
@@ -35,7 +42,7 @@ const AccountPage = () => (
   <AuthUserContext.Consumer>
     {authUser => (
       <div>
-        <Header as='h2'>Account: {authUser.email}</Header>
+        <Header as="h2">Account: {authUser.email}</Header>
         <Grid columns={2}>
           <Grid.Column>
             <Card fluid={true}>
@@ -121,9 +128,11 @@ class LoginManagementBase extends Component {
         <Card.Content>
           <Card.Header>Sign In Methods</Card.Header>
           <Card.Description>
-            {error && <Message negative>
-              <p>{error.message}</p>
-            </Message>}
+            {error && (
+              <Message negative>
+                <p>{error.message}</p>
+              </Message>
+            )}
             <div>
               {SIGN_IN_METHODS.map(signInMethod => {
                 const onlyOneLeft = activeSignInMethods.length === 1;
@@ -175,7 +184,15 @@ const SocialLoginToggle = ({
 }) =>
   isEnabled ? (
     <Button
-      color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
+      color={
+        signInMethod.id === 'google.com'
+          ? 'google plus'
+          : signInMethod.id === 'facebook.com'
+          ? 'facebook'
+          : signInMethod.id === 'twitter.com'
+          ? 'twitter'
+          : ''
+      }
       type="button"
       onClick={() => onUnlink(signInMethod.id)}
       disabled={onlyOneLeft}
@@ -184,7 +201,15 @@ const SocialLoginToggle = ({
     </Button>
   ) : (
     <Button
-      color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
+      color={
+        signInMethod.id === 'google.com'
+          ? 'google plus'
+          : signInMethod.id === 'facebook.com'
+          ? 'facebook'
+          : signInMethod.id === 'twitter.com'
+          ? 'twitter'
+          : ''
+      }
       type="button"
       onClick={() => onLink(signInMethod.provider)}
     >
@@ -225,14 +250,18 @@ class DefaultLoginToggle extends Component {
 
     return isEnabled ? (
       <span>
-        <Button type="button" onClick={() => onUnlink(signInMethod.id)} disabled={onlyOneLeft}>
+        <Button
+          type="button"
+          onClick={() => onUnlink(signInMethod.id)}
+          disabled={onlyOneLeft}
+        >
           Deactivate {signInMethod.id}
         </Button>
         <br />
       </span>
     ) : (
       <Form onSubmit={this.onSubmit}>
-        <Form.Group widths='equal'>
+        <Form.Group widths="equal">
           <Form.Field>
             <label>New Password</label>
             <input

diff --git a/src/components/Admin/index.js b/src/components/Admin/index.js
@@ -11,7 +11,7 @@ import { Header } from 'semantic-ui-react';
 
 const AdminPage = () => (
   <div>
-    <Header as='h2'>Admin</Header>
+    <Header as="h2">Admin</Header>
     <p>The Admin Page is accessible by every signed in admin user.</p>
 
     <Switch>

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -13,24 +13,23 @@ import AdminPage from '../Admin';
 import * as ROUTES from '../../constants/routes';
 import { withAuthentication } from '../Session';
 
-import { Container } from 'semantic-ui-react'
+import { Container } from 'semantic-ui-react';
 
 const App = () => (
   <Router>
     <div>
       <Navigation />
       <Container>
-
-      <Route exact path={ROUTES.LANDING} component={LandingPage} />
-      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
-      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
-      <Route
-        path={ROUTES.PASSWORD_FORGET}
-        component={PasswordForgetPage}
-      />
-      <Route path={ROUTES.HOME} component={HomePage} />
-      <Route path={ROUTES.ACCOUNT} component={AccountPage} />
-      <Route path={ROUTES.ADMIN} component={AdminPage} />
+        <Route exact path={ROUTES.LANDING} component={LandingPage} />
+        <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
+        <Route path={ROUTES.SIGN_IN} component={SignInPage} />
+        <Route
+          path={ROUTES.PASSWORD_FORGET}
+          component={PasswordForgetPage}
+        />
+        <Route path={ROUTES.HOME} component={HomePage} />
+        <Route path={ROUTES.ACCOUNT} component={AccountPage} />
+        <Route path={ROUTES.ADMIN} component={AdminPage} />
       </Container>
     </div>
   </Router>

diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js
@@ -1,12 +1,11 @@
-import React, {Component} from 'react';
-import { distanceInWordsToNow } from 'date-fns'
+import React, { Component } from 'react';
+import { distanceInWordsToNow } from 'date-fns';
 import { Link } from 'react-router-dom';
-import { Feed, Icon, Form } from 'semantic-ui-react';
+import { Feed, Icon, Form, Button } from 'semantic-ui-react';
 
 export const TimeAgo = ({ time }) => (
   <time>{distanceInWordsToNow(time)} ago</time>
-)
-
+);
 
 class MessageItem extends Component {
   constructor(props) {
@@ -26,25 +25,29 @@ class MessageItem extends Component {
   };
 
   onChangeEditText = event => {
-    this.setState({editText: event.target.value});
+    this.setState({ editText: event.target.value });
   };
 
   onSaveEditText = () => {
     this.props.onEditMessage(this.props.message, this.state.editText);
 
-    this.setState({editMode: false});
+    this.setState({ editMode: false });
   };
 
   render() {
-    const {message, onRemoveMessage} = this.props;
-    const {editMode, editText} = this.state;
+    const { message, onRemoveMessage } = this.props;
+    const { editMode, editText } = this.state;
 
     return (
       <Feed.Event>
         <Feed.Content>
           <Feed.Summary>
-            <Feed.User as={Link } to={`/`}>{message.user.username || message.user.userId}</Feed.User>
-            <Feed.Date><TimeAgo time={message.createdAt} /></Feed.Date>
+            <Feed.User as={Link} to={`/`}>
+              {message.user.username || message.user.userId}
+            </Feed.User>
+            <Feed.Date>
+              <TimeAgo time={message.createdAt} />
+            </Feed.Date>
           </Feed.Summary>
           <Feed.Extra>
             {editMode ? (
@@ -59,22 +62,32 @@ class MessageItem extends Component {
               </Form>
             ) : (
               <span>
-                  {message.text} {message.editedAt && <span>(Edited)</span>}
-                </span>
+                {message.text}{' '}
+                {message.editedAt && <span>(Edited)</span>}
+              </span>
             )}
           </Feed.Extra>
           <Feed.Meta>
             {editMode ? (
               <span>
-                <Icon bordered size='large' color='green' name='save outline' onClick={this.onSaveEditText} />
-                <Icon bordered size='large' color='blue' name='undo alternate' onClick={this.onToggleEditMode} />
+                <Button icon onClick={this.onSaveEditText}>
+                  <Icon color="green" name="save outline" />
+                </Button>
+                <Button icon onClick={this.onToggleEditMode}>
+                  <Icon color="blue" name="undo alternate" />
+                </Button>
               </span>
-            ) : null}
-
-            {!editMode && (
+            ) : (
               <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)} />
+                <Button icon onClick={this.onToggleEditMode}>
+                  <Icon color="blue" name="edit outline" />
+                </Button>
+                <Button
+                  icon
+                  onClick={() => onRemoveMessage(message.uid)}
+                >
+                  <Icon color="red" name="trash alternate" />
+                </Button>
               </span>
             )}
           </Feed.Meta>

diff --git a/src/components/Messages/MessageList.js b/src/components/Messages/MessageList.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import MessageItem from './MessageItem';
 
-import { Feed } from 'semantic-ui-react'
+import { Feed } from 'semantic-ui-react';
 
 const MessageList = ({
   messages,

diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
@@ -4,7 +4,14 @@ import { AuthUserContext } from '../Session';
 import { withFirebase } from '../Firebase';
 import MessageList from './MessageList';
 
-import { Card, Message, Button, Loader, Form, Icon } from 'semantic-ui-react'
+import {
+  Card,
+  Message,
+  Button,
+  Loader,
+  Form,
+  Icon,
+} from 'semantic-ui-react';
 
 class Messages extends Component {
   constructor(props) {
@@ -96,13 +103,21 @@ class Messages extends Component {
           <Card fluid={true}>
             <Card.Content>
               <Card.Description>
-                {loading && <Loader active inline='centered' />}
+                {loading && <Loader active inline="centered" />}
 
                 {!loading && messages && (
-                  <Button size='small' floated='right' positive type="button" onClick={this.onNextPage}>Older Messages</Button>
+                  <Button
+                    size="small"
+                    positive
+                    type="button"
+                    onClick={this.onNextPage}
+                  >
+                    Load Older Messages
+                  </Button>
                 )}
 
-                {messages && (<MessageList
+                {messages && (
+                  <MessageList
                     messages={messages.map(message => ({
                       ...message,
                       user: users
@@ -111,16 +126,31 @@ class Messages extends Component {
                     }))}
                     onEditMessage={this.onEditMessage}
                     onRemoveMessage={this.onRemoveMessage}
-                  />)}
+                  />
+                )}
 
-                {!loading && !messages && <Message info>
-                  <p>There are no messages ...</p>
-                </Message>}
+                {!loading && !messages && (
+                  <Message info>
+                    <p>There are no messages ...</p>
+                  </Message>
+                )}
 
-                {!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>
-                </Form>}
+                {!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>
+                  </Form>
+                )}
               </Card.Description>
             </Card.Content>
           </Card>

diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
@@ -6,7 +6,7 @@ import SignOutButton from '../SignOut';
 import * as ROUTES from '../../constants/routes';
 import * as ROLES from '../../constants/roles';
 
-import { Container, Menu } from 'semantic-ui-react'
+import { Container, Menu } from 'semantic-ui-react';
 
 const Navigation = () => (
   <AuthUserContext.Consumer>
@@ -23,27 +23,11 @@ const Navigation = () => (
 const NavigationAuth = ({ authUser }) => (
   <Menu pointing secondary>
     <Container>
-      <Menu.Item
-        name='Landing'
-        as={Link}
-        to={ROUTES.LANDING}
-      />
-      <Menu.Item
-        name='home'
-        as={Link}
-        to={ROUTES.HOME}
-      />
-      <Menu.Item
-        name='Account'
-        as={Link}
-        to={ROUTES.ACCOUNT}
-      />
+      <Menu.Item name="Landing" as={Link} to={ROUTES.LANDING} />
+      <Menu.Item name="home" as={Link} to={ROUTES.HOME} />
+      <Menu.Item name="Account" as={Link} to={ROUTES.ACCOUNT} />
       {authUser.roles.includes(ROLES.ADMIN) && (
-        <Menu.Item
-          name='Admin'
-          as={Link}
-          to={ROUTES.ADMIN}
-        />
+        <Menu.Item name="Admin" as={Link} to={ROUTES.ADMIN} />
       )}
       <SignOutButton />
     </Container>
@@ -53,17 +37,9 @@ const NavigationAuth = ({ authUser }) => (
 const NavigationNonAuth = () => (
   <Menu pointing secondary>
     <Container>
-      <Menu.Item
-        name='home'
-        as={Link}
-        to={ROUTES.LANDING}
-      />
-      <Menu.Menu position='right'>
-        <Menu.Item
-          name='signin'
-          as={Link}
-          to={ROUTES.SIGN_IN}
-        />
+      <Menu.Item name="home" as={Link} to={ROUTES.LANDING} />
+      <Menu.Menu position="right">
+        <Menu.Item name="signin" as={Link} to={ROUTES.SIGN_IN} />
       </Menu.Menu>
     </Container>
   </Menu>