From bd352869a30e380201a13f1972a2fcb602bb0696 Mon Sep 17 00:00:00 2001 From: zmagod Date: Wed, 9 Aug 2017 09:08:13 +0200 Subject: [PATCH] adds user account dropdown --- .../client_api/users_controller.rb | 14 ++++ app/javascript/packs/app/reducers.js | 4 +- app/javascript/packs/app/routes.js | 11 +++ app/javascript/packs/locales/messages.js | 12 +++ .../packs/shared/actions/UsersActions.js | 23 ++++++ app/javascript/packs/shared/actions/types.js | 3 + .../packs/shared/constants/colors.js | 2 + .../navigation/components/InfoDropdown.jsx | 35 +++++++++ .../components/UserAccountDropdown.jsx | 75 +++++++++++++++++++ .../packs/shared/navigation/index.js | 29 ++++--- .../packs/shared/reducers/UsersReducer.js | 11 +++ app/views/client_api/users/show.json.jbuilder | 5 ++ config/routes.rb | 5 +- 13 files changed, 216 insertions(+), 13 deletions(-) create mode 100644 app/controllers/client_api/users_controller.rb create mode 100644 app/javascript/packs/shared/actions/UsersActions.js create mode 100644 app/javascript/packs/shared/navigation/components/InfoDropdown.jsx create mode 100644 app/javascript/packs/shared/navigation/components/UserAccountDropdown.jsx create mode 100644 app/javascript/packs/shared/reducers/UsersReducer.js create mode 100644 app/views/client_api/users/show.json.jbuilder diff --git a/app/controllers/client_api/users_controller.rb b/app/controllers/client_api/users_controller.rb new file mode 100644 index 000000000..13a8451c5 --- /dev/null +++ b/app/controllers/client_api/users_controller.rb @@ -0,0 +1,14 @@ +module ClientApi + class UsersController < ApplicationController + + def current_user_info + respond_to do |format| + format.json do + render template: '/client_api/users/show', + status: :ok, + locals: { user: current_user } + end + end + end + end +end diff --git a/app/javascript/packs/app/reducers.js b/app/javascript/packs/app/reducers.js index e6e097b01..d83169529 100644 --- a/app/javascript/packs/app/reducers.js +++ b/app/javascript/packs/app/reducers.js @@ -4,9 +4,11 @@ import { getListOfTeams } from "../shared/reducers/TeamReducers"; import { globalActivities } from "../shared/reducers/ActivitiesReducers"; +import { currentUser } from "../shared/reducers/UsersReducer"; export default combineReducers({ current_team: setCurrentTeam, all_teams: getListOfTeams, - global_activities: globalActivities + global_activities: globalActivities, + current_user: currentUser }); diff --git a/app/javascript/packs/app/routes.js b/app/javascript/packs/app/routes.js index e1369b7b6..5eb059be7 100644 --- a/app/javascript/packs/app/routes.js +++ b/app/javascript/packs/app/routes.js @@ -10,3 +10,14 @@ export const SEARCH_PATH = "/search"; // notifications export const RECENT_NOTIFICATIONS_PATH = "/client_api/recent_notifications"; + +// users +export const CURRENT_USER_PATH = "/client_api/current_user_info"; + +// info dropdown_title +export const CUSTOMER_SUPPORT_LINK = "http://scinote.net/support"; +export const TUTORIALS_LINK = "http://scinote.net/product/tutorials/"; +export const RELEASE_NOTES_LINK = "http://scinote.net/docs/release-notes/"; +export const PREMIUM_LINK = "http://scinote.net/premium/"; +export const CONTACT_US_LINK = + "http://scinote.net/story-of-scinote/#contact-scinote"; diff --git a/app/javascript/packs/locales/messages.js b/app/javascript/packs/locales/messages.js index bbf5d51fe..1a2ce761f 100644 --- a/app/javascript/packs/locales/messages.js +++ b/app/javascript/packs/locales/messages.js @@ -18,6 +18,18 @@ export default { dropdown_title: "Notifications", dropdown_settings_link: "Settings", dropdown_show_all: "Show all notifications" + }, + info_dropdown: { + customer_support: "Customer support", + tutorials: "Tutorials", + release_notes: "Release notes", + premium: "Premium", + contact_us: "Contact us" + }, + user_account_dropdown: { + greeting: "Hi, {name}", + settings: "Settings", + log_out: "Log out" } } }; diff --git a/app/javascript/packs/shared/actions/UsersActions.js b/app/javascript/packs/shared/actions/UsersActions.js new file mode 100644 index 000000000..9e834d28f --- /dev/null +++ b/app/javascript/packs/shared/actions/UsersActions.js @@ -0,0 +1,23 @@ +import axios from "axios"; +import { CURRENT_USER_PATH } from "../../app/routes"; +import { SET_CURRENT_USER } from "./types"; + +function addCurrentUser(data) { + return { + type: SET_CURRENT_USER, + payload: data + }; +} + +export function getCurrentUser() { + return dispatch => { + axios + .get(CURRENT_USER_PATH, { withCredentials: true }) + .then(({ data }) => { + dispatch(addCurrentUser(data.user)); + }) + .catch(error => { + console.log("get Current User Error: ", error); + }); + }; +} diff --git a/app/javascript/packs/shared/actions/types.js b/app/javascript/packs/shared/actions/types.js index 10480d274..084ee095b 100644 --- a/app/javascript/packs/shared/actions/types.js +++ b/app/javascript/packs/shared/actions/types.js @@ -4,3 +4,6 @@ export const GET_LIST_OF_TEAMS = "GET_LIST_OF_TEAMS"; // activities export const GLOBAL_ACTIVITIES_DATA = "GLOBAL_ACTIVITIES_DATA"; + +// users +export const SET_CURRENT_USER = "SET_CURRENT_USER"; diff --git a/app/javascript/packs/shared/constants/colors.js b/app/javascript/packs/shared/constants/colors.js index 1c9469df8..25e1a4dc7 100644 --- a/app/javascript/packs/shared/constants/colors.js +++ b/app/javascript/packs/shared/constants/colors.js @@ -1 +1,3 @@ export const MAIN_COLOR_BLUE = '#37a0d9'; +export const WHITE_COLOR = '#fff'; +export const BORDER_GRAY_COLOR = '#d2d2d2'; diff --git a/app/javascript/packs/shared/navigation/components/InfoDropdown.jsx b/app/javascript/packs/shared/navigation/components/InfoDropdown.jsx new file mode 100644 index 000000000..5dbd1a403 --- /dev/null +++ b/app/javascript/packs/shared/navigation/components/InfoDropdown.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import { FormattedMessage } from "react-intl"; +import { NavDropdown, MenuItem } from "react-bootstrap"; +import { + CUSTOMER_SUPPORT_LINK, + TUTORIALS_LINK, + RELEASE_NOTES_LINK, + PREMIUM_LINK, + CONTACT_US_LINK +} from "../../../app/routes"; + +const InfoDropdown = () => + } + id="nav-info-dropdown" + > + + + + + + + + + + + + + + + + ; + +export default InfoDropdown; diff --git a/app/javascript/packs/shared/navigation/components/UserAccountDropdown.jsx b/app/javascript/packs/shared/navigation/components/UserAccountDropdown.jsx new file mode 100644 index 000000000..8d8a67dfa --- /dev/null +++ b/app/javascript/packs/shared/navigation/components/UserAccountDropdown.jsx @@ -0,0 +1,75 @@ +import React, { Component } from "react"; +import { connect } from "react-redux"; +import PropTypes from "prop-types"; +import { NavDropdown, MenuItem } from "react-bootstrap"; +import styled from "styled-components"; +import { FormattedMessage } from "react-intl"; + +import { getCurrentUser } from "../../actions/UsersActions"; + +const StyledNavDropdown = styled(NavDropdown)` +& #user-account-dropdown { + padding-top: 10px; + padding-bottom: 10px; +} +`; + +class UserAccountDropdown extends Component { + componentDidMount() { + this.props.getCurrentUser(); + } + + render() { + return ( + +   + {this.props.current_user.fullName} + + } + > + + + + + + + + + ); + } +} + +UserAccountDropdown.propTypes = { + getCurrentUser: PropTypes.func.isRequired, + current_user: PropTypes.shape({ + id: PropTypes.number.isRequired, + fullName: PropTypes.string.isRequired, + avatarPath: PropTypes.string.isRequired + }).isRequired +}; + +// Map the states from store to component +const mapStateToProps = ({ current_user }) => ({ current_user }); + +// Map the fetch activity action to component +const mapDispatchToProps = dispatch => ({ + getCurrentUser() { + dispatch(getCurrentUser()); + } +}); + +export default connect(mapStateToProps, mapDispatchToProps)( + UserAccountDropdown +); diff --git a/app/javascript/packs/shared/navigation/index.js b/app/javascript/packs/shared/navigation/index.js index e4cb40a7e..c6a3074cf 100644 --- a/app/javascript/packs/shared/navigation/index.js +++ b/app/javascript/packs/shared/navigation/index.js @@ -3,13 +3,24 @@ import PropTypes from "prop-types"; import { connect } from "react-redux"; import { Navbar, Nav, NavItem } from "react-bootstrap"; import styled from "styled-components"; -import { MAIN_COLOR_BLUE } from "../constants/colors"; +import { + MAIN_COLOR_BLUE, + WHITE_COLOR, + BORDER_GRAY_COLOR +} from "../constants/colors"; import { getActivities } from "../actions/ActivitiesActions"; import { getTeamsList } from "../actions/TeamsActions"; import TeamSwitch from "./components/TeamSwitch"; import GlobalActivitiesModal from "./components/GlobalActivitiesModal"; import SearchDropdown from "./components/SearchDropdown"; -import NotificationsDropdown from "./components/NotificationsDropdown" +import NotificationsDropdown from "./components/NotificationsDropdown"; +import InfoDropdown from "./components/InfoDropdown"; +import UserAccountDropdown from "./components/UserAccountDropdown"; + +const StyledNavbar = styled(Navbar)` + background-color: ${WHITE_COLOR}; + border-color: ${BORDER_GRAY_COLOR}; +`; const StyledBrand = styled.a` background-color: ${MAIN_COLOR_BLUE}; @@ -21,7 +32,9 @@ const StyledBrand = styled.a` } & > img { - height: 20px; + margin-top: -4px; + max-width: 132px; + max-height: 26px; } `; @@ -38,7 +51,6 @@ class Navigation extends Component { } componentDidMount() { - console.log("runned"); this.props.getTeamsList(); } @@ -58,7 +70,7 @@ class Navigation extends Component { render() { return (
- + @@ -97,11 +109,10 @@ class Navigation extends Component { - - Link Right - + + - +