Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 449ea2a

Browse files
author
Rajeev Kumar Singh
committed
Added Toast Notifications
1 parent e23b5be commit 449ea2a

File tree

8 files changed

+90
-24
lines changed

8 files changed

+90
-24
lines changed

‎react-social/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"react": "^16.5.2",
77
"react-dom": "^16.5.2",
88
"react-router-dom": "^4.3.1",
9+
"react-s-alert": "^1.4.1",
910
"react-scripts": "1.1.5"
1011
},
1112
"scripts": {

‎react-social/src/app/App.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.s-alert-box {
2+
min-width: 250px;
3+
}
4+
5+
.s-alert-close::before, .s-alert-close::after {
6+
width: 2px;
7+
}

‎react-social/src/app/App.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import LoadingIndicator from '../common/LoadingIndicator';
1414
import { getCurrentUser } from '../util/APIUtils';
1515
import { ACCESS_TOKEN } from '../constants';
1616
import PrivateRoute from '../common/PrivateRoute';
17+
import Alert from 'react-s-alert';
18+
import 'react-s-alert/dist/s-alert-default.css';
19+
import 'react-s-alert/dist/s-alert-css-effects/slide.css';
1720
import './App.css';
1821

1922
class App extends Component {
@@ -54,6 +57,7 @@ class App extends Component {
5457
authenticated: false,
5558
currentUser: null
5659
});
60+
Alert.success("You're safely logged out!");
5761
}
5862

5963
componentDidMount() {
@@ -83,6 +87,9 @@ class App extends Component {
8387
<Route component={NotFound}></Route>
8488
</Switch>
8589
</div>
90+
<Alert stack={{limit: 3}}
91+
timeout = {3000}
92+
position='top-right' effect='slide' offset={65} />
8693
</div>
8794
);
8895
}

‎react-social/src/user/login/Login.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Link, Redirect } from 'react-router-dom'
66
import fbLogo from '../../img/fb-logo.png';
77
import googleLogo from '../../img/google-logo.png';
88
import githubLogo from '../../img/github-logo.png';
9+
import Alert from 'react-s-alert';
910

1011
class Login extends Component {
1112
render() {
@@ -78,13 +79,10 @@ class LoginForm extends Component {
7879
login(loginRequest)
7980
.then(response => {
8081
localStorage.setItem(ACCESS_TOKEN, response.accessToken);
82+
Alert.success("You're successfully logged in!");
8183
this.props.history.push("/");
8284
}).catch(error => {
83-
if(error.status === 401) {
84-
85-
} else {
86-
87-
}
85+
Alert.error((error && error.message) || 'Oops! Something went wrong. Please try again!');
8886
});
8987
}
9088

‎react-social/src/user/profile/Profile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class Profile extends Component {
1414
<div className="profile-avatar">
1515
{
1616
this.props.currentUser.imageUrl ? (
17-
<img src={this.props.currentUser.imageUrl} />
17+
<img src={this.props.currentUser.imageUrl} alt={this.props.currentUser.name}/>
1818
) : (
1919
<div className="text-avatar">
2020
<span>{this.props.currentUser.name && this.props.currentUser.name[0]}</span>

‎react-social/src/user/signup/Signup.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717

1818
.social-btn {
1919
margin-bottom: 15px;
20-
font-weight: 500;
20+
font-weight: 400;
21+
font-size: 16px;
2122
}
2223

2324
.social-btn img {

‎react-social/src/user/signup/Signup.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { signup } from '../../util/APIUtils';
66
import fbLogo from '../../img/fb-logo.png';
77
import googleLogo from '../../img/google-logo.png';
88
import githubLogo from '../../img/github-logo.png';
9+
import Alert from 'react-s-alert';
910

1011
class Signup extends Component {
1112
render() {
@@ -78,13 +79,10 @@ class SignupForm extends Component {
7879

7980
signup(signUpRequest)
8081
.then(response => {
82+
Alert.success("You're successfully registered. Please login to continue!");
8183
this.props.history.push("/login");
8284
}).catch(error => {
83-
if(error.status === 400) {
84-
85-
} else {
86-
87-
}
85+
Alert.error((error && error.message) || 'Oops! Something went wrong. Please try again!');
8886
});
8987
}
9088

‎react-social/yarn.lock‎

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -954,7 +954,7 @@ babel-register@^6.26.0:
954954
mkdirp "^0.5.1"
955955
source-map-support "^0.4.15"
956956

957-
babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
957+
babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
958958
version "6.26.0"
959959
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
960960
dependencies:
@@ -1335,6 +1335,10 @@ center-align@^0.1.1:
13351335
align-text "^0.1.3"
13361336
lazy-cache "^1.0.3"
13371337

1338+
chain-function@^1.0.0:
1339+
version "1.0.1"
1340+
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
1341+
13381342
chalk@1.1.3, chalk@^1.1.3:
13391343
version "1.1.3"
13401344
resolved "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1410,6 +1414,10 @@ class-utils@^0.3.5:
14101414
isobject "^3.0.0"
14111415
static-extend "^0.1.1"
14121416

1417+
classnames@^2.1.1, classnames@^2.2.6:
1418+
version "2.2.6"
1419+
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
1420+
14131421
clean-css@4.2.x:
14141422
version "4.2.1"
14151423
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -2035,6 +2043,10 @@ dom-converter@~0.1:
20352043
dependencies:
20362044
utila "~0.3"
20372045

2046+
dom-helpers@^3.2.0, dom-helpers@^3.3.1:
2047+
version "3.3.1"
2048+
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
2049+
20382050
dom-serializer@0:
20392051
version "0.1.0"
20402052
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4181,10 +4193,6 @@ lodash.camelcase@^4.3.0:
41814193
version "4.3.0"
41824194
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
41834195

4184-
lodash.clonedeep@^4.5.0:
4185-
version "4.5.0"
4186-
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
4187-
41884196
lodash.cond@^4.3.0:
41894197
version "4.5.2"
41904198
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
@@ -4230,7 +4238,7 @@ longest@^1.0.1:
42304238
version "1.0.1"
42314239
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
42324240

4233-
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
4241+
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
42344242
version "1.4.0"
42354243
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
42364244
dependencies:
@@ -4682,7 +4690,7 @@ oauth-sign@~0.9.0:
46824690
version "0.9.0"
46834691
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
46844692

4685-
object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
4693+
object-assign@4.1.1, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
46864694
version "4.1.1"
46874695
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
46884696

@@ -5353,7 +5361,7 @@ promise@8.0.1:
53535361
dependencies:
53545362
asap "~2.0.3"
53555363

5356-
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
5364+
prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
53575365
version "15.6.2"
53585366
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
53595367
dependencies:
@@ -5517,11 +5525,24 @@ react-error-overlay@^4.0.1:
55175525
version "4.0.1"
55185526
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
55195527

5520-
react-particles-js@^2.3.0:
5521-
version "2.3.0"
5522-
resolved "https://registry.yarnpkg.com/react-particles-js/-/react-particles-js-2.3.0.tgz#2670181eff14f97479b4ae75601f51d9d6c082d7"
5528+
react-lifecycles-compat@^3.0.4:
5529+
version "3.0.4"
5530+
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
5531+
5532+
react-notifications@^1.4.3:
5533+
version "1.4.3"
5534+
resolved "https://registry.yarnpkg.com/react-notifications/-/react-notifications-1.4.3.tgz#7060d339896f125a5b183ebcd04526980a433222"
55235535
dependencies:
5524-
lodash.clonedeep "^4.5.0"
5536+
classnames "^2.1.1"
5537+
prop-types "^15.5.10"
5538+
react-transition-group "^1.2.0"
5539+
5540+
react-notify-toast@^0.5.0:
5541+
version "0.5.0"
5542+
resolved "https://registry.yarnpkg.com/react-notify-toast/-/react-notify-toast-0.5.0.tgz#b00cf50a3cc97a1d222ecd7d7a8e7f14bef5fa67"
5543+
dependencies:
5544+
object-assign "^4.0.0"
5545+
prop-types "^15.5.8"
55255546

55265547
react-router-dom@^4.3.1:
55275548
version "4.3.1"
@@ -5546,6 +5567,12 @@ react-router@^4.3.1:
55465567
prop-types "^15.6.1"
55475568
warning "^4.0.1"
55485569

5570+
react-s-alert@^1.4.1:
5571+
version "1.4.1"
5572+
resolved "https://registry.yarnpkg.com/react-s-alert/-/react-s-alert-1.4.1.tgz#ef3665a9d98c4cf2e448fc2d84e48aeca799bb5a"
5573+
dependencies:
5574+
babel-runtime "^6.23.0"
5575+
55495576
react-scripts@1.1.5:
55505577
version "1.1.5"
55515578
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768"
@@ -5591,6 +5618,33 @@ react-scripts@1.1.5:
55915618
optionalDependencies:
55925619
fsevents "^1.1.3"
55935620

5621+
react-toastify@^4.4.0:
5622+
version "4.4.0"
5623+
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-4.4.0.tgz#b10649c6d95c93c617ba4cadfddd16e6db34b559"
5624+
dependencies:
5625+
classnames "^2.2.6"
5626+
prop-types "^15.6.0"
5627+
react-transition-group "^2.4.0"
5628+
5629+
react-transition-group@^1.2.0:
5630+
version "1.2.1"
5631+
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
5632+
dependencies:
5633+
chain-function "^1.0.0"
5634+
dom-helpers "^3.2.0"
5635+
loose-envify "^1.3.1"
5636+
prop-types "^15.5.6"
5637+
warning "^3.0.0"
5638+
5639+
react-transition-group@^2.4.0:
5640+
version "2.5.0"
5641+
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"
5642+
dependencies:
5643+
dom-helpers "^3.3.1"
5644+
loose-envify "^1.4.0"
5645+
prop-types "^15.6.2"
5646+
react-lifecycles-compat "^3.0.4"
5647+
55945648
react@^16.5.2:
55955649
version "16.5.2"
55965650
resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /