(User) add logout button and authorization check

.eslintrc

@@ -3,9 +3,6 @@
     "react-app",
     "prettier"
   ],
-  "globals": {
-    "VK": true
-  },
   "rules": {
     "jsx-quotes": [
       1,

src/actions/PageActions.js

@@ -22,6 +22,7 @@ function makeYearPhotos(photos, selectedYear) {
 }
 
 function getMorePhotos(offset, count, year, dispatch) {
+  //eslint-disable-next-line no-undef
   VK.Api.call(
     'photos.getAll',
     { extended: 1, count: count, offset: offset, v: '5.80' },

src/actions/UserActions.js

@@ -1,13 +1,20 @@
 export const LOGIN_REQUEST = 'LOGIN_REQUEST'
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
 export const LOGIN_FAIL = 'LOGIN_FAIL'
+export const LOGIN_STATUS_REQUEST = 'LOGIN_STATUS_REQUEST'
+export const LOGIN_STATUS_SUCCESS = 'LOGIN_STATUS_SUCCESS'
+export const LOGIN_STATUS_FAIL = 'LOGIN_STATUS_FAIL'
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
+export const LOGOUT_FAIL = 'LOGOUT_FAIL'
 
 export function handleLogin() {
   return function(dispatch) {
     dispatch({
       type: LOGIN_REQUEST,
     })
 
+    //eslint-disable-next-line no-undef
     VK.Auth.login(r => {
       if (r.session) {
         const username = r.session.user.first_name
@@ -26,3 +33,50 @@ export function handleLogin() {
     }, 4) // запрос прав на доступ к photo
   }
 }
+
+export function getLoginStatus() {
+  return function(dispatch) {
+    dispatch({
+      type: LOGIN_STATUS_REQUEST,
+    })
+
+    //eslint-disable-next-line no-undef
+    VK.Auth.login(r => {
+      if (r.status === 'connected') {
+        const username = r.session.user.first_name
+
+        dispatch({
+          type: LOGIN_STATUS_SUCCESS,
+          payload: username,
+        })
+      } else {
+        dispatch({
+          type: LOGIN_STATUS_FAIL,
+        })
+      }
+    })
+  }
+}
+
+export function handleLogout() {
+  return function(dispatch) {
+    dispatch({
+      type: LOGOUT_REQUEST,
+    })
+
+    //eslint-disable-next-line no-undef
+    VK.Auth.logout(r => {
+      if (!r.session) {
+        dispatch({
+          type: LOGOUT_SUCCESS,
+        })
+      } else {
+        dispatch({
+          type: LOGOUT_FAIL,
+          error: true,
+          payload: new Error('Произошла ошибка'),
+        })
+      }
+    })
+  }
+}

src/components/User.js

@@ -15,16 +15,29 @@ export class User extends React.Component {
 
     if (name) {
       return <p>Привет, {name}!</p>
-    } else {
-      return (
-        <button className="btn" onClick={this.props.handleLogin}>
-          Войти
-        </button>
-      )
     }
   }
+
+  loginBtn = () => {
+    const { name, handleLogout, handleLogin, isFetching } = this.props
+    const authorized = Boolean(name)
+    const btnName = authorized ? 'Выйти' : 'Войти'
+    const onClick = authorized ? handleLogout : handleLogin
+
+    return (
+      <button disabled={isFetching} className="btn" onClick={onClick}>
+        {btnName}
+      </button>
+    )
+  }
+
   render() {
-    return <div className="ib user">{this.renderTemplate()}</div>
+    return (
+      <div className="ib user">
+        {this.renderTemplate()}
+        {this.loginBtn()}
+      </div>
+    )
   }
 }
 

src/containers/UserContainer.js

@@ -1,17 +1,27 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { User } from '../components/User'
-import { handleLogin } from '../actions/UserActions'
+import {
+  handleLogin,
+  getLoginStatus,
+  handleLogout,
+} from '../actions/UserActions'
 
 class UserContainer extends React.Component {
+  componentDidMount() {
+    this.props.getLoginStatus()
+  }
+
   render() {
-    const { user, handleLogin } = this.props
+    const { user, handleLogin, handleLogout } = this.props
     return (
       <User
         name={user.name}
         error={user.error}
         isFetching={user.isFetching}
         handleLogin={handleLogin}
+        handleLogout={handleLogout}
+        authorized={user.authorized}
       />
     )
   }
@@ -26,6 +36,8 @@ const mapStateToProps = store => {
 const mapDispatchToProps = dispatch => {
   return {
     handleLogin: () => dispatch(handleLogin()),
+    getLoginStatus: () => dispatch(getLoginStatus()),
+    handleLogout: () => dispatch(handleLogout()),
   }
 }
 

src/reducers/page.js

@@ -17,7 +17,7 @@ export function pageReducer(state = initialState, action) {
       return { ...state, year: action.payload, isFetching: true, error: '' }
 
     case GET_PHOTOS_SUCCESS:
-      return { ...state, photos: action.payload, isFetching: false, error: '' }
+      return { ...state, photos: action.payload, isFetching: false }
 
     case GET_PHOTOS_FAIL:
       return { ...state, error: action.payload.message, isFetching: false }

src/reducers/user.js

@@ -1,8 +1,4 @@
-import {
-  LOGIN_REQUEST,
-  LOGIN_SUCCESS,
-  LOGIN_FAIL,
-} from '../actions/UserActions'
+import * as t from '../actions/UserActions'
 
 const initialState = {
   name: '',
@@ -12,15 +8,25 @@ const initialState = {
 
 export function userReducer(state = initialState, action) {
   switch (action.type) {
-    case LOGIN_REQUEST:
+    case t.LOGIN_REQUEST:
+    case t.LOGIN_STATUS_REQUEST:
+    case t.LOGOUT_REQUEST:
       return { ...state, isFetching: true, error: '' }
 
-    case LOGIN_SUCCESS:
+    case t.LOGIN_SUCCESS:
+    case t.LOGIN_STATUS_SUCCESS:
       return { ...state, isFetching: false, name: action.payload }
 
-    case LOGIN_FAIL:
+    case t.LOGIN_FAIL:
+    case t.LOGOUT_FAIL:
       return { ...state, isFetching: false, error: action.payload.message }
 
+    case t.LOGIN_STATUS_FAIL:
+      return { ...state, isFetching: false }
+
+    case t.LOGOUT_SUCCESS:
+      return initialState
+
     default:
       return state
   }