Added Toast Notifications

Author: Rajeev Kumar Singh

react-social/package.json

@@ -6,6 +6,7 @@
  "react": "^16.5.2",
  "react-dom": "^16.5.2",
  "react-router-dom": "^4.3.1",
+ "react-s-alert": "^1.4.1",
  "react-scripts": "1.1.5"
  },
  "scripts": {

react-social/src/app/App.css

@@ -0,0 +1,7 @@
+.s-alert-box {
+ min-width: 250px;
+}
+
+.s-alert-close::before, .s-alert-close::after {
+ width: 2px;
+}

react-social/src/app/App.js

@@ -14,6 +14,9 @@ import LoadingIndicator from '../common/LoadingIndicator';
 import { getCurrentUser } from '../util/APIUtils';
 import { ACCESS_TOKEN } from '../constants';
 import PrivateRoute from '../common/PrivateRoute';
+import Alert from 'react-s-alert';
+import 'react-s-alert/dist/s-alert-default.css';
+import 'react-s-alert/dist/s-alert-css-effects/slide.css';
 import './App.css';
 
 class App extends Component {
@@ -54,6 +57,7 @@ class App extends Component {
  authenticated: false,
  currentUser: null
  });
+ Alert.success("You're safely logged out!");
  }
 
  componentDidMount() {
@@ -83,6 +87,9 @@ class App extends Component {
  <Route component={NotFound}></Route>
  </Switch>
  </div>
+ <Alert stack={{limit: 3}} 
+ timeout = {3000}
+ position='top-right' effect='slide' offset={65} />
  </div>
  );
  }

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

@@ -6,6 +6,7 @@ import { Link, Redirect } from 'react-router-dom'
 import fbLogo from '../../img/fb-logo.png';
 import googleLogo from '../../img/google-logo.png';
 import githubLogo from '../../img/github-logo.png';
+import Alert from 'react-s-alert';
 
 class Login extends Component {
  render() {
@@ -78,13 +79,10 @@ class LoginForm extends Component {
  login(loginRequest)
  .then(response => {
  localStorage.setItem(ACCESS_TOKEN, response.accessToken);
+ Alert.success("You're successfully logged in!");
  this.props.history.push("/");
  }).catch(error => {
- if(error.status === 401) {
-
- } else {
-
- }
+ Alert.error((error && error.message) || 'Oops! Something went wrong. Please try again!');
  });
  }
 

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

@@ -14,7 +14,7 @@ class Profile extends Component {
  <div className="profile-avatar">
  { 
  this.props.currentUser.imageUrl ? (
- <img src={this.props.currentUser.imageUrl} />
+ <img src={this.props.currentUser.imageUrl} alt={this.props.currentUser.name}/>
  ) : (
  <div className="text-avatar">
  <span>{this.props.currentUser.name && this.props.currentUser.name[0]}</span>

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

@@ -17,7 +17,8 @@
 
 .social-btn {
  margin-bottom: 15px;
- font-weight: 500;
+ font-weight: 400;
+ font-size: 16px;
 }
 
 .social-btn img {

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

@@ -6,6 +6,7 @@ import { signup } from '../../util/APIUtils';
 import fbLogo from '../../img/fb-logo.png';
 import googleLogo from '../../img/google-logo.png';
 import githubLogo from '../../img/github-logo.png';
+import Alert from 'react-s-alert';
 
 class Signup extends Component {
  render() {
@@ -78,13 +79,10 @@ class SignupForm extends Component {
 
  signup(signUpRequest)
  .then(response => {
+ Alert.success("You're successfully registered. Please login to continue!");
  this.props.history.push("/login");
  }).catch(error => {
- if(error.status === 400) {
-
- } else {
-
- }
+ Alert.error((error && error.message) || 'Oops! Something went wrong. Please try again!'); 
  });
  }
 

react-social/yarn.lock

@@ -954,7 +954,7 @@ babel-register@^6.26.0:
  mkdirp "^0.5.1"
  source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+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:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
  dependencies:
@@ -1335,6 +1335,10 @@ center-align@^0.1.1:
  align-text "^0.1.3"
  lazy-cache "^1.0.3"
 
+chain-function@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
+
 chalk@1.1.3, chalk@^1.1.3:
  version "1.1.3"
  resolved "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1410,6 +1414,10 @@ class-utils@^0.3.5:
  isobject "^3.0.0"
  static-extend "^0.1.1"
 
+classnames@^2.1.1, classnames@^2.2.6:
+ version "2.2.6"
+ resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 clean-css@4.2.x:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -2035,6 +2043,10 @@ dom-converter@~0.1:
  dependencies:
  utila "~0.3"
 
+dom-helpers@^3.2.0, dom-helpers@^3.3.1:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
 dom-serializer@0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4181,10 +4193,6 @@ lodash.camelcase@^4.3.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
-lodash.clonedeep@^4.5.0:
- version "4.5.0"
- resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-
 lodash.cond@^4.3.0:
  version "4.5.2"
  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
@@ -4230,7 +4238,7 @@ longest@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
+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:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  dependencies:
@@ -4682,7 +4690,7 @@ oauth-sign@~0.9.0:
  version "0.9.0"
  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
 
-object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+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:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -5353,7 +5361,7 @@ promise@8.0.1:
  dependencies:
  asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
+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:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
@@ -5517,11 +5525,24 @@ react-error-overlay@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
 
-react-particles-js@^2.3.0:
- version "2.3.0"
- resolved "https://registry.yarnpkg.com/react-particles-js/-/react-particles-js-2.3.0.tgz#2670181eff14f97479b4ae75601f51d9d6c082d7"
+react-lifecycles-compat@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-notifications@^1.4.3:
+ version "1.4.3"
+ resolved "https://registry.yarnpkg.com/react-notifications/-/react-notifications-1.4.3.tgz#7060d339896f125a5b183ebcd04526980a433222"
  dependencies:
- lodash.clonedeep "^4.5.0"
+ classnames "^2.1.1"
+ prop-types "^15.5.10"
+ react-transition-group "^1.2.0"
+
+react-notify-toast@^0.5.0:
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/react-notify-toast/-/react-notify-toast-0.5.0.tgz#b00cf50a3cc97a1d222ecd7d7a8e7f14bef5fa67"
+ dependencies:
+ object-assign "^4.0.0"
+ prop-types "^15.5.8"
 
 react-router-dom@^4.3.1:
  version "4.3.1"
@@ -5546,6 +5567,12 @@ react-router@^4.3.1:
  prop-types "^15.6.1"
  warning "^4.0.1"
 
+react-s-alert@^1.4.1:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/react-s-alert/-/react-s-alert-1.4.1.tgz#ef3665a9d98c4cf2e448fc2d84e48aeca799bb5a"
+ dependencies:
+ babel-runtime "^6.23.0"
+
 react-scripts@1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768"
@@ -5591,6 +5618,33 @@ react-scripts@1.1.5:
  optionalDependencies:
  fsevents "^1.1.3"
 
+react-toastify@^4.4.0:
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-4.4.0.tgz#b10649c6d95c93c617ba4cadfddd16e6db34b559"
+ dependencies:
+ classnames "^2.2.6"
+ prop-types "^15.6.0"
+ react-transition-group "^2.4.0"
+
+react-transition-group@^1.2.0:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+ dependencies:
+ chain-function "^1.0.0"
+ dom-helpers "^3.2.0"
+ loose-envify "^1.3.1"
+ prop-types "^15.5.6"
+ warning "^3.0.0"
+
+react-transition-group@^2.4.0:
+ version "2.5.0"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"
+ dependencies:
+ dom-helpers "^3.3.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+ react-lifecycles-compat "^3.0.4"
+
 react@^16.5.2:
  version "16.5.2"
  resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"