first run

app/controllers/client_api/users/user_teams_controller.rb

@@ -0,0 +1,17 @@
+module ClientApi
+  module Users
+    class UserTeamsController < ApplicationController
+
+      def leave_team
+        byebug
+        respond_to do |format|
+          format.json do
+            render template: '/client_api/users/show',
+                   status: :ok,
+                   locals: { user: current_user }
+          end
+        end
+      end
+    end
+  end
+end

app/javascript/packs/app/action_types.js

@@ -22,3 +22,7 @@ export const CHANGE_RECENT_NOTIFICATION_EMAIL =
   "CHANGE_RECENT_NOTIFICATION_EMAIL";
 export const CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL =
   "CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL";
+
+// user teams
+export const LEAVE_TEAM = "LEAVE_TEAM"
+export const SHOW_LEAVE_TEAM_MODAL = "SHOW_LEAVE_TEAM_MODAL"

app/javascript/packs/app/constants/colors.js

@@ -11,6 +11,7 @@ export const NOTIFICATION_YES = "#5a8921";
 export const NOTIFICATION_YES_BORDER = "#4d751c";
 export const SIDEBAR_HOVER_GRAY_COLOR = "#D2D2D2";
 
+export const COLOR_CONCRETE = "#f2f2f2";
 export const COLOR_ALTO = "#dddddd";
 export const COLOR_GRAY = "#909088";
 export const COLOR_ALABASTER = "#fcfcfc";

app/javascript/packs/app/reducers.js

@@ -5,10 +5,12 @@ import {
 } from "../shared/reducers/TeamReducers";
 import { globalActivities } from "../shared/reducers/ActivitiesReducers";
 import { currentUser } from "../shared/reducers/UsersReducer";
+import { showLeaveTeamModal } from "../shared/reducers/LeaveTeamReducer";
 
 export default combineReducers({
   current_team: setCurrentTeam,
   all_teams: getListOfTeams,
   global_activities: globalActivities,
-  current_user: currentUser
+  current_user: currentUser,
+  showLeaveTeamModal
 });

app/javascript/packs/app/routes.js

@@ -22,6 +22,9 @@ export const PREMIUM_LINK = "http://scinote.net/premium/";
 export const CONTACT_US_LINK =
   "http://scinote.net/story-of-scinote/#contact-scinote";
 
+// user teams
+export const LEAVE_TEAM_PATH = "/client_api/users/leave_team"
+
 // settings
 export const SETTINGS_ACCOUNT_PROFILE = "/settings/account/profile";
 export const SETTINGS_ACCOUNT_PREFERENCES = "/settings/account/preferences";

app/javascript/packs/locales/messages.js

@@ -11,6 +11,9 @@ export default {
       page_title: "sciNote"
     },
     settings_page: {
+      all_teams: "All teams",
+      in_team: "You are member of {num} team",
+      in_teams: "You are member of {num} team",
       account: "Account",
       team: "Team",
       avatar: "Avatar",

app/javascript/packs/shared/actions/LeaveTeamActions.js

@@ -0,0 +1,8 @@
+import { SHOW_LEAVE_TEAM_MODAL } from "../../app/action_types";
+
+export function leaveTeamModalShow(show, id) {
+  return({
+    payload: { show, id },
+    type: SHOW_LEAVE_TEAM_MODAL
+  });
+}

app/javascript/packs/shared/actions/TeamsActions.js

@@ -22,10 +22,10 @@ export function getTeamsList() {
     axios
       .get(TEAMS_PATH, { withCredentials: true })
       .then(response => {
-        let teams = _.values(response.data);
+        const teams = response.data.teams.collection;
         dispatch(addTeamsData(teams));
-        let current_team = _.find(teams, team => team.current_team);
-        dispatch(setCurrentUser(current_team));
+        const currentTeam = _.find(teams, team => team.current_team);
+        dispatch(setCurrentUser(currentTeam));
       })
       .catch(error => {
         console.log("get Teams Error: ", error);

app/javascript/packs/shared/modals_container/index.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import LeaveTeamModal from "./modals/LeaveTeamModal";
+
+export default () =>
+  <div>
+    <LeaveTeamModal />
+  </div>;

app/javascript/packs/shared/modals_container/modals/LeaveTeamModal.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { Modal, Button } from "react-bootstrap";
+import { FormattedMessage } from "react-intl";
+import { connect } from "react-redux";
+
+class LeaveTeamModal extends Component {
+  render() {
+    return (
+      <Modal show={this.props.showModal}>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            <FormattedMessage id="activities.modal_title" />
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>BANANAN</Modal.Body>
+        <Modal.Footer>
+          <Button>
+            <FormattedMessage id="general.close" />
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ showLeaveTeamModal }) => ({
+  showModal: showLeaveTeamModal.show,
+  teamId: showLeaveTeamModal.id
+});
+
+export default connect(mapStateToProps)(LeaveTeamModal);

app/javascript/packs/shared/navigation/components/TeamSwitch.jsx

@@ -89,7 +89,7 @@ TeamSwitch.propTypes = {
 // Map the states from store to component
 const mapStateToProps = ({ all_teams, current_team }) => ({
   current_team,
-  all_teams: _.values(all_teams)
+  all_teams: all_teams.collection
 });
 
 // Map the fetch activity action to component

app/javascript/packs/shared/reducers/LeaveTeamReducer.js

@@ -0,0 +1,8 @@
+import { SHOW_LEAVE_TEAM_MODAL } from '../../app/action_types'
+
+export function showLeaveTeamModal(state = {show: false, id: 0}, action) {
+  if(action.type ===SHOW_LEAVE_TEAM_MODAL) {
+    return {...state, ...action.payload}
+  }
+  return state
+}

app/javascript/packs/shared/reducers/TeamReducers.js

@@ -8,9 +8,12 @@ export const setCurrentTeam = (state = initialState, action) => {
   return state;
 };
 
-export const getListOfTeams = (state = [], action) => {
+export const getListOfTeams = (state = { collection: [] }, action) => {
   if (action.type === GET_LIST_OF_TEAMS) {
-    return Object.assign({}, state, action.payload);
+    return {
+      ...state,
+      collection: action.payload
+    };
   }
   return state;
 };

app/javascript/packs/src/settings/app.jsx

@@ -10,6 +10,7 @@ import store from "../../app/store";
 import messages from "../../locales/messages";
 
 import MainNav from "./components/MainNav";
+import ModalsContainer from "../../shared/modals_container";
 
 addLocaleData([...enLocaleData]);
 const locale = "en-US";
@@ -17,6 +18,7 @@ const locale = "en-US";
 const SettingsPage = () =>
   <div>
     <MainNav />
+    <ModalsContainer />
   </div>;
 
 document.addEventListener("DOMContentLoaded", () => {

app/javascript/packs/src/settings/components/team/SettingsTeams.jsx

@@ -1,7 +1,16 @@
 import React from "react";
+import PropTypes from "prop-types";
 import styled from "styled-components";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
 
-import { BORDER_LIGHT_COLOR } from "../../../../app/constants/colors";
+import {
+  BORDER_LIGHT_COLOR,
+  COLOR_CONCRETE
+} from "../../../../app/constants/colors";
+
+import TeamsPageDetails from "./components/TeamsPageDetails";
+import TeamsDataTable from "./components/TeamsDataTable";
 
 const Wrapper = styled.div`
   background: white;
@@ -9,12 +18,39 @@ const Wrapper = styled.div`
   border: 1px solid ${BORDER_LIGHT_COLOR};
   border-top: none;
   margin: 0;
-  padding: 16px 0 50px 0;
+  padding: 16px 15px 50px 15px;
 `;
 
-const SettingsTeams = () =>
+const TabTitle = styled.div`
+  background-color: ${COLOR_CONCRETE};
+  padding: 15px;
+`;
+
+const SettingsTeams = ({ teams }) =>
   <Wrapper>
-    <h1 className="text-center">Settings Teams</h1>
+    <TabTitle>
+      <FormattedMessage id="settings_page.all_teams" />
+    </TabTitle>
+    <TeamsPageDetails teams={teams} />
+    <TeamsDataTable teams={teams} />
   </Wrapper>;
 
-export default SettingsTeams;
+SettingsTeams.propTypes = {
+  teams: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      current_team: PropTypes.bool.isRequired
+    }).isRequired
+  )
+};
+
+SettingsTeams.defaultProps = {
+  teams: [{id: 0, name: "", current_team: "", role: "", members: 0}]
+};
+
+const mapStateToProps = ({ all_teams }) => ({
+  teams: all_teams.collection
+});
+
+export default connect(mapStateToProps)(SettingsTeams);

app/javascript/packs/src/settings/components/team/actions/UserTeamsActions.js

@@ -0,0 +1,2 @@
+
+import { LEAVE_TEAM_PATH } from '../../../../../app/routes'

app/javascript/packs/src/settings/components/team/components/TeamsDataTable.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import { TableHeaderColumn } from "react-bootstrap-table";
+import { connect } from "react-redux";
+import { Button } from "react-bootstrap";
+import { leaveTeamModalShow } from "../../../../../shared/actions/LeaveTeamActions";
+import DataTable from "../../../../../shared/data_table";
+
+class TeamsDataTable extends Component {
+  constructor(props) {
+    super(props);
+    this.leaveTeamModal = this.leaveTeamModal.bind(this);
+  }
+
+  leaveTeamModal(e, id) {
+    e.peventDefault();
+    this.props.leaveTeamModalShow(true, id);
+  }
+
+  leaveTeamButton(id) {
+    return (
+      <Button onClick={e => this.leaveTeamModal(e, id)}>Leave team</Button>
+    );
+  }
+
+  render() {
+    return (
+      <DataTable data={this.props.teams}>
+        <TableHeaderColumn isKey dataField="name">
+          Name
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="role">Role</TableHeaderColumn>
+        <TableHeaderColumn dataField="members">Memebers</TableHeaderColumn>
+        <TableHeaderColumn dataField="id" dataFormat={this.leaveTeamButton} />
+      </DataTable>
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch => ({
+  leaveTeamModalShow(show, id) {
+    dispatch(leaveTeamModalShow(show, id));
+  }
+});
+
+export default connect(null, mapDispatchToProps)(TeamsDataTable);

app/javascript/packs/src/settings/components/team/components/TeamsPageDetails.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components"
+import { FormattedMessage, FormattedPlural } from "react-intl";
+import { Button } from "react-bootstrap";
+
+const Wrapper = styled.div`
+  margin: 15px 0;
+`
+const TeamsPageDetails = ({ teams }) => {
+  const teamsNumber = teams.length;
+  return (
+    <Wrapper>
+      <FormattedPlural
+        value={teamsNumber}
+        one={
+          <FormattedMessage
+            id="settings_page.in_team"
+            values={{
+              num: teamsNumber
+            }}
+          />
+        }
+        other={
+          <FormattedMessage
+            id="settings_page.in_teams"
+            values={{
+              num: teamsNumber
+            }}
+          />
+        }
+      />
+      <Button>New team</Button>
+    </Wrapper>
+  );
+};
+
+TeamsPageDetails.propTypes = {
+  teams: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      current_team: PropTypes.bool.isRequired
+    })
+  )
+};
+
+TeamsPageDetails.defaultProps = {
+  teams: []
+};
+
+export default TeamsPageDetails;

app/views/client_api/teams/index.json.jbuilder

@@ -1,5 +1,7 @@
-json.array! teams do |team|
-  json.id team.id
-  json.name team.name
-  json.current_team team == current_user.current_team
+json.teams do
+  json.collection teams do |team|
+    json.id team.id
+    json.name team.name
+    json.current_team team == current_user.current_team
+  end
 end

config/routes.rb

@@ -23,6 +23,10 @@ Rails.application.routes.draw do
       get '/recent_notifications', to: 'notifications#recent_notifications'
       # users
       get '/current_user_info', to: 'users#current_user_info'
+
+      namespace :users do
+        delete '/leave_team', to: 'user_teams#leave_team'
+      end
     end
 
     # Save sample table state