Skip to content

Commit 33c9778

Browse files
rwieruchrwieruch
authored
Merge pull request #2 from the-road-to-react-with-firebase/semantic
Run Prettier & Icons within Buttons for Accessibility
2 parents 039bb55 + 3893f38 commit 33c9778

File tree

17 files changed

+641
-484
lines changed

17 files changed

+641
-484
lines changed

‎package-lock.json

Lines changed: 344 additions & 296 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Account/index.js

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ import { withFirebase } from '../Firebase';
1010
import { PasswordForgetForm } from '../PasswordForget';
1111
import PasswordChangeForm from '../PasswordChange';
1212

13-
import {Grid, Card, Header, Message, Form, Button } from 'semantic-ui-react'
13+
import {
14+
Grid,
15+
Card,
16+
Header,
17+
Message,
18+
Form,
19+
Button,
20+
} from 'semantic-ui-react';
1421

1522
const SIGN_IN_METHODS = [
1623
{
@@ -35,7 +42,7 @@ const AccountPage = () => (
3542
<AuthUserContext.Consumer>
3643
{authUser => (
3744
<div>
38-
<Header as='h2'>Account: {authUser.email}</Header>
45+
<Header as="h2">Account: {authUser.email}</Header>
3946
<Grid columns={2}>
4047
<Grid.Column>
4148
<Card fluid={true}>
@@ -121,9 +128,11 @@ class LoginManagementBase extends Component {
121128
<Card.Content>
122129
<Card.Header>Sign In Methods</Card.Header>
123130
<Card.Description>
124-
{error && <Message negative>
125-
<p>{error.message}</p>
126-
</Message>}
131+
{error && (
132+
<Message negative>
133+
<p>{error.message}</p>
134+
</Message>
135+
)}
127136
<div>
128137
{SIGN_IN_METHODS.map(signInMethod => {
129138
const onlyOneLeft = activeSignInMethods.length === 1;
@@ -175,7 +184,15 @@ const SocialLoginToggle = ({
175184
}) =>
176185
isEnabled ? (
177186
<Button
178-
color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
187+
color={
188+
signInMethod.id === 'google.com'
189+
? 'google plus'
190+
: signInMethod.id === 'facebook.com'
191+
? 'facebook'
192+
: signInMethod.id === 'twitter.com'
193+
? 'twitter'
194+
: ''
195+
}
179196
type="button"
180197
onClick={() => onUnlink(signInMethod.id)}
181198
disabled={onlyOneLeft}
@@ -184,7 +201,15 @@ const SocialLoginToggle = ({
184201
</Button>
185202
) : (
186203
<Button
187-
color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
204+
color={
205+
signInMethod.id === 'google.com'
206+
? 'google plus'
207+
: signInMethod.id === 'facebook.com'
208+
? 'facebook'
209+
: signInMethod.id === 'twitter.com'
210+
? 'twitter'
211+
: ''
212+
}
188213
type="button"
189214
onClick={() => onLink(signInMethod.provider)}
190215
>
@@ -225,14 +250,18 @@ class DefaultLoginToggle extends Component {
225250

226251
return isEnabled ? (
227252
<span>
228-
<Button type="button" onClick={() => onUnlink(signInMethod.id)} disabled={onlyOneLeft}>
253+
<Button
254+
type="button"
255+
onClick={() => onUnlink(signInMethod.id)}
256+
disabled={onlyOneLeft}
257+
>
229258
Deactivate {signInMethod.id}
230259
</Button>
231260
<br />
232261
</span>
233262
) : (
234263
<Form onSubmit={this.onSubmit}>
235-
<Form.Group widths='equal'>
264+
<Form.Group widths="equal">
236265
<Form.Field>
237266
<label>New Password</label>
238267
<input

‎src/components/Admin/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Header } from 'semantic-ui-react';
1111

1212
const AdminPage = () => (
1313
<div>
14-
<Header as='h2'>Admin</Header>
14+
<Header as="h2">Admin</Header>
1515
<p>The Admin Page is accessible by every signed in admin user.</p>
1616

1717
<Switch>

‎src/components/App/index.js

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,23 @@ import AdminPage from '../Admin';
1313
import * as ROUTES from '../../constants/routes';
1414
import { withAuthentication } from '../Session';
1515

16-
import { Container } from 'semantic-ui-react'
16+
import { Container } from 'semantic-ui-react';
1717

1818
const App = () => (
1919
<Router>
2020
<div>
2121
<Navigation />
2222
<Container>
23-
24-
<Route exact path={ROUTES.LANDING} component={LandingPage} />
25-
<Route path={ROUTES.SIGN_UP} component={SignUpPage} />
26-
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
27-
<Route
28-
path={ROUTES.PASSWORD_FORGET}
29-
component={PasswordForgetPage}
30-
/>
31-
<Route path={ROUTES.HOME} component={HomePage} />
32-
<Route path={ROUTES.ACCOUNT} component={AccountPage} />
33-
<Route path={ROUTES.ADMIN} component={AdminPage} />
23+
<Route exact path={ROUTES.LANDING} component={LandingPage} />
24+
<Route path={ROUTES.SIGN_UP} component={SignUpPage} />
25+
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
26+
<Route
27+
path={ROUTES.PASSWORD_FORGET}
28+
component={PasswordForgetPage}
29+
/>
30+
<Route path={ROUTES.HOME} component={HomePage} />
31+
<Route path={ROUTES.ACCOUNT} component={AccountPage} />
32+
<Route path={ROUTES.ADMIN} component={AdminPage} />
3433
</Container>
3534
</div>
3635
</Router>

‎src/components/Messages/MessageItem.js

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React, {Component} from 'react';
2-
import { distanceInWordsToNow } from 'date-fns'
1+
import React, { Component } from 'react';
2+
import { distanceInWordsToNow } from 'date-fns';
33
import { Link } from 'react-router-dom';
4-
import { Feed, Icon, Form } from 'semantic-ui-react';
4+
import { Feed, Icon, Form, Button } from 'semantic-ui-react';
55

66
export const TimeAgo = ({ time }) => (
77
<time>{distanceInWordsToNow(time)} ago</time>
8-
)
9-
8+
);
109

1110
class MessageItem extends Component {
1211
constructor(props) {
@@ -26,25 +25,29 @@ class MessageItem extends Component {
2625
};
2726

2827
onChangeEditText = event => {
29-
this.setState({editText: event.target.value});
28+
this.setState({ editText: event.target.value });
3029
};
3130

3231
onSaveEditText = () => {
3332
this.props.onEditMessage(this.props.message, this.state.editText);
3433

35-
this.setState({editMode: false});
34+
this.setState({ editMode: false });
3635
};
3736

3837
render() {
39-
const {message, onRemoveMessage} = this.props;
40-
const {editMode, editText} = this.state;
38+
const { message, onRemoveMessage } = this.props;
39+
const { editMode, editText } = this.state;
4140

4241
return (
4342
<Feed.Event>
4443
<Feed.Content>
4544
<Feed.Summary>
46-
<Feed.User as={Link } to={`/`}>{message.user.username || message.user.userId}</Feed.User>
47-
<Feed.Date><TimeAgo time={message.createdAt} /></Feed.Date>
45+
<Feed.User as={Link} to={`/`}>
46+
{message.user.username || message.user.userId}
47+
</Feed.User>
48+
<Feed.Date>
49+
<TimeAgo time={message.createdAt} />
50+
</Feed.Date>
4851
</Feed.Summary>
4952
<Feed.Extra>
5053
{editMode ? (
@@ -59,22 +62,32 @@ class MessageItem extends Component {
5962
</Form>
6063
) : (
6164
<span>
62-
{message.text} {message.editedAt && <span>(Edited)</span>}
63-
</span>
65+
{message.text}{' '}
66+
{message.editedAt && <span>(Edited)</span>}
67+
</span>
6468
)}
6569
</Feed.Extra>
6670
<Feed.Meta>
6771
{editMode ? (
6872
<span>
69-
<Icon bordered size='large' color='green' name='save outline' onClick={this.onSaveEditText} />
70-
<Icon bordered size='large' color='blue' name='undo alternate' onClick={this.onToggleEditMode} />
73+
<Button icon onClick={this.onSaveEditText}>
74+
<Icon color="green" name="save outline" />
75+
</Button>
76+
<Button icon onClick={this.onToggleEditMode}>
77+
<Icon color="blue" name="undo alternate" />
78+
</Button>
7179
</span>
72-
) : null}
73-
74-
{!editMode && (
80+
) : (
7581
<span>
76-
<Icon bordered size='large' color='blue' name='edit outline' onClick={this.onToggleEditMode} />
77-
<Icon bordered size='large' color='red' name='trash alternate' onClick={() => onRemoveMessage(message.uid)} />
82+
<Button icon onClick={this.onToggleEditMode}>
83+
<Icon color="blue" name="edit outline" />
84+
</Button>
85+
<Button
86+
icon
87+
onClick={() => onRemoveMessage(message.uid)}
88+
>
89+
<Icon color="red" name="trash alternate" />
90+
</Button>
7891
</span>
7992
)}
8093
</Feed.Meta>

‎src/components/Messages/MessageList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import MessageItem from './MessageItem';
44

5-
import { Feed } from 'semantic-ui-react'
5+
import { Feed } from 'semantic-ui-react';
66

77
const MessageList = ({
88
messages,

‎src/components/Messages/Messages.js

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import { AuthUserContext } from '../Session';
44
import { withFirebase } from '../Firebase';
55
import MessageList from './MessageList';
66

7-
import { Card, Message, Button, Loader, Form, Icon } from 'semantic-ui-react'
7+
import {
8+
Card,
9+
Message,
10+
Button,
11+
Loader,
12+
Form,
13+
Icon,
14+
} from 'semantic-ui-react';
815

916
class Messages extends Component {
1017
constructor(props) {
@@ -96,13 +103,21 @@ class Messages extends Component {
96103
<Card fluid={true}>
97104
<Card.Content>
98105
<Card.Description>
99-
{loading && <Loader active inline='centered' />}
106+
{loading && <Loader active inline="centered" />}
100107

101108
{!loading && messages && (
102-
<Button size='small' floated='right' positive type="button" onClick={this.onNextPage}>Older Messages</Button>
109+
<Button
110+
size="small"
111+
positive
112+
type="button"
113+
onClick={this.onNextPage}
114+
>
115+
Load Older Messages
116+
</Button>
103117
)}
104118

105-
{messages && (<MessageList
119+
{messages && (
120+
<MessageList
106121
messages={messages.map(message => ({
107122
...message,
108123
user: users
@@ -111,16 +126,31 @@ class Messages extends Component {
111126
}))}
112127
onEditMessage={this.onEditMessage}
113128
onRemoveMessage={this.onRemoveMessage}
114-
/>)}
129+
/>
130+
)}
115131

116-
{!loading && !messages && <Message info>
117-
<p>There are no messages ...</p>
118-
</Message>}
132+
{!loading && !messages && (
133+
<Message info>
134+
<p>There are no messages ...</p>
135+
</Message>
136+
)}
119137

120-
{!loading && <Form onSubmit={event => this.onCreateMessage(event, authUser)}>
121-
<Form.TextArea value={text} onChange={this.onChangeText} placeholder='Enter your message here...' />
122-
<Button primary type='submit'>Send <Icon name='send' /></Button>
123-
</Form>}
138+
{!loading && (
139+
<Form
140+
onSubmit={event =>
141+
this.onCreateMessage(event, authUser)
142+
}
143+
>
144+
<Form.TextArea
145+
value={text}
146+
onChange={this.onChangeText}
147+
placeholder="Enter your message here..."
148+
/>
149+
<Button primary type="submit">
150+
Send <Icon name="send" />
151+
</Button>
152+
</Form>
153+
)}
124154
</Card.Description>
125155
</Card.Content>
126156
</Card>

‎src/components/Navigation/index.js

Lines changed: 8 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import SignOutButton from '../SignOut';
66
import * as ROUTES from '../../constants/routes';
77
import * as ROLES from '../../constants/roles';
88

9-
import { Container, Menu } from 'semantic-ui-react'
9+
import { Container, Menu } from 'semantic-ui-react';
1010

1111
const Navigation = () => (
1212
<AuthUserContext.Consumer>
@@ -23,27 +23,11 @@ const Navigation = () => (
2323
const NavigationAuth = ({ authUser }) => (
2424
<Menu pointing secondary>
2525
<Container>
26-
<Menu.Item
27-
name='Landing'
28-
as={Link}
29-
to={ROUTES.LANDING}
30-
/>
31-
<Menu.Item
32-
name='home'
33-
as={Link}
34-
to={ROUTES.HOME}
35-
/>
36-
<Menu.Item
37-
name='Account'
38-
as={Link}
39-
to={ROUTES.ACCOUNT}
40-
/>
26+
<Menu.Item name="Landing" as={Link} to={ROUTES.LANDING} />
27+
<Menu.Item name="home" as={Link} to={ROUTES.HOME} />
28+
<Menu.Item name="Account" as={Link} to={ROUTES.ACCOUNT} />
4129
{authUser.roles.includes(ROLES.ADMIN) && (
42-
<Menu.Item
43-
name='Admin'
44-
as={Link}
45-
to={ROUTES.ADMIN}
46-
/>
30+
<Menu.Item name="Admin" as={Link} to={ROUTES.ADMIN} />
4731
)}
4832
<SignOutButton />
4933
</Container>
@@ -53,17 +37,9 @@ const NavigationAuth = ({ authUser }) => (
5337
const NavigationNonAuth = () => (
5438
<Menu pointing secondary>
5539
<Container>
56-
<Menu.Item
57-
name='home'
58-
as={Link}
59-
to={ROUTES.LANDING}
60-
/>
61-
<Menu.Menu position='right'>
62-
<Menu.Item
63-
name='signin'
64-
as={Link}
65-
to={ROUTES.SIGN_IN}
66-
/>
40+
<Menu.Item name="home" as={Link} to={ROUTES.LANDING} />
41+
<Menu.Menu position="right">
42+
<Menu.Item name="signin" as={Link} to={ROUTES.SIGN_IN} />
6743
</Menu.Menu>
6844
</Container>
6945
</Menu>

0 commit comments

Comments
 (0)